mapbox矢量切片_Cesium 加载矢量切片(MapBox Vector Tile)求职学习资料

矢量切片(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 = n