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

随机推荐

NGUI_01
序言:这是张三疯第一次开始NGUI插件的学习,刚开始学习,肯定有很多漏洞,后期会及时的补上的.希望大家可以见谅,希望大佬多多指教. 扩充:为提供和我一样的小白找不到免费的NGUI插件,这里分享百度网盘 ...
qt学习教程1.qt开发环境搭建
qt学习教程1.qt开发环境搭建首先下载qt 下载地址:http://download.qt.io/archive/qt/ 此教程使用的版本为5.1.1 下载好后,打开安装包,然后点下一步选择一个 ...
PHP招聘那些事，公司真的不需要培训班出来的人么？
就业形势严峻的情况下,每个企业对于人才的需求都不一样,并不是说公司不愿意招聘培训班出来的人,而是看你的能力是不是能胜任企业招聘人才的需求,是不是能给企业带来价值的人. 现在市面上的培训机构多如牛毛,然 ...
NYOJ-2359: 巴什博弈？
2359: 巴什博弈? 时间限制: 1 Sec 内存限制: 30 MB 提交: 263 解决: 55 [提交][状态][讨论版] 题目描述有n个石子,有两人轮流从中取石子,最少a个最多b个,谁没 ...
计算rem
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ' ...
Entity Framework Code First+SQL Server，改变聚集索引，提高查询性能
.net Entity Framework(调研的是Entity Framework 4.0) code first方式生成数据库时,不能修改数据库表的索引,而SQLServer默认会把数据表的主键设 ...
Tomcat 源码分析（一）——启动与生命周期组件
写在前面的话:读Tomcat源码也有段时间了,大领悟谈不上.一些小心得记录下来,供大家参考相护学习. 一.启动流程 Tomcat启动首先需要熟悉的是它的启动流程.和初学者第一天开始写Hello Wor ...
get和post提交数据的差别
form表单提交,默认method = "get",所以你在提交数据的时候,最好将此參数指定为method = "post",否则你在提交大数据的时候,可能会出 ...
九度OJ 1205 N阶楼梯上楼问题（DP）
题目1205:N阶楼梯上楼问题时间限制:1 秒内存限制:128 兆特殊判题:否提交:2817 解决:1073 题目描写叙述: N阶楼梯上楼问题:一次能够走两阶或一阶.问有多少种上楼方式. (要 ...
根据实践经验，讲述些学习Java web能少走的弯路，内容摘自java web轻量级开发面试教程
在和不少比较上进的初级程序员打交道的过程中,我们总结出了一些能帮到合格程序员尽快进阶的经验,从总体上来讲,多学.多实践不吃亏.本文来是从 java web轻量级开发面试教程从摘录的. 1 哪些知识点 ...

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

ArcGIS API for Javascript 加载天地图（经纬度投影）的更多相关文章

随机推荐

热门专题