cesiumjs開發實踐 (三)

                                       地圖圖層介紹

摘要

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規範)：

    <script type="text/javascript" src="js/CesiumUnminified/Cesium.js"></script>
    <script type="text/javascript" src="js/WMTSImageryProvider.js"></script>

     以上就是一個簡單的擴充cesiumjs地圖圖層的例子。下一篇《cesiumjs開發實踐(四) 地形介紹》