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 ...
随机推荐
- php代码中的细节问题
本次主要谈及工作中关于注销功能中的路径设置及session的清除问题之前的调试一直忽略了session的功能,以至于每次使用__ROOT__/index.php/home/Student/logout ...
- 【读书笔记】《Effective Java》——创建和销毁对象
Item 1. 考虑用静态工厂方法替代构造器 获得一个类的实例时我们都会采取一个共有的构造器.Foo x = new Foo(): 同时我们应该掌握另一种方法就是静态工厂方法(static facto ...
- wkwebview加载本地html的要点
项目中有些页面,我采用了html页面开发,然后用wkwebview加载的设计.在加载过程中遇见了一些问题,在这里进行一些记载和讨论.如有不同意见欢迎进行评论沟通. 问题时候这样的: 在webview的 ...
- web管理kvm ，安装webvirtmgr
原创博文安装配置KVM http://www.cnblogs.com/elvi/p/7718574.htmlweb管理kvm http://www.cnblogs.com/elvi/p/7718582 ...
- P1197 [JSOI2008]星球大战
题目描述 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过特殊的以太隧道 ...
- php面试之四-Linux部分
php面试题之四——Linux部分(高级部分) 四.Linux部分 1.请解释下列10个shell命令的用途(新浪网技术部) top.ps.mv.find.df.cat.chmod.chgrp.gre ...
- 雅虎WEB前端网站优化 -- 34条军规
雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). 1.Minimize HTTP Requests 减少HTTP请求 ...
- 深入理解javascript函数进阶系列第二篇——函数柯里化
前面的话 函数柯里化currying的概念最早由俄国数学家Moses Schönfinkel发明,而后由著名的数理逻辑学家Haskell Curry将其丰富和发展,currying由此得名.本文将详细 ...
- 开源纯C#工控网关+组态软件(七)数据采集与归档
一. 引子 在当前自动化.信息化.智能化的时代背景下,数据的作用日渐凸显.而工业发展到如今,科技含量和自动化水平均显著提高,但对数据的采集.利用才开始起步. 对工业企业而言,数据采集日益受到重视, ...
- staticmethod、classmethod的使用
staticmethod 首先要明白两个概念 绑定方法:但凡是定义在类的内部,并且没有被任何装饰器修饰过的方法,就是绑定方法,并且有自动传值功能.类直接调用该方法时,改方法叫做类的函数属性:对象在调用 ...