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
// ==========================================
require(['esri/map','dojo/domReady!'],function(EsriMap){
// 创建地图,不设置底图,如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)
var map = new EsriMap('map-container',{
center: [0,0],
zoom: 0
})
// 我们是通过瓦片形式加载天地图的
// 天地图根据投影又分为两种:墨卡托和经纬度
// 经纬度投影的情况下比较复杂,且需要注意的地方比较多,加载过程如下
require(['esri/layers/WebTiledLayer', 'esri/layers/TileInfo'],function(WebTiledLayer, TileInfo){
// 首先我们设定瓦片信息,天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429,
rows : 256,
cols : 256,
compressionQuality : 0,
origin : {
x : -180,
y : 90
},
spatialReference : {
wkid : 4326
},
lods : [
{level : 2,levelValue: 2, resolution : 0.3515625, scale : 147748796.52937502},
{level : 3,levelValue: 3, resolution : 0.17578125, scale : 73874398.264687508},
{level : 4,levelValue: 4,resolution : 0.087890625, scale : 36937199.132343754},
{level : 5,levelValue: 5, resolution : 0.0439453125, scale : 18468599.566171877},
{level : 6,levelValue: 6, resolution : 0.02197265625, scale : 9234299.7830859385},
{level : 7,levelValue: 7, resolution : 0.010986328125, scale : 4617149.8915429693},
{level : 8,levelValue: 8, resolution : 0.0054931640625, scale : 2308574.9457714846},
{level : 9,levelValue: 9, resolution : 0.00274658203125, scale : 1154287.4728857423},
{level : 10,levelValue: 10, resolution : 0.001373291015625, scale : 577143.73644287116},
{level : 11,levelValue: 11, resolution : 0.0006866455078125, scale : 288571.86822143558},
{level : 12,levelValue: 12, resolution : 0.00034332275390625, scale : 144285.93411071779},
{level : 13,levelValue: 13, resolution : 0.000171661376953125, scale : 72142.967055358895},
{level : 14,levelValue: 14, resolution : 8.58306884765625e-005, scale : 36071.483527679447},
{level : 15,levelValue: 15, resolution : 4.291534423828125e-005, scale : 18035.741763839724},
{level : 16,levelValue: 16, resolution : 2.1457672119140625e-005, scale : 9017.8708819198619},
{level : 17,levelValue: 17, resolution : 1.0728836059570313e-005, scale : 4508.9354409599309},
{level : 18,levelValue: 18, resolution : 5.3644180297851563e-006, scale : 2254.4677204799655},
{ level: 19,levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
{ level: 20,levelValue: 2, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
]
})
// 根据尝试得到如下经验:
// 当WebTiledLayer 初始化时设置了 tileInfo 属性时,模板字段必须去掉 $ 也就是 {……} 而不是 ${……}
// 同时不要相信文档中的替换说明
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表,瓦片列编号,瓦片行编号,当前缩放(显示)级别
// 经纬度矢量地图瓦片的URL:
// http://t4.tianditu.com/DataServer?T=vec_c&x=27&y=3&l=5
// 分析上述 URL 我们知道,域名中的 t4 部分代表子域字段,参数列表中的TILECOL, TILEROW, TILEMATRIX 分别对应列编号, 行编号,缩放(显示)级别, 对这几个部分进行替换,得到 url 模板如下
// http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}
// 经过查询资料天地图瓦片可用子域分别有 t0,t1,t2,t3,t4,t5,t6,t7 八个子域
// 根据现有信息新建 WebTiledLayer 如下
var layer = WebTiledLayer('http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}',{
subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'],
tileInfo: tileInfo
})
map.addLayer(layer)
// 设定中心点以及缩放级别,使地图的坐标系修正为 ESPG:4326 (WGS1984)
// 这一步及其重要,否则地图坐标系为 ESPG:102100 也就是 Web墨卡托 投影的坐标系
// 如果希望设置地图中心点,以及缩放级别,请在此处设置,在新建地图时给出的坐标可以随意,但请不要和此处相同
require(['esri/geometry/Point'],function(EsriPoint){
map.centerAndZoom(new EsriPoint({
x: 109,
y: 34.5,
spatialReference: {
wkid: 4326
}
}), 8)
})
// 下面提供几个天地图经纬度投影的图层地址以及转换后的URL模板
// ============================================================================================================================================================================================
// 经纬度矢量底图
// http://t4.tianditu.com/DataServer?T=vec_c&x=28&y=4&l=5
// http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}
// 经纬度矢量中文注记(配合矢量底图使用)
// http://t0.tianditu.com/DataServer?T=cva_c&x=28&y=4&l=5
// http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}
// 经纬度矢量英文注记(配合矢量底图使用)
// http://t0.tianditu.cn/eva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eva&tileMatrixSet=c&TileMatrix=10&TileRow=158&TileCol=821&style=default&format=tiles
// http://{subDomain}.tianditu.cn/eva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度矢量蒙古文注记(配合矢量底图使用)
// http://t7.tianditu.cn/mva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mva&tileMatrixSet=c&TileMatrix=10&TileRow=158&TileCol=823&style=default&format=tiles
// http://{subDomain}.tianditu.cn/mva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度矢量维吾尔文注记(配合矢量底图使用)
// http://t5.tianditu.cn/wva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wva&tileMatrixSet=c&TileMatrix=3&TileRow=0&TileCol=6&style=default&format=tiles
// http://{subDomain}.tianditu.cn/wva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// ============================================================================================================================================================================================
// 经纬度影像底图
// http://t3.tianditu.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix=5&TileRow=4&TileCol=26&style=default&format=tiles
// http://{subDomain}.tianditu.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度行政边界(配合经纬度影像底图使用)
// http://t3.tianditu.cn/ibo_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=c&TileMatrix=10&TileRow=160&TileCol=849&style=default&format=tiles
// http://{subDomain}.tianditu.cn/ibo_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度中文注记(配合经纬度影像底图使用)
// http://t5.tianditu.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=c&TileMatrix=5&TileRow=4&TileCol=26&style=default&format=tiles
// http://{subDomain}.tianditu.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度英文注记(配合经纬度影像底图使用)
// http://t4.tianditu.cn/eia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eia&tileMatrixSet=c&TileMatrix=7&TileRow=18&TileCol=106&style=default&format=tiles
// http://{subDomain}.tianditu.cn/eia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eia&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度蒙古文注记(配合经纬度影像底图使用)
// http://t2.tianditu.cn/mia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mia&tileMatrixSet=c&TileMatrix=7&TileRow=20&TileCol=105&style=default&format=tiles
// http://{subDomain}.tianditu.cn/mia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mia&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度维吾尔文注记(配合经纬度影像底图使用)
// http://t6.tianditu.cn/wia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wia&tileMatrixSet=c&TileMatrix=7&TileRow=19&TileCol=106&style=default&format=tiles
// http://{subDomain}.tianditu.cn/wia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wia&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// ============================================================================================================================================================================================
// 经纬度地形底图
// http://t4.tianditu.cn/ter_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=c&TileMatrix=5&TileRow=5&TileCol=26&style=default&format=tiles
// http://{subDomain}.tianditu.cn/ter_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度行政边界(配合地形底图使用)
// http://t0.tianditu.cn/tbo_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=tbo&tileMatrixSet=c&TileMatrix=5&TileRow=5&TileCol=23&style=default&format=tiles
// http://{subDomain}.tianditu.cn/tbo_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=tbo&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度中文注记(配合经纬度地形底图使用)
// http://t6.tianditu.cn/cta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cta&tileMatrixSet=c&TileMatrix=5&TileRow=4&TileCol=26&style=default&format=tiles
// http://{subDomain}.tianditu.cn/cta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cta&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度英文注记(配合经纬度地形底图使用)
// http://t6.tianditu.cn/eta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eta&tileMatrixSet=c&TileMatrix=7&TileRow=20&TileCol=106&style=default&format=tiles
// http://{subDomain}.tianditu.cn/eta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eta&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度蒙古文注记(配合经纬度地形底图使用)
// http://t7.tianditu.cn/mta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mta&tileMatrixSet=c&TileMatrix=7&TileRow=19&TileCol=105&style=default&format=tiles
// http://{subDomain}.tianditu.cn/mta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mta&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度维吾尔文注记(配合经纬度地形底图使用)
// http://t0.tianditu.cn/wta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wta&tileMatrixSet=c&TileMatrix=7&TileRow=19&TileCol=106&style=default&format=tiles
// http://{subDomain}.tianditu.cn/wta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wta&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// ============================================================================================================================================================================================
// 经纬度水系
// http://t4.tianditu.cn/wat_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wat&tileMatrixSet=c&TileMatrix=4&TileRow=0&TileCol=14&style=default&format=tiles
// http://{subDomain}.tianditu.cn/wat_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wat&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 经纬度铁路
// http://t3.tianditu.cn/raw_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=raw&tileMatrixSet=c&TileMatrix=9&TileRow=77&TileCol=414&style=default&format=tiles
// http://{subDomain}.tianditu.cn/raw_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=raw&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
// 总结一下:
//
// 1. 对于经纬度投影切片的加载直接使用 WebTiledLayer 就可以直接加载,但是不能直接设置底图,同时需要设置切片信息,并且在添加图层之后使用 centerAndZoom 方法设置地图的坐标为 ESPG:4326 (WGS1984)
// 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 ...
随机推荐
- 漫谈 SLAM 技术(上)
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:解洪文 导语 随着最近几年机器人.无人机.无人驾驶.VR/AR的火爆,SLAM技术也为大家熟知,被认为是这些领域的关键技术之一.本文对S ...
- zzuli 2131 Can Win dinic+链式前向星(难点:抽象出网络模型+建边)
2131: Can Win Time Limit: 1 Sec Memory Limit: 128 MB Submit: 431 Solved: 50 SubmitStatusWeb Board ...
- UWP 共享文件——接收者
UWP上共享,分为接收者(别人共享数据给你,你接收了,然后在做你的处理)和发送者(你给别人发送数据,就像你的App支持图片共享到微信好友或者朋友圈那样,虽然UWP上的微信并不支持这样子) 很简单(参考 ...
- nuget服务器搭建,以及如何发布一个Nuget包
本文章主要介绍如何将本地dll打包成为一个Nuget包,并如何发布到自己的nuget服务器.章节如下 1. 本地dll如何打包,以及版本的更新 2. 在linux上搭建nuget.server 3. ...
- C语言写单链表的创建、释放、追加(即总是在最后的位置增加节点)
昨天周末给学妹讲了一些指针的知识,本来我对指针就是似懂非懂的状态,经过昨天一讲,我对指针的学习就更深刻了 果然给别人讲课也是学习的一个方法.加上最近复习数据结构,发现我的博客里没有链表的博文,所以趁这 ...
- day7、用户登陆出现-bash-4.1$错误的原因
有时候在使用用户登陆Linux系统时会出现-bash-4.1$错误,不显示用户名,路径信息. 原因:用户家目录里面与环境变量有关的文件被删除所导致的 .bash_profile .bashrc 这两个 ...
- 表单的自动到json与urlstr
将表单序列化成json,将json转换成字符串 //将表单序列化成json 字符串 $.fn.serializeObject = function(){ var obj = {}; var count ...
- 漂亮CSS样式用户留言表单
基本样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 面向矩阵的numpy入门笔记
我先声明我学numpy的目的:在python中使用矩阵(我需要在机器学习中使用矩阵),所以我的目的很明确,矩阵: 矩阵在numpy中叫ndarray(The N-dimensional array), ...
- MPSOC之2——ubuntu环境配置及petalinux安装
MPSOC的linux开发需要使用petalinux,选择Ubuntu操作系统. 1.Ubuntu 1.1. Ubuntu安装 版本16.04.03 vmare版本:12.0 安装时注意选择" ...