全新升级网站,如何做网站百科,wordpress免费汉化主题,开发公司计算实际成本含土地费的税金吗矢量切片(vector tile)是当前 WebGIS 较热技术#xff0c;国内的高德、百度等在线地图都使用了矢量切片技术。相较于传统栅格切片#xff0c;矢量切片好处很多。简单几点就是#xff1a;轻量、客户端渲染、还可加密(栅格切片容易被爬取)。矢量切片格式一般有 GeoJSON、TopoJ…矢量切片(vector tile)是当前 WebGIS 较热技术国内的高德、百度等在线地图都使用了矢量切片技术。相较于传统栅格切片矢量切片好处很多。简单几点就是轻量、客户端渲染、还可加密(栅格切片容易被爬取)。矢量切片格式一般有 GeoJSON、TopoJSON 、MVT (MapBox Vector Tile)、PBF。下面是 Cesium 加载 MVT 矢量切片的代码由于样式渲染使用的了 openlayers所以首先需要安装 openlayers。一、安装 openlayersnpm install openlayers二、MVT 加载核心代码javascript// mvtProvider.jsimport * as Cesium from cesiumimport ol from openlayers/dist/ol-debugexport 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 olthis._mvtParser new this._ol.format.MVT()this._styleFun Cesium.defined(options.styleFun) ? options.styleFun : createMapboxStreetsV6Stylethis._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._rectangleSouthwestInMetersvar ne this._tilingScheme._rectangleNortheastInMetersvar mapExtent [sw.x, sw.y, ne.x, ne.y]this._resolutions ol.tilegrid.resolutionsFromExtent(mapExtent, 22, this._tileWidth)this._pixelRatio 1this._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.headwhile (item ! undefined !(item.xMvt x item.yMvt y item.zMvt level)) {item item.replacementNext}return item}function remove (tileReplacementQueue, item) {var previous item.replacementPreviousvar next item.replacementNextif (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 undefineditem.replacementNext undefined--tileReplacementQueue.count}function trimTiles (tileQueue, maximumTiles) {var tileToTrim tileQueue.tailwhile (tileQueue.count maximumTiles Cesium.defined(tileToTrim)) {var previous tileToTrim.replacementPreviousremove(tileQueue, tileToTrim)tileToTrim nulltileToTrim previous}}MVTProvider.prototype.requestImage function (x, y, level) {var cacheTile findTileInQueue(x, y, level, this._tileQueue)if (cacheTile ! undefined) {return cacheTile}var that thisvar url this._urlurl 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 512canvas.height 512var 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 xcanvas.yMvt ycanvas.zMvt zthat._tileQueue.markTileRendered(canvas)_replayGroup nullreturn 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 0var 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)
