这里主要介绍矢量切片图层在Openlayers中的应用，这里以加载mapbox样式图层为例来说明矢量切片图层的使用。例子中使用的是OpenStreetMap的街道数据，将提供免费的数据，但需要在官网申请一个key。进入OpenStreetMap的官方文档,可以查看获取key的相关信息。

加载矢量切片

使用矢量切片图层跟使用其它图层的方法差不多，首先就是引入相关的类，如下所示：

import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';

然后再创建相关的图层：

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

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);

加载图层后的效果图如下所示：

image

MVT为Mapbox Vector Tiles的缩写，表示数据来源格式采用的是Mapbox的矢量切片，加载地图时，将以切片的方式来加载数据，切片大小默认为512 x 512。

添加交互

由于矢量地图的数据是保存在客户端的，但保存数据仅仅是一些渲染相关的，还有可以获取到geometries，我们就可以利用这一点来对地图做一起交互，这里做一个示例，当鼠标移动时，在鼠标移动所处的位置根据geometries来绘制一个矩形。

map.on('pointermove', function(event) {
  source.clear();
  map.forEachFeatureAtPixel(event.pixel, function(feature) {
    const geometry = feature.getGeometry();
    source.addFeature(new Feature(fromExtent(geometry.getExtent())));
  }, {
    hitTolerance: 2
  });
});

首先为地图添加一个pointermove事件，然后再使用forEachFeatureAtPixel来获取当前点关联的要素，在将geometry添加到矢量图层上。效果如下所示：

image
个人博客