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 ...
随机推荐
- H5+JS+JQuery+ECharts实现异步加载
这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...
- MFC中小笔记
主要记录下一些有啊没啊的MFC东西. 1.单文档 去掉 无标题:在玩的时候用于FindWindow(class,title) BOOL CMainFrame::PreCreateWindow(CREA ...
- 微信原始demo
有可能下载最新的demo下载不到这个原版的精简demo了. 这里为大家提供一下.以下代码为原始未改动代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 ...
- JWT.NET的使用
JWT是什么 JWT全称是Json Web Token,是一种用于双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准( RFC 7519 ),定义了一种简洁的,自包含的 ...
- 程序员的自我救赎---3.1：理解Oauth2.0
<前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...
- 关于C语言中static保留字的使用
static存储类型可以用于全部变量,无需考虑变量声明的位置.但是作用于块外部和块内部时具有不同的作用. (1)当作用于函数内部时,和每次程序离开所在块就会丢失值的自 ...
- CSS中line-height与vertical-align
参考文章: 深入了解CSS的line-height属性 Vertical-Align: 你需要知道的所有事[译] Vertical-Align: All You Need To Know 1.什么是行 ...
- 【Hdu3555】 Bomb（数位DP）
Description 题意就是找0到N有多少个数中含有49. \(1\leq N \leq2^{63}-1\) Solution 数位DP,与hdu3652类似 \(F[i][state]\)表示位 ...
- 側滑回退的layout（相似IOS側滑回退到上一个activity）
用过apple的同学应该都知道,大多数IOS应用都支持側滑回退,就不具体说明了,直接上图: 作为使用ios的android开发人员来说,我是特别喜欢这个功能的.既然这样,那就在android上也实现这 ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第14章节--使用Office Services开发应用程序 Excel Services中新功能
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第14章节--使用Office Services开发应用程序 Excel Services中新功能 从S ...