OpenLayers Workshop(五)Vector tiles and Mapbox styles

Making things look bright 让地图看上去明亮一点

很显然我们这个地图需要一些样式。实际上用矢量瓦片做出来的世界地图只要结合样式了才能有用。

在web制图的历史中,曾多次尝试创建用于样式化地图的工具和格式。其中最流行的格式可能是SLD和CartoCSS。首先能想到的一个图形工具是Atlas Styler。但是他们都不简单易用。

Mapbox最终想出了Mapbox Studio,一个非常用户友好的样式编辑器,以及Mapbox Style格式。Mapbox Style格式对于我们来说简单易读写,并且被越来越多的应用支持。一个图形开源的编辑器 Maputnik 可以作为Mapbox Studio的独立替代品,用于创建和修改Mapbox样式文件。

Mapbox Style格式不仅仅用于样式化矢量数据。它还可以用它自己的数据源和图层以及初始的视图配置(例如中心点和缩放等级)来描述一整个地图。

 ol-mapbox-style 包为OpenLayers添加了对Mapbox Style格式的支持。了解该格式的工作原理后,让我们看看如何使用 ol-mapbox-style 为矢量切片数据提供专业的街道地图样式。

Using a Mapbox Style definition 使用Mapbox Style的定义

我们要使用的瓦片数据集同样来自于一个样式(见于https://cloud.maptiler.com/maps/bright/)。Workshop已经将这一个style文件拷贝了一份放在了data/文件夹下了。为了使用这个文件,我们要引用 ol-mapbox-style 工具类。这个包已经在workshop的依赖中包含并安装过了。如果没有被包含,可以使用以下指令安装:

npm install ol-mapbox-style

我们将要从这个包中引入apply方法,所以我们可以轻易的得到一张包含样式文件中所有内容的地图,并将其渲染到map-container标签中。使用方式十分简单,我们整个的main.js文件可以被缩短到两行引用和一行代码:

import 'ol/ol.css';
import {apply} from 'ol-mapbox-style';

const map = apply('map-container', './data/bright.json');

现在我们就得到了一张比较好看的地图了:

发表评论