/* MVT加载类 作者: 木遥(微信: http://marsgis.cn/weixin.html ) */ // import * as mars3d from "mars3d" ;(function (window) { function MvtImageryProvider(options) { options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT) this.options = options this._tileWidth = Cesium.defaultValue(options.tileWidth, 512) this._tileHeight = Cesium.defaultValue(options.tileHeight, 512) this._minimumLevel = Cesium.defaultValue(options.minimumLevel, 0) this._maximumLevel = Cesium.defaultValue(options.maximumLevel, 18) if (options.rectangle && options.rectangle.xmin && options.rectangle.xmax && options.rectangle.ymin && options.rectangle.ymax) { var xmin = options.rectangle.xmin var xmax = options.rectangle.xmax var ymin = options.rectangle.ymin var ymax = options.rectangle.ymax options.rectangle = Cesium.Rectangle.fromDegrees(xmin, ymin, xmax, ymax) } this._tilingScheme = Cesium.defaultValue(options.tilingScheme, new Cesium.WebMercatorTilingScheme({ ellipsoid: options.ellipsoid })) this._rectangle = Cesium.defaultValue(options.rectangle, this._tilingScheme.rectangle) this._rectangle = Cesium.Rectangle.intersection(this._rectangle, this._tilingScheme.rectangle) this._hasAlphaChannel = Cesium.defaultValue(options.hasAlphaChannel, true) this._errorEvent = new Cesium.Event() this._readyPromise = Cesium.defer() this._credit = undefined this._ready = true //mvt相关的处理 if (!window.ol) { throw new DeveloperError("请引入Openlayers类库!") } this._ol = window.ol this._mvtParser = new this._ol.format.MVT() this._key = Cesium.defaultValue(options.key, "") this._url = Cesium.defaultValue(options.url, "") if (options.styleConfig) { //(glStyle, sources, resolutions = defaultResolutions, spriteData, spriteImageUrl, getFonts) this._styleClass = window.olms.stylefunction(options.styleConfig, options.styleConfig.sources, "", null, null) // this._url = options.styleConfig.tiles[0] } else if (options.style) { switch (options.style) { case "mapbox-streets-v6": this._styleClass = new mars3d.MapboxStreetsV6() break default: this._styleClass = options.style break } } 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, this._maximumLevel, 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(MvtImageryProvider.prototype, { proxy: { get: function () { return undefined } }, tileWidth: { get: function () { return this._tileWidth } }, tileHeight: { get: function () { return this._tileHeight } }, maximumLevel: { get: function () { return undefined } }, minimumLevel: { get: function () { return undefined } }, tilingScheme: { get: function () { return this._tilingScheme } }, rectangle: { get: function () { return this._tilingScheme.rectangle } }, tileDiscardPolicy: { get: function () { return undefined } }, errorEvent: { get: function () { return this._errorEvent } }, ready: { get: function () { return true } }, readyPromise: { get: function () { return this._readyPromise.promise } }, credit: { get: function () { return undefined } }, hasAlphaChannel: { get: function () { return true } } }) MvtImageryProvider.prototype.getTileCredits = function (x, y, level) { return undefined } MvtImageryProvider.prototype.pickFeatures = function (x, y, level, longitude, latitude) { return undefined } MvtImageryProvider.prototype.requestImage = function (x, y, level, request) { var cacheTile = findTileInQueue(x, y, level, this._tileQueue) if (cacheTile != undefined) { return new Promise((resolve, reject) => { resolve(cacheTile) }) } else { var that = this var url = this._url var reverseY = this._tilingScheme.getNumberOfYTilesAtLevel(level) - y - 1 url = url.replace("{x}", x).replace("{y}", y).replace("{reverseY}", reverseY).replace("{z}", level).replace("{k}", this._key) var resource = Cesium.Resource.createIfNeeded(url) return resource.fetchArrayBuffer().then(function (arrayBuffer) { var canvas = document.createElement("canvas") canvas.width = that._tileWidth canvas.height = that._tileHeight var vectorContext = canvas.getContext("2d") var features = that._mvtParser.readFeatures(arrayBuffer) var styleFun = that._styleClass.getStyle() 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 = level that._tileQueue.markTileRendered(canvas) delete _replayGroup _replayGroup = null return canvas }) } } 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 removeQueue(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 removeQueue(tileQueue, tileToTrim) delete tileToTrim tileToTrim = null tileToTrim = previous } } class PbfolLayer extends mars3d.layer.BaseTileLayer { _addedHook() { let styleUrl = this.options.style if (mars3d.Util.isString(styleUrl) && styleUrl.endsWith(".json")) { this.getPbfStyle(styleUrl).then((data) => { if (this.isAdded) { super._addedHook() } }) } else { super._addedHook() } } //构建ImageryProvider async _createImageryProvider(options) { return createImageryProvider(options) } //取样式数据 getPbfStyle(styleUrl) { return mars3d.Util.fetchJson({ url: styleUrl, queryParameters: { access_token: this.options.key || "mars3d" } }) .then((json) => { this.options.styleConfig = json }) .catch(function (error) { console.log("加载样式出错", error) }) } } async function createImageryProvider(options) { return new MvtImageryProvider(options) } PbfolLayer.createImageryProvider = createImageryProvider //注册下 const layerType = "mvt" //图层类型 mars3d.LayerUtil.register(layerType, PbfolLayer) mars3d.LayerUtil.registerImageryProvider(layerType, createImageryProvider) //对外接口 mars3d.provider.MvtImageryProvider = MvtImageryProvider mars3d.layer.PbfolLayer = PbfolLayer })(window) // export { PbfolLayer }