cesiumjs开发实践(三)

来源：互联网发布：jquery.min.js.dump 编辑：程序博客网时间：2024/06/11 17:24

地图图层介绍

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

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

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

0 0