4.12ArcGIS JS API在全球场景加载CGCS2000天地图叠加CGCS2000模型

5
分享 2019-07-11
前情提要:
4.11API在三维加载wkid4490天地图http://zhihu.esrichina.com.cn/article/3942
1.本文是上一篇文章正文方式1重写BasetileLayer类的方法的沿用,详细解析这一方法技术细节。
2.4.12版本不再支持上一篇文章方式2的简单方式以WebTileLayer加载天地图在Global场景。目前测试是这样,还没有深究原因。

正文:
首先先Po出截图,展示4.12能够直接在Global场景中使用CGCS2000坐标系加载三维并叠加CGCS2000天地图的能力。这是全球场景对CGCS2000坐标系的全面支持。4.11以及之前版本的API全球场景只支持WGS84和web墨卡托坐标系。
412示例图片1.jpg

412示例图片2.jpg

关键技术点有
1.扩展BaseTileLayer类。重写getTileUrl、fetchTile等方法。添加subDomains属性
        // *******************************************************
// Custom tile layer class code
// Create a subclass of BaseTileLayer
// *******************************************************

var TdtLayer = BaseTileLayer.createSubclass({
properties: {
urlTemplate: null,
subDomains: null
},
// generate the tile url for a given level, row and column
getTileUrl: function(level, row, col) {...},

// This method fetches tiles for the specified level and size.
// Override this method to process the data returned from the server.
fetchTile: function(level, row, col) {...}
});
 
2.实现subDomain,利用天地图子域名从t0-t7随机请求切片。
          // generate the tile url for a given level, row and column
getTileUrl: function(level, row, col) {

return this.urlTemplate
.replace("{level}", level)
.replace("{col}", col)
.replace("{row}", row)
.replace("{subDomain}",this.subDomains[Math.round(Math.random() * (this.subDomains.length-1))]);
},

3.请求切片时需要level+1。var url = this.getTileUrl(level+1, row, col);

          // This method fetches tiles for the specified level and size.
// Override this method to process the data returned from the server.
fetchTile: function(level, row, col) {
// call getTileUrl() method to construct the URL to tiles
// for a given level, row and col provided by the LayerView
var url = this.getTileUrl(level+1, row, col);

// request for tiles based on the generated url
return esriRequest(url, {
responseType: "image"
}).then(
function(response) {
// when esri request resolves successfully
// get the image from the response
var image = response.data;
var width = this.tileInfo.size[0];
var height = this.tileInfo.size[0];

// create a canvas with 2D rendering context
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
context.drawImage(image, 0, 0, width, height);
return canvas;
}.bind(this)
);
}

4.定义瓦片结构TileInfo。
定义瓦片结构tileInfo.jpg

切片方案的来源是ArcGIS Pro2.4安装目录下D:\Program Files\ArcGIS\Pro\Resources\TilingSchemes\CGCS2000_Geographic_Coordinate_System.xml

5.实例化TdtLayer对象,并作为底图,tk最好用每位开发者自己的。
      var tiledLayer = new TdtLayer({
urlTemplate: "http://{subDomain}.tianditu.com/vec_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=2137cbbc03b648fedff037ba326b3ab8",
subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
tileInfo:tileInfo,
});
var tdtzjLayer =new TdtLayer({
urlTemplate: "http://{subDomain}.tianditu.com/cva_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=2137cbbc03b648fedff037ba326b3ab8",
subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
tileInfo:tileInfo,
});
var map = new Map({
spatialReference:{
wkid:4490
},
basemap:{
baseLayers:[tiledLayer],
referenceLayers:[tdtzjLayer]
}
});



注意:
1.发布CGCS2000的场景图层,必须使用ArcGIS Pro2.4版本以上、ArcGIS Enterprise10.7.1以上 或 6月份之后的ArcGIS Online。
2.ArcGIS Pro2.4安装目录下的切片方案D:\Program Files\ArcGIS\Pro\Resources\TilingSchemes\CGCS2000_Geographic_Coordinate_System.xml使用这个切片方案创建的缓存地图可以在CGCS2000的全球场景中进行使用。
附件:
示例代码

3 个评论

学习了!
esri/layers/support/TileInfo 没有找到这个api啊
https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-TileInfo.html

要回复文章请先登录注册