cesiumjs开发实践 (三)

傷城~ 2022-09-23 11:49 241阅读 0赞

#                                        地图图层介绍 #

摘要

cesiumjs中可定制多种图层，可以使用www上很多地图提供商的图层数据，也可以使用自己的地图数据

cesiumjs中可定制多种图层，可以使用www上很多地图提供商的图层数据，也可以使用自己的地图数据。cesiumjs的地图图层本质上是一些瓦片数据。

对于地图瓦片数据，OGC(Open Geospatial Consortium开放地理联盟)有很多标准，如TMS、WMTS、各个商业公司也有自己的内部标准。

如果需要自己提供地图图层数据，就需要自己实现一个imageryProvider并赋予viewer的imageryProvider属性。

比如楼主本地有一个支持WMTS1.0 的server提供的service，为了使cesium能消费这个service提供的数据，楼主的WMTSImageryProvider.js实现如下：

var WMTSImageryProvider = function WMTSImageryProvider(description) {     var trailingSlashRegex = /\/$/;     var defaultCredit = new Cesium.Credit('WMTS');     description = Cesium.defaultValue(description, {});     var url = Cesium.defaultValue(description.url, 'http://localhost:88/wmts');     if (!trailingSlashRegex.test(url)) {              }     this._url = url;     this._fileExtension = Cesium.defaultValue(description.fileExtension, 'png');     this._proxy = description.proxy;     this._tileDiscardPolicy = description.tileDiscardPolicy;          this._tilingScheme = new Cesium.WebMercatorTilingScheme({         numberOfLevelZeroTilesX : 1,         numberOfLevelZeroTilesY : 1     });     this._tileWidth = 256;     this._tileHeight = 256;     this._minimumLevel = Cesium.defaultValue(description.minimumLevel, 0);     this._maximumLevel = Cesium.defaultValue(description.maximumLevel, 17);     this._extent = Cesium.defaultValue(description.extent, this._tilingScheme.extent);     this._rectangle = Cesium.defaultValue(description.rectangle, this._tilingScheme.rectangle);     this._errorEvent = new Cesium.Event();     this._ready = true;     var credit = Cesium.defaultValue(description.credit, defaultCredit);     if (typeof credit === 'string') {         credit = new Cesium.Credit(credit);     }     this._credit = credit; }; //这个函数需要自己实现特定地图服务的url拼接，这里使用的是WMTS1.0的传统URL风格 function buildImageUrl(imageryProvider,  x, y, level) {          var zoom = level + 1;     var url = imageryProvider._url ;     url += '?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile';     url += '&LAYER=' + '';     url += '&STYLE=' + '';     url += '&TILEMATRIXSET=' + 'YN_SAT';     url += '&TILEMATRIX=' + zoom ;     url += '&TILEROW=' + y ;     url += '&TILECOL=' + x ;     url += '&FORMAT=' + imageryProvider._fileExtension;     var proxy = imageryProvider._proxy;     if (Cesium.defined(proxy)) {         url = proxy.getURL(url);     }     return url; } Cesium.defineProperties(WMTSImageryProvider.prototype, {     url : {         get : function() {             return this._url;         }     },     proxy : {         get : function() {             return this._proxy;         }     },     tileWidth : {         get : function() {             if (!this._ready) {                 throw new Cesium.DeveloperError('tileWidth must not be called before the imagery provider is ready.');             }             return this._tileWidth;         }     },     tileHeight: {         get : function() {             if (!this._ready) {                 throw new Cesium.DeveloperError('tileHeight must not be called before the imagery provider is ready.');             }             return this._tileHeight;         }     },     maximumLevel : {         get : function() {             if (!this._ready) {                 throw new Cesium.DeveloperError('maximumLevel must not be called before the imagery provider is ready.');             }             return this._maximumLevel;         }     },     minimumLevel : {         get : function() {             if (!this._ready) {                 throw new Cesium.DeveloperError('minimumLevel must not be called before the imagery provider is ready.');             }             return this._minimumLevel;         }     },     tilingScheme : {         get : function() {             if (!this._ready) {                 throw new DeveloperError('tilingScheme must not be called before the imagery provider is ready.');             }             return this._tilingScheme;         }     },     extent : {         get : function() {             if (!this._ready) {                 throw new Cesium.DeveloperError('extent must not be called before the imagery provider is ready.');             }             return this._extent;         }     },     rectangle : {         get : function() {             if (!this._ready) {                 throw new DeveloperError('rectangle must not be called before the imagery provider is ready.');             }             return this._rectangle;         }     },     tileDiscardPolicy : {         get : function() {             if (!this._ready) {                 throw new Cesium.DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');             }             return this._tileDiscardPolicy;         }     },     errorEvent : {         get : function() {             return this._errorEvent;         }     },     ready : {         get : function() {             return this._ready;         }     },     credit : {         get : function() {             return this._credit;         }     } }); WMTSImageryProvider.prototype.getTileCredits = function(x, y, level) {     return undefined; }; WMTSImageryProvider.prototype.requestImage = function(x, y, level) {     if (!this._ready) {         throw new Cesium.DeveloperError('requestImage must not be called before the imagery provider is ready.');     }     var url = buildImageUrl(this,  x, y, level);     return Cesium.ImageryProvider.loadImage(this, url); };

然后调用如下：

var viewer = new Cesium.Viewer('cesiumContainer',{ imageryProvider:new WMTSImageryProvider({     url : '/wmts', }) });

别忘了在HTML页head里包含进去(楼主未使用AMD规范)：

以上就是一个简单的扩充cesiumjs地图图层的例子。下一篇《cesiumjs开发实践(四) 地形介绍》