cesiumjs开发实践(三) 地图图层介绍

2019独角兽企业重金招聘Python工程师标准>>>

     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开发实践(四) 地形介绍》

转载于:https://my.oschina.net/u/1585572/blog/289383