ArcGIS API for Javascript 加载天地图（墨卡托投影）
<!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 加载天地图（墨卡托投影）的更多相关文章
- ArcGIS API for Javascript 加载天地图（经纬度投影）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- ArcGIS api for javascript——加载查询结果，悬停显示信息窗口
转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...
- arcgis api for javascipt 加载天地图、百度地图
写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百 ...
- ArcGIS api for javascript——加载查询结果，单击显示信息窗口
描述 本例在开始和地图交互前执行一个查询并加载结果.这允许用户点击任意郡县立即看到一个InfoWindow. QueryTask构造函数接受被查询的图层,即ESRI sample server上ESR ...
- ArcGIS api for javascript——加载图标
描述 这个示例展示了如何能用一个动画图片显示地图正在加载.在这个示例中,图片是一个小的动画GIF.当地图第一次加载或用户缩放和平移地图时显示图片.当所有图层加载完成图片消失. 这个示例是通过event ...
- ArcGIS API For JavaScript 加载地图，设置地图中心点
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- ArcGIS API for Silverlight 加载google地图
原文:ArcGIS API for Silverlight 加载google地图 using System; using System.Net; using System.Windows; using ...
- ArcGIS API for Silverlight加载google地图（后续篇）
原文:ArcGIS API for Silverlight加载google地图(后续篇) 之前在博客中(http://blog.csdn.net/taomanman/article/details/8 ...
- 解决ArcGIS API for Silverlight 加载地图的内外网访问问题
原文:解决ArcGIS API for Silverlight 加载地图的内外网访问问题 先上一个类,如下: public class BaseClass { public static string ...
随机推荐
- 在centos上搭建SVN服务器和MySQL
----------搭建MySQL--------------- 1.查看yum库中的mysql yum list | grep mysql //查看yum库中的mysql 2.选择需要的mysql进 ...
- C++反汇编第二讲,不同作用域下的构造和析构的识别
C++反汇编第二讲,不同作用域下的构造和析构的识别 目录大纲: 1.全局(静态)对象的识别,(全局静态全局一样的,都是编译期间检查,所以当做全局对象看即可.) 1.1 探究本质,理解构造和析构的生成, ...
- 对NumPy中dot()函数的理解
今天学习到numpy基本的运算方法,遇到了一个让我比较难理解的问题.就是dot函数是如何对矩阵进行运算的. 一.dot()的使用 参考文档:https://docs.scipy.org/doc/num ...
- MySQL之事务的四大特性
事务就是一组原子性的SQL查询,或者说一个独立的工作单元.如果数据库引擎能够成功地对数据应用该组查询的全部语句,那么久执行该组查询.如果其中任何一条语句因为崩溃或其他原因无法执行,那么所有语句都不会执 ...
- 用Redis轻松实现秒杀系统
秒杀系统的架构设计 秒杀系统,是典型的短时大量突发访问类问题.对这类问题,有三种优化性能的思路: 写入内存而不是写入硬盘 异步处理而不是同步处理 分布式处理 用上这三招,不论秒杀时负载多大,都能轻松应 ...
- PHP扩展代码结构详解
PHP扩展代码结构详解: 这个是继:使用ext_skel和phpize构建php5扩展 内容 (拆分出来) Zend_API:深入_PHP_内核:http://cn2.php.net/manual/ ...
- ASP.NET Core远程调试
关于ASP.NET Core远程调试的具体做法可参考微软文档——Remote Debug ASP.NET Core on a Remote IIS Computer in Visual Studio ...
- Solr管理界面详解
- Session与Cookie的概念原理
前言: 本文没有任何代码,内容全部都是概念与运行原理,在使用一个技术前一定要弄清他的本质,下面会讲Session.Cookie.ServletContext的概念与他们的联系区别 Session概念 ...
- java集合框架07——Map架构与源代码分析
前几节我们对Collection以及Collection中的List部分进行了分析,Collection中还有个Set,因为Set是基于Map实现的,所以这里我们先分析Map,后面章节再继续学习Set ...