arcgis添加网页版天地图时获取图层时怎么不显示自定义参数

arcgis for js加载天地图的例子网上有很多，这里先不写了，后期有空再贴代码，这里主要分析下WMTS服务为什么不显示，怎么解决。

条件：这里的WMTS服务是OGC标准的，需要使用WMTSLayer类来实例化图层。

问题：天地图和自己的WMTS只能显示一个，即先加载哪个，就只显示哪个，而另外一个图层不会显示。

原因：天地图服务和自己的WMTS服务的切片矩阵集不同导致。下面多点废话详细分析一下，因为我对各服务了解的很浅，如果有错误请批评指正。

WMTS服务是切片服务，相比WMS而言，牺牲定制地图的灵活性来提升性能，这对前端展示很有用，因为用户缩放或移动地图后，很快就能将切片的影像渲染出来。引用一段百度百科的文字来说明WMTS：

WMTS提供了一种采用预定义图块方法发布数字地图服务的标准化解决方案。WMTS弥补了WMS不能提供分块地图的不足。WMS针对提供可定制地图的服务，是一个动态数据或用户定制地图（需结合SLD标准）的理想解决办法。WMTS牺牲了提供定制地图的灵活性，代之以通过提供静态数据（基础地图）来增强伸缩性，这些静态数据的范围框和比例尺被限定在各个图块内。这些固定的图块集使得对WMTS服务的实现可以使用一个仅简单返回已有文件的Web服务器即可，同时使得可以利用一些标准的诸如分布式缓存的网络机制实现伸缩性。

1

1

而当在arcgis for js中加载esri提供的底图或天地图底图时，底图与我们自己的WMTS服务缩放级别与每块切片大小不一致。比如底图缩放2及时，将底图切为4*2的切片，比例分母是A，而此时我们的WMTS2及时比例分母不与A相等，这就导致两个地图服务冲突，而无法同时显示两个地图服务。所以从此方面下手解决这个问题。

解决：将天地图的WMTS服务http://t0.tianditu.com/vec_c/wmts，和自己的WMTS服务加载至ArcMap中，在右侧catalog目录中分别双击两个服务，查看服务属性如下图

天地图wmts服务

自己的WMTS服务

将这两个服务的切片矩阵集合分对照更改到 esri.layers.TileInfooptions里的lods属性中即可。注意清除一下浏览器缓存再刷新页面，否则很可能还展示更改前的页面状态。

代码

下面贴一下自定义OGC标准的WMTS服务在arcgis4js中的加载：

var tileInfo = new esri.layers.TileInfo({

"dpi": 90.71428571428571,//必须，否则图错

"rows": 256,

"cols": 256,

"compressionQuality": 0,

"origin": {

"x": -180,

"y": 90

},

"spatialReference": {

"wkid": 4326

},

"lods": [

{ "level": 1, "resolution": 0.703125, "scale": 295829355.454566 },

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{ "level": 19, "resolution": 0.000002682209014892578, "scale": 1128.499433 }

]

})

var tileExtent = new Extent(-180, -90, 180, 90, new SpatialReference({

wkid: 4326

}))

var layerInfo = new WMTSLayerInfo({

tileInfo: tileInfo,

fullExtent: tileExtent,

initialExtent: tileExtent,

identifier: "name",

tileMatrixSet: "EPSG:4326",

format: "image/png",

style: "_null"

})

var resourceInfo = {

version: "1.0.0",

layerInfos: [layerInfo],

copyright: "open layer"

}

var options = {

serviceMode: "KVP",

resourceInfo: resourceInfo,

layerInfo: layerInfo

}

wmtsLayer = new WMTSLayer(wmtsUrl, options)

map.addLayer(wmtsLayer)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

注意

如果lods属性设置不正确，还会导致底图与自己的wmts服务坐标错乱的问题。如果发现坐标系设置相同但同一个坐标点无法在两个服务中重合，按照上述解决方式更改lods属性即可。

2 加载带有密钥的WMTS

初始化WMTSLayer时，在第二个参数也就是options中配置键customParameters的属性即可。

demo

var options = {

...

customParameters:{

"key1":"value1",

"key2":"value2"

}

}

var wmtsLayer = new WMTSLayer(wmtsUrl, options)

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

打开CSDN，阅读体验更佳

最新发布 【2022.11】一定有效的ArcGIS JS API添加天地图方法

ArcGIS JS API 添加天地图最简洁有效的方法

继续访问

Leaflet.js加载天地图的WMTS服务（EPSG4326类型）

通过修改Leaflet扩展插件leaflet-tilelayer-wmts.js加载天地图的wmts服务（epsg4326类型）。具体介绍见：http://blog.csdn.net/dahongdahong/article/details/49685653 补充： 对于新版本的leaflet不建议使用插件方式，其本身已经支持4326坐标系了

ArcGIS Js API 加载WMTS服务

NULL 博文链接：https://wzg866.iteye.com/blog/2110958

解决办法：Arcgis添加天地图WMTS服务时，报错Unidentified Error

问题起因： 报错：Unidentified Error 错误的解决方法： 我经常会用arcgis结合天地图做数据分析工作，天地图使用起来比较方便， 平时使用得很顺手。 最近遇到了比较棘手的问题，突然天地图不能够添加到arcgis中了，关键是之前是可以用的，主要还是有时候可以用，有时候又不能用了。很烦！！ 关键是有时能用有时又不能用，你要是一直不能用也就算了，关键是曾经能用，感觉莫名其妙，很烦！！ 而在最近几个月里突然又不能够添加到arcgis中了，于是我一直在寻找解决办法: 1.修改注册表值方法 2.【A

继续访问

arcgis添加天地图wmts服务

山东天地图服务网址http://www.sdmap.gov.cn/page/updateloginfo.html?id=bbe13448-dcfc-4f75-80c2-fe84613e4402，打开网页，里面有天地图wmts服务网址（能力文档）， 在arcgis中双击“添加WMTS服务器”，将天地图wmts服务网址复制粘贴到URL栏，点击“获取图层”，点击“确定”即可。 ...

继续访问

天地图 WMTS 服务及规则

天地图官网地图服务API：http://l

您好：

首先Leaflet是用于移动友好交互式地图的领先的开源JavaScript库，具体的用法你可以参考leaflet.js官网里面有API和教程和视频以及语法说明

leaflet是不能直接调起腾讯地图：原因是因为腾讯地图的瓦片图规则和谷歌之类的不一样，如果要在leaflet中使用腾讯地图或者任何规则不统一的地图做底图，必须专门对L.TileLayer写一个扩展才能实现，重写getTileUrl函数。

瓦片图规则：你可以看“网页链接 “腾讯地图瓦片与Google地图瓦片区别和联系”这是瓦片规则的博客

默认的getTileUrl方法是这样的，比较简单 getTileUrl: function (tilePoint) {return L.Util.template(this._url, L.extend({

    s: this._getSubdomain(tilePoint),

    z: tilePoint.z,

    x: tilePoint.x,

    y: tilePoint.y

    }, this.options))

}, 修改成了这样！主要是多执行一个通过选项传入的自定义函数getUrlArgs，计算出不规则的瓦片x,y,z值 L.TileLayer.WebDogTileLayer = L.TileLayer.extend({

     getTileUrl: function (tilePoint) {

        var urlArgs,

            getUrlArgs = this.options.getUrlArgs

        if (getUrlArgs) {

            var urlArgs = getUrlArgs(tilePoint)

        } else {

            urlArgs = {

                z: tilePoint.z,

                x: tilePoint.x,

                y: tilePoint.y

            }

        }

        return L.Util.template(this._url, L.extend(urlArgs, this.options, {s: this._getSubdomain(tilePoint)}))

    }

})

L.tileLayer.webdogTileLayer = function (url, options) {

    return new L.TileLayer.WebDogTileLayer(url, options)

}

如何调用

var url = ',

    options = {

        subdomain: '012',

        getUrlArgs: function (tilePoint) {

            return {

                z: tilePoint.z,

                x: tilePoint.x,

                y: Math.pow(2, tilePoint.z) - 1 - tilePoint.y

            }

        }        

    }L.tileLayer.webdogTileLayer(url, options).addTo(this)

http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0这个url是腾讯默认的地图url地址模版。其他腾讯地图的底图样式在还是挺丰富了美观，这也是我为什么选用腾讯地图的原因，如果想调用其他样式的底图，则需要使用下面这些url:

地形图：http://p{s}.map.gtimg.com/demTiles/{z}/{x16}/{y16}/{x}_{y}.jpg

卫星图：http://p{s}.map.gtimg.com/sateTiles/{z}/{x16}/{y16}/{x}_{y}.jpg

如果你需要在地形图或卫星图上同时显示街道，你需要同时添加两个底图图层（TileLayer），一个是上面的地形图或卫星图，另外一个是一种png格式的只包含道路和文字透明底图：http://rt{s}.map.gtimg.com/realtimerender/?z={z}&x={x}&y={y}&type=vector&style=1&v=1.1.1，把这两种底图叠加，就形成了带街道的地形或卫星图。

---