openlayers官方教程（十一）Vector Tiles—

openlayers官方教程（十一）Vector Tiles——The VectorTile layer

本文主要是介绍openlayers官方教程（十一）Vector Tiles——The VectorTile layer，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

The VectorTile layer

我们已经知道如何载入瓦片图片，并且能够用不同的方法载入渲染矢量地图。但是我们如何能够用传输到浏览器更快的瓦片的同时，能够样式化数据？这就是矢量瓦片的作用，openLayer通过vectorTile层来支持矢量瓦片。

A world map rendered from vector data

同样需要在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保存在工作空间根目录下，同样在main.js中添加imports：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';

数据源使用需要许可，在这个链接 https://openmaptiles.com/hosting/ 可以得到许可。下面代码将key赋给一个常量，以备后面程序使用：

// See https://openmaptiles.com/hosting/ for terms and access key
const key = '<your-access-key-here>';

创建map跟之前矢量图层一样：

const map = new Map({target: 'map-container',view: new  View({center: [0, 0],zoom: 2})
});

图层现在变了，用VectorTileLayer，同时使用VectorTileSour ce：

const layer = new VectorTileLayer({source: new VectorTileSource({attributions: ['<a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a>','<a href="http://www.openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap contributors</a>'],format: new MVT(),url: `https://free-{1-3}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key=${key}`,maxZoom: 14})
});
map.addLayer(layer);

我们数据源只提供了0到14的缩放等级，所以需要配置常用的瓦片格网。矢量瓦片通常采用512像素大小的瓦片。