ArcGIS JS加载天地图（墨卡托投影详细版）_天地图-墨卡托图源-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45661948/article/details/119676427

本文详细介绍了如何使用ArcGIS JavaScript API加载天地图，并重点讲解了墨卡托投影在这一过程中的应用，帮助开发者实现地图服务的精准对接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>天地图底图加载（墨卡托版本）</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.21/"></script>
</head>
<body>
  <div id="map-container"></div>
  <script type="text/javascript">

  require(['esri/map','dojo/domReady!'],function(EsriMap){
    // 创建地图，不设置底图，如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)
    var map = new EsriMap('map-container',{
      center: [109,34.5],
      zoom: 8
    })

    require(['esri/layers/WebTiledLayer'],function(WebTiledLayer){

      // 在加载墨卡托地图的时候我们需要使用 ${subDomain}, ${col}, ${row}, ${level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
      // 墨卡托矢量地图瓦片的URL:
      // http://t4.tianditu.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=2&TILEROW=5&TILEMATRIX=4

      // 分析上述 URL 我们知道，域名中的 t4 部分代表子域字段，参数列表中的TILECOL, TILEROW, TILEMATRIX 分别对应列编号， 行编号，缩放(显示)级别， 对这几个部分进行替换，得到 url 模板如下
      // http://${subDomain}.tianditu.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}
      // 经过查询资料天地图瓦片可用子域分别有 t0,t1,t2,t3,t4,t5,t6,t7 八个子域
      // 根据现有信息新建 WebTiledLayer 如下

      var layer = WebTiledLayer('http://${subDomain}.tianditu.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}',{
        subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7']
      })

      map.addLayer(layer)

      // 下面提供几个天地图墨卡托投影的图层地址以及转换后的URL模板

      // ====================================================================