ArcGIS API for JavaScript（3.x）如何加载天地图《ArcGIS API for Javascript 加载天地图（经纬度投影） - 张凯强 - 博客园》这篇文章已经写的很好了，但放到 4.x 上没法用，这里我将他的方法升级到 4.x 版本供大家参考。（4.x 修改了挺多东西）

在线预览：ArcGIS TianDiTu

代码：

<!DOCTYPE html>

<html style="height: 100%;">

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>

  <title>天地图底图加载（经纬度版本）</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">

  <script src="https://js.arcgis.com/4.7/"></script>

</head>

<body style="height: 100%;">

  <!-- 100vh兼容性不好 -->

  <div id="map-container" style="width: 100%;height: 100%;"></div>

  <script type="text/javascript">

  // ==========================================

  // 测试版本：V4.7

  // ==========================================

  require([

    'esri/Map',

    'esri/views/MapView',

    'esri/layers/WebTileLayer',

    'esri/layers/support/TileInfo',

    'dojo/domReady!'

    ],function(Map, MapView, WebTileLayer, 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 = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=174705aebfe31b79b3587279e211cb9a',{

        // subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'],

        subDomains: ['t0'],

        tileInfo: tileInfo

      })

      var layer_anno = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=174705aebfe31b79b3587279e211cb9a',{

        //subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'],

        subDomains: ['t0'],

        tileInfo: tileInfo

      })

      // 创建地图，不设置底图，如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)

      var map = new Map({

        spatialReference : {

          wkid : 4326

        },

        basemap: {

          baseLayers: [layer, layer_anno]

        }

      });

      // 创建MapView

      var view = new MapView({

        container: "map-container",

        spatialReference : {

          wkid : 4326

        },

        map: map,

        center: [121.67, 42.01],

        //1:scale的图

        scale: 2000

      });

      // 下面提供几个天地图经纬度投影的图层地址以及转换后的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>

Microsoft Office Excel的更多相关文章

Microsoft Office Excel 不能访问文件及COM无法访问
Microsoft Office Excel 不能访问文件及COM无法访问 Microsoft Office Excel 不能访问文件“*.xls”. 可能的原因有: 1 文件名称或路径不存在. 2 ...
Microsoft Office Excel 不能访问文件的解决办法
Microsoft Office Excel 不能访问文件"a.xls". 可能的原因有: ? 文件名称或路径不存在. ? 文件正被其他程序使用. ? 您正要保存的工作簿与当前 ...
[Excel操作]Microsoft Office Excel 不能访问文件
最近,客户服务器迁移,因操作系统环境变化而引起的的环境问题一堆,遇到的问题并解决方法在“[Excel]操作”类别会体现. Microsoft Office Excel 不能访问文件“C:\\LMSEx ...
Microsoft Office Excel 不能访问文件
问题描述: Microsoft Office Excel 不能访问文件“XX.xls”.可能的原因有: 1 文件名称或路径不存在.2 文件正被其他程序使用.3 您正要保存的工作簿与当前打开的工作簿同名 ...
ERP中通过EDI导入资料的时候出现【Microsoft Office Excel不能访问文件‘C:\Windows\TEMP\433....’
问题描述: ERP中导入单据的时候报错,Microsoft Office Excel不能访问文件'C:\Windows\TEMP\433....可能的原因有:·文件名称或路径不存在,文件正被其他程序使 ...
CVE-2011-0104 Microsoft Office Excel缓冲区溢出漏洞分析
漏洞简述 Microsoft Excel是Microsoft Office组件之一,是流行的电子表格处理软件. Microsoft Excel中存在缓冲区溢出漏洞,远程攻击者可利用此 ...
内存或磁盘空间不足，Microsoft Office Excel 无法再次打开或保存任何文档。 [问题点数：20分，结帖人wenyang2004]
在环境里是没有问题的就是发布网站后,会出现“/”应用程序中的服务器错误.--------------------------------------------------------------- ...
办公软件-Excel：Microsoft Office Excel 2003百科
ylbtech-办公软件-Excel:Microsoft Office Excel 2003百科 Microsoft® Office Excel 2003 是一种电子表格程序,可提供对于 XML 的支 ...
Microsoft Office Excel不能访问文件*.xls的解决方案
Microsoft Office Excel不能访问文件‘xxxx.xls“可能的原因有:·文件名称或路径不存在,文件正被其他程序使用:您正要保存的工作簿与当前打开的工作簿同名. 解决方案 1.首先检 ...
CVE-2011-0104：Microsoft Office Excel 中的栈溢出漏洞调试分析
0x01 前言 CVE-2011-0104 是 Microsoft Office 中的 Excel(没有打补丁的情况下)表格程序在处理 TOOLBARDEF 中的 Record 字节时没有对 Len ...

随机推荐

最长连续公共子序列(LCS)与最长递增公共子序列(LIS)
最长公共子序列(不连续) 实际问题中也有比较多的应用,比如,论文查重这种,就是很实际的一个使用方面. 这个应该是最常见的一种了,不再赘述,直接按照转移方程来进行: 按最普通的方式就是,直接构造二维矩阵 ...
python datetime模块的strftime()
strftime() 可以对datetime对象进行格式化,生成需要时间格式的时间 strptime() 可以对格式化后的时间再生成datetime对象格式化时间时,如果不想要-来隔开,还可以 ...
JavaScript.import
// --file.js-- function getJSON(url, callback) { let xhr = new XMLHttpRequest(); xhr.onload = fu ...
《JAVA设计模式》之组合模式(Composite)
在阎宏博士的<JAVA与模式>一书中开头是这样描述合成(Composite)模式的: 合成模式属于对象的结构模式,有时又叫做“部分——整体”模式.合成模式将对象组织到树结构中,可以用来描述 ...
Cnblogs 的 MetaWeblog 的接口发生了变化
Cnblogs 的 MetaWeblog 的接口发生了变化 */--> Cnblogs 的 MetaWeblog 的接口发生了变化最近把 emacs 重新配置了一下,把 cnblogs 包也重 ...
JDK8之ArrayList源码
ArrayList三个构造器 /** * Default initial capacity. */ private static final int DEFAULT_CAPACITY = 10; // ...
【刷题】java 常见的几种运行时异常RuntimeException
常见的几种罗列如下: -NullPointerException - 空指针引用异常 ClassCastException - 类型强制转换异常. IllegalArgumentException - ...
REINDEX - 重建索引
SYNOPSIS REINDEX { DATABASE | TABLE | INDEX } name [ FORCE ] DESCRIPTION 描述 REINDEX 基于存储在表上的数据重建索引, ...
React（5） --绑定函数事件
绑定函数事件在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例. run(){ ...
HDU 6686 Rikka with Travels 树的直径
题意:定义两点之间的距离为从一个点到另一个点经过的点数之和(包括这两个点),设二元组(x, y)为两条不相交的路径,一条长度为x,一条长度为y,问二元组(x, y)出现了多少次? 思路:直接上jls的 ...

Microsoft Office Excel

在线预览：ArcGIS TianDiTu

代码：

Microsoft Office Excel的更多相关文章

随机推荐

热门专题