<!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">

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

  // 测试版本：V3.11 - V3.21

  // 作者：张凯强

  // 邮箱：13002977506@126.com

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

  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模板

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

      // 墨卡托矢量图层

      // 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

      // 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}

      // 墨卡托中文矢量注记图层

      // http://t5.tianditu.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=3&TILEROW=1&TILEMATRIX=3

      // http://${subDomain}.tianditu.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托英文矢量注记图层

      // http://t2.tianditu.cn/eva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=eva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=4&TILEROW=3&TILEMATRIX=3

      // http://${subDomain}.tianditu.cn/eva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=eva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托蒙古文矢量注记图层

      // http://t6.tianditu.cn/mva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=mva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=0&TILEROW=2&TILEMATRIX=3

      // http://${subDomain}.tianditu.cn/mva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=mva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托维吾尔文矢量注记图层

      // http://t5.tianditu.cn/wva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=wva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=101&TILEROW=50&TILEMATRIX=7

      // http://${subDomain}.tianditu.cn/wva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=wva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

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

      // 墨卡托影像图层

      // http://t1.tianditu.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=30&TILEROW=13&TILEMATRIX=5

      // http://${subDomain}.tianditu.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}0&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托行政边界图层（配合墨卡托影像使用）

      // http://t1.tianditu.cn/ibo_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=200&TILEROW=99&TILEMATRIX=8

      // http://${subDomain}.tianditu.cn/ibo_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托中文注记图层（配合墨卡托影像底图使用）

      // http://t5.tianditu.cn/ibo_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=209&TILEROW=100&TILEMATRIX=8

      // http://${subDomain}.tianditu.cn/ibo_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托英文注记图层（配合墨卡托影像底图使用）

      // http://t2.tianditu.cn/eia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=eia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=205&TILEROW=102&TILEMATRIX=8

      // http://${subDomain}.tianditu.cn/eia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=eia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托蒙古文注记图层（配合墨卡托影像底图使用）

      // http://t4.tianditu.cn/mia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=mia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=1&TILEROW=3&TILEMATRIX=3

      // http://${subDomain}.tianditu.cn/mia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=mia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托维吾尔文注记图层（配合墨卡托影像底图使用）

      // http://t5.tianditu.cn/wia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=wia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=26&TILEROW=13&TILEMATRIX=5

      // http://${subDomain}.tianditu.cn/wia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=wia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

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

      // 墨卡托地形晕染图层

      // http://t1.tianditu.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=29&TILEROW=11&TILEMATRIX=5

      // http://${subDomain}.tianditu.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托行政边界图层（配合墨卡托地形晕染底图使用）

      // http://t0.tianditu.cn/tbo_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=tbo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=205&TILEROW=101&TILEMATRIX=8

      // http://${subDomain}.tianditu.cn/tbo_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=tbo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}1&TILEMATRIX=${level}

      // 墨卡托中文注记图层（配合墨卡托地形晕染底图使用）

      // http://t3.tianditu.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=50&TILEROW=24&TILEMATRIX=6

      // http://${subDomain}.tianditu.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托英文注记图层（配合墨卡托地形晕染底图使用）

      // http://t5.tianditu.cn/eta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=eta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=54&TILEROW=24&TILEMATRIX=6

      // http://${subDomain}.tianditu.cn/eta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=eta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托蒙古文注记图层（配合墨卡托地形晕染底图使用）

      // http://t2.tianditu.cn/mta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=mta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=52&TILEROW=25&TILEMATRIX=6

      // http://${subDomain}.tianditu.cn/mta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=mta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 墨卡托维吾尔文注记图层（配合墨卡托地形晕染底图使用）

      // http://t3.tianditu.cn/wta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=wta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=50&TILEROW=24&TILEMATRIX=6

      // http://${subDomain}.tianditu.cn/wta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=wta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}

      // 总结一下：

      //

      // 1. 对于墨卡托切片的加载直接使用 WebTiledLayer 就可以直接加载，设置或者不设置底图都行，都不会进行偏差

      // 2. 对于URL模板的替换需要注意使用的是 ${subDomain}, ${col}, ${row}, ${level} 进行对应字段的替换，不要相信文档中的 ${X}, ${Y} ,${Z} 等

      // 3. 天地图目前的子域为 t0,t1,t2,t3,t4,t5,t6,t7

    })

  })

  </script>

</body>

</html>

ArcGIS API for Javascript 加载天地图（墨卡托投影）的更多相关文章

  1. ArcGIS API for Javascript 加载天地图（经纬度投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. ArcGIS api for javascript——加载查询结果，悬停显示信息窗口

    转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...

  3. arcgis api for javascipt 加载天地图、百度地图

    写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百 ...

  4. ArcGIS api for javascript——加载查询结果，单击显示信息窗口

    描述 本例在开始和地图交互前执行一个查询并加载结果.这允许用户点击任意郡县立即看到一个InfoWindow. QueryTask构造函数接受被查询的图层,即ESRI sample server上ESR ...

  5. ArcGIS api for javascript——加载图标

    描述 这个示例展示了如何能用一个动画图片显示地图正在加载.在这个示例中,图片是一个小的动画GIF.当地图第一次加载或用户缩放和平移地图时显示图片.当所有图层加载完成图片消失. 这个示例是通过event ...

  6. ArcGIS API For JavaScript 加载地图，设置地图中心点

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. ArcGIS API for Silverlight 加载google地图

    原文:ArcGIS API for Silverlight 加载google地图 using System; using System.Net; using System.Windows; using ...

  8. ArcGIS API for Silverlight加载google地图（后续篇）

    原文:ArcGIS API for Silverlight加载google地图(后续篇) 之前在博客中(http://blog.csdn.net/taomanman/article/details/8 ...

  9. 解决ArcGIS API for Silverlight 加载地图的内外网访问问题

    原文:解决ArcGIS API for Silverlight 加载地图的内外网访问问题 先上一个类,如下: public class BaseClass { public static string ...

随机推荐

  1. JavaScript正则表达式（Regular Expression）：RegExp对象

    第一部分:新建正则表达式 JavaScript中正则表达式是参照Perl 5(一门历史很悠久的语言,现在tiobe编程语言排行依然在10名左右)建立的. 新建正则表达式的方法有两种: 1.使用字面量( ...

  2. 【转】《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork

    原文链接:http://www.cnblogs.com/woodk/articles/5199536.html JavaScript多线程,在HTML5 WebWork没出现之前很多人都是用Concu ...

  3. oracle中 常用的 join on 相关和 集合运算的总结

    sql常用联合查询的 join on . left join(左连接) . right join (右连接).inner join (等值连接)以及常用的集合运算有:union.unionall.mi ...

  4. 一个简易的服务框架lsf

    项目地址:https://github.com/jianliu/lsf 主体思路是利用javaassist实现一个代理类,代理java的接口,实现每一个方法,实现的代码是对每个方法的名称.参数构建一个 ...

  5. velocity 是如何实现内省 屏蔽反射的

    velocity的标签中支持$abc 这样的语法,如果abc是一个对象,则写模板时就可以利用它来进行反射,调用一些危险的方法,如 $vm.getClass().newInstance() #set ( ...

  6. UWP 邮件反馈

    在我们构建App的时候,一个很人性化的设计就是增加邮件反馈渠道,就是让用户直接发邮件给你反馈. 当然,你也可以用系统自带的"反馈中心"(超级无敌难用,还经常打不开),或者使用商店的 ...

  7. 学习图像算法阶段性总结 (附一键修图Demo)

    今天特别感慨.自己从决定研究图像处理.势必要做出一键修图算法. 经历了,三个多月的书籍积累,三个多月的算法调整以及优化. 人是一种奇怪的动物.当你做不到的时候,你以为做到了.自己会感觉非常爽,非常有成 ...

  8. EGOCache缓存框架具体解说

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  9. 使用NPOI读取Excel数据到DataTable

    如今XML文件的存储格式大行其道,可是也不是适用于全部情况,非常多单位的数据交换还是使用Excel的形式.这就使得我们须要读取Excel内的数据.载入到程序中进行处理.可是如何有效率的读取,如何使程序 ...

  10. Ubuntu下errno值

    Ubuntu下errno值             每当一个Unix函数(如socket函数)中错误发生时,全局变量errno将被设置成一个指示错误类型的正整数,假设函数不返回错误,errno的值就未 ...