281 lines
7.7 KiB
JavaScript
281 lines
7.7 KiB
JavaScript
/* MVT加载类 作者： 木遥（微信: http://marsgis.cn/weixin.html ） */
|
||
(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.when.resolve(true);
|
||
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();
|
||
|
||
switch (options.style) {
|
||
case "mapbox-streets-v6":
|
||
this._styleClass = new mars3d.MapboxStreetsV6()
|
||
break;
|
||
default:
|
||
this._styleClass = options.style;
|
||
break;
|
||
|
||
}
|
||
|
||
this._key = Cesium.defaultValue(options.key, "");
|
||
this._url = Cesium.defaultValue(options.url, "");
|
||
|
||
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;
|
||
}
|
||
},
|
||
|
||
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 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;
|
||
}).otherwise(function (error) {
|
||
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 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;
|
||
}
|
||
};
|
||
|
||
|
||
|
||
function createImageryProvider (options) {
|
||
return new MvtImageryProvider(options)
|
||
}
|
||
|
||
class MvtLayer extends mars3d.layer.BaseTileLayer {
|
||
//构建ImageryProvider
|
||
_createImageryProvider (options, urltemplate) {
|
||
return createImageryProvider(options, urltemplate)
|
||
}
|
||
}
|
||
MvtLayer.createImageryProvider = createImageryProvider
|
||
|
||
//注册下
|
||
const layerType = 'mvt'//图层类型
|
||
mars3d.layer.register(layerType, MvtLayer)
|
||
mars3d.layer.registerImageryProvider(layerType, createImageryProvider)
|
||
|
||
//对外接口
|
||
window.mars3d.provider.MvtImageryProvider = MvtImageryProvider;
|
||
window.mars3d.layer.MvtLayer = MvtLayer;
|
||
|
||
})(window);
|