矢量切片(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._cacheSize = 1000
}
Object.defineProperties(MVTProvider.prototype, {
proxy: {
get () {
return undefined
}
},
tileWidth: {
get () {
return this._tileWidth
}
},
tileHeight: {
get () {
return this._tileHeight
}
},
maximumLevel: {
get () {
return undefined
}
},
minimumLevel: {
get () {
return undefined
}
},
tilingScheme: {
get () {
return this._tilingScheme
}
},
rectangle: {
get () {
return this._tilingScheme.rectangle
}
},
tileDiscardPolicy: {
get () {
return undefined
}
},
errorEvent: {
get () {
return this._errorEvent
}
},
ready: {
get () {
return true
}
},
readyPromise: {
get () {
return this._readyPromise
}
},
credit: {
get () {
return undefined
}
},
hasAlphaChannel: {
get () {
return true
}
}
})
MVTProvider.prototype.getTileCredits = function () {
return undefined
}
function findTileInQueue (x, y, level, tileQueue) {
var item = tileQueue.head
while (item !== undefined && !(item.xMvt === x && item.yMvt === y && item.zMvt === level)) {
item = item.replacementNext
}
return item
}
function remove (tileReplacementQueue, item) {
var previous = item.replacementPrevious
var next = item.replacementNext
if (item === tileReplacementQueue._lastBeforeStartOfFrame) {
tileReplacementQueue._lastBeforeStartOfFrame = next
}
if (item === tileReplacementQueue.head) {
tileReplacementQueue.head = next
} else {
previous.replacementNext = next
}
if (item === tileReplacementQueue.tail) {
tileReplacementQueue.tail = previous
} else {
next.replacementPrevious = previous
}
item.replacementPrevious = undefined
item.replacementNext = undefined
--tileReplacementQueue.count
}
function trimTiles (tileQueue, maximumTiles) {
var tileToTrim = tileQueue.tail
while (tileQueue.count > maximumTiles &&
Cesium.defined(tileToTrim)) {
var previous = tileToTrim.replacementPrevious
remove(tileQueue, tileToTrim)
tileToTrim = null
tileToTrim = previous
}
}
MVTProvider.prototype.requestImage = function (x, y, level) {
var cacheTile = findTileInQueue(x, y, level, this._tileQueue)
if (cacheTile !== undefined) {
return cacheTile
}
var that = this
var url = this._url
url = url.replace('{x}', x).replace('{y}', y).replace('{z}', level).replace('{k}', this._key);
(function (x, y, z) {
var resource = Cesium.Resource.createIfNeeded(url)
return resource.fetchArrayBuffer().then((arrayBuffer) => {
var canvas = document.createElement('canvas')
canvas.width = 512
canvas.height = 512
var vectorContext = canvas.getContext('2d')
var features = that._mvtParser.readFeatures(arrayBuffer)
var styleFun = that._styleFun()
var extent = [0, 0, 4096, 4096]
var _replayGroup = new ol.render.canvas.ReplayGroup(0, extent, 8, true, 100)
for (var i = 0; i < features.length; i++) {
var feature = features[i]
var styles = styleFun(features[i], that._resolutions[level])
for (var j = 0; j < styles.length; j++) {
ol.renderer.vector.renderFeature_(_replayGroup, feature, styles[j], 16)
}
}
_replayGroup.finish()
_replayGroup.replay(vectorContext, that._pixelRatio, that._transform, 0, {}, that._replays, true)
if (that._tileQueue.count > that._cacheSize) {
trimTiles(that._tileQueue, that._cacheSize / 2)
}
canvas.xMvt = x
canvas.yMvt = y
canvas.zMvt = z
that._tileQueue.markTileRendered(canvas)
_replayGroup = null
return canvas
}).otherwise(() => {
})
}(x, y, level))
}
MVTProvider.prototype.pickFeatures = function () {
return undefined
}
function createMapboxStreetsV6Style () {
var fill = new ol.style.Fill({ color: '' })
var stroke = new ol.style.Stroke({ color: '', width: 1 })
var polygon = new ol.style.Style({ fill })
var strokedPolygon = new ol.style.Style({ fill, stroke })
var line = new ol.style.Style({ stroke })
var text = new ol.style.Style({
text: new ol.style.Text({
text: '', fill, stroke
})
})
var iconCache = {}
function getIcon (iconName) {
var icon = iconCache[iconName]
if (!icon) {
icon = new ol.style.Style({
image: new ol.style.Icon({
src: https://cdn.rawgit.com/mapbox/maki/master/icons/${iconName}-15.svg,
imgSize: [15, 15]
})
})
iconCache[iconName] = icon
}
return icon
}
var styles = []
return function (feature, resolution) {
var length = 0
var layer = feature.get('layer')
var cls = feature.get('class')
var type = feature.get('type')
var scalerank = feature.get('scalerank')
var labelrank = feature.get('labelrank')
var adminLevel = feature.get('admin_level')
var maritime = feature.get('maritime')
var disputed = feature.get('disputed')
var maki = feature.get('maki')
var geom = feature.getGeometry().getType()
if (layer === 'landuse' && cls === 'park') {
fill.setColor('#d8e8c8')
styles[length++] = polygon
} else if (layer === 'landuse' && cls === 'cemetery') {
fill.setColor('#e0e4dd')
styles[length++] = polygon
} else if (layer === 'landuse' && cls === 'hospital') {
fill.setColor('#fde')
styles[length++] = polygon
} else if (layer === 'landuse' && cls === 'school') {
fill.setColor('#f0e8f8')
styles[length++] = polygon
} else if (layer === 'landuse' && cls === 'wood') {
fill.setColor('rgb(233,238,223)')
styles[length++] = polygon
} else if (layer === 'waterway' &&
cls !== 'river' && cls !== 'stream' && cls !== 'canal') {
stroke.setColor('#a0c8f0')
