arcgis 加载天地图WMTS服务

发布时间：2024-12-18 01:42

提前研究并下载地图应用，避免购买导游服务 #生活知识# #生活感悟# #旅行生活攻略# #穷游省钱攻略#

arcgis加载天地图的WMTS服务网络上教程也有很多，并且很多GIS开发人员都将其进行了相应的封装，但是大部分对于初学者而言，存在代码不全的情况，因此，这里将真个天地图的WMTS服务地图的加载的代码全部展现出来，方便初学者进行天地图的服务调用。并且在本文中，实现了一个模块对天地图所有MWTS服务调用的封装，具体的代码源代码请见码云（https://gitee.com/MrHuanLiu/TDTLib），本文只对重点进行详解。

对于Dojo 中类的定义及其使用的相关方法请查看(https://dojotoolkit.org/documentation/tutorials/1.10/declare/index.html),

对于矢量图层与影像图层（包括各自注记图层的加载），存在大量代码重复的代码，且不同图层的加载主要是由于天地图服务地址的差异，其余的基本一样，这也是对WMTS服务进行再次封装的基础。下面我将封装模块中的getTileUrl方法返回的天地图服务地址单独摘取出来，你们可以仔细对比一下各自的区别。

矢量图层

"http://t" + col % 8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles"; 矢量注记图层

"http://t" + row % 8 + ".tianditu.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles"; 影像图层

"http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles" ; 影像注记图层

"http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";

1.加载所有WMTS服务模块的封装

这个模块的封装和以下的2-5 一样具有共同点，只不过现在我们的一个模块需要完成对矢量图层、矢量注记图层、影像图层、影像注记图层、地形图层、地形注记图层等加载，其中不同注记图层可以有（中文、英文、蒙古文、维吾尔文）等四种注记图层的选择，并且可以选择坐标是投影坐标还是地理坐标。（该类源代码及相关说明见 https://gitee.com/MrHuanLiu/TDTLib），这里仅提供一个示例：

<!DOCTYPE html>

<html>

<head>

<title>Search widget tutorial</title>

<style>

html,

body,#map {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

</style>

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));

console.log(package_path);

var dojoConfig = {

baseUrl: "../lib/3.25/dojo",

packages:[

{name:'lib',location:'/arcgisDemo/lib/TDTLib'}

async: true,

locale: 'zh-cn'

}

</script>

require([

"lib/TDTMapLayer",

"esri/map",

"dojo/domReady!"

], function (TDTMapLayer, Map) {

const map = new Map('map', {

logo: false

});

let verLayer = new TDTMapLayer();

let verAnnoLayer = new TDTMapLayer("ano");

let imgLayer = new TDTMapLayer("img","w");

let imgAnnoLayer = new TDTMapLayer("img","w","ano");

let imgAnnoLayerM = new TDTMapLayer("img","w","ano","mia");

map.addLayer(imgAnnoLayerM);

});

</script>

</head>

<body>

</body>

</html>

2.天地图矢量图层的加载

define(["dojo/_base/declare",

"esri/layers/tiled"],

function (declare) {

return declare(esri.layers.TiledMapServiceLayer, {

constructor: function () {

this.spatialReference = new esri.SpatialReference({wkid: 4326});

this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));

this.tileInfo = new esri.layers.TileInfo({

"rows": 256,

"cols": 256,

"compressionQuality": 0,

"origin": {

"x": -180,

"y": 90

"spatialReference": {

"wkid": 4326

"lods": [

{"level": 2, "resolution": 0.3515625, "scale": 147748796.52937502},

{"level": 3, "resolution": 0.17578125, "scale": 73874398.264687508},

{"level": 4, "resolution": 0.087890625, "scale": 36937199.132343754},

{"level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877},

{"level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385},

{"level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693},

{"level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846},

{"level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423},

{"level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116},

{"level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558},

{"level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779},

{"level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895},

{"level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447},

{"level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724},

{"level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619},

{"level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309},

{"level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655}

]

});

this.loaded = true;

this.onLoad(this);

getTileUrl: function (level, row, col) {

return "http://t" + col % 8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";

}

});

3.天地图矢量注记图层的加载