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规范):
<script type="text/javascript" src="js/CesiumUnminified/Cesium.js"></script> <script type="text/javascript" src="js/WMTSImageryProvider.js"></script>
以上就是一个简单的扩充cesiumjs地图图层的例子。下一篇《cesiumjs开发实践(四) 地形介绍》