OpenLayers Workshop(五)Vector tiles and Mapbox styles

The VectorTile layer VectorTile 图层

我们现在已经知道如何去加载瓦片图片了,并且我们也见识过多中不同的方法去加载并渲染矢量的数据。但是如果我们想将瓦片快速地传输到浏览器,并动态设置样式呢?这就是vector tiles存在的意义了。OpenLayers的VectorTile图层支持矢量瓦片。

A world map rendered from vector data 用矢量数据渲染一个世界地图

我们使用和 Basics 这一节中同样的index.html文件:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
  </body>
</html>

通常来说,我们将index.html文件保存在workshop文件夹的根目录中。

在这个应用中,我们在根目录中使用一个全新的mian.js文件,并添加下面的依赖:

import 'ol/ol.css';
import {Map, View} from 'ol';
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import {fromLonLat} from 'ol/proj';

数据源将采用OpenStreetMap的街道地图数据。瓦片的提供者为了演示而提供给我们免费访问的权限,但是需要访问密钥。所以需要我们阅读https://cloud.maptiler.com/的条款,并从中获取我们自己的key。下面的代码展示了我们获取的key,并将其定义为一个常量以便后续使用。

image 32
如何获取API Keys
// See https://cloud.maptiler.com/ for terms and API key
const key = 'lirfd6Fegsjkvs0lshxe'; // use your own instead

和之前一样我们要创建一个地图,但是我们这次以圣地亚哥为中心并放大一点点。

const map = new Map({
  target: 'map-container',
  view: new View({
    center: fromLonLat([-117.1625, 32.715]),
    zoom: 6
  })
});

我们要用到的图层类型是VectorTileLayer,数据源是VectorTileSource:

const layer = new VectorTileLayer({
  source: new VectorTileSource({
    attributions: [
      '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',
      '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
    ],
    format: new MVT(),
    url: `https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=${key}`,
    maxZoom: 14
  })
});
map.addLayer(layer);

数据源只提供从0-14的缩放等级,所以我们需要将这一消息传送给source。矢量瓦片图层通常针对512像素的瓦片进行优化,这也是矢量瓦片数据源的瓦片网格的默认值。数据提供者要求我们必须在attributions中展示数据来源,所以我们要在source的配置中进行相应设置。

现在一个没有样式的矢量瓦片地图就做好了:

image 33

发表评论

您的电子邮箱地址不会被公开。