矢量切片(vector tile)是当前 WebGIS 较热技术,国内的高德、百度等在线地图都使用了矢量切片技术。相较于传统栅格切片,矢量切片好处很多。简单几点就是:轻量、客户端渲染、还可加密(栅格切片容易被爬取)。矢量切片格式一般有 GeoJSON、TopoJSON 、MVT (MapBox Vector Tile)、PBF。
下面是 Cesium 加载 MVT 矢量切片的代码,由于样式渲染使用的了 openlayers,所以首先需要安装 openlayers。
一、安装 openlayers
npm install openlayers
二、MVT 加载核心代码
```javascript
// mvtProvider.js
import * as Cesium from 'cesium'
import ol from 'openlayers/dist/ol-debug'
export function MVTProvider (options) {
options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT)
this._tilingScheme = Cesium.defined(options.tilingScheme) ? options.tilingScheme : new Cesium.WebMercatorTilingScheme({ ellipsoid: options.ellipsoid })
this._tileWidth = Cesium.defaultValue(options.tileWidth, 512)
this._tileHeight = Cesium.defaultValue(options.tileHeight, 512)
this._readyPromise = Cesium.when.resolve(true)
this._ol = ol
this._mvtParser = new this._ol.format.MVT()
this._styleFun = Cesium.defined(options.styleFun) ? options.styleFun : createMapboxStreetsV6Style
this._key = Cesium.defaultValue(options.key, '')
this._url = Cesium.defaultValue(options.url, 'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token={k}')
var sw = this._tilingScheme._rectangleSouthwestInMeters
var ne = this._tilingScheme._rectangleNortheastInMeters
var mapExtent = [sw.x, sw.y, ne.x, ne.y]
this._resolutions = ol.tilegrid.resolutionsFromExtent(mapExtent, 22, this._tileWidth)
this._pixelRatio = 1
this._transform = [0.125, 0, 0, 0.125, 0, 0]
this._replays = ['Default', 'Image', 'Polygon', 'LineString', 'Text']
this._tileQueue = new Cesium.TileReplacementQueue()
this._ca