前言

该篇主要介绍如何用ArcGIS JS API加载天地图，具体应用场景以及需求分析等，在上篇基于ArcGIS API for JavaScript加载百度各种类型切片地图已经说过了，不再做过多介绍。

效果图

详细代码

TDTLayer.js

define(["esri/layers/TileInfo","esri/layers/TiledMapServiceLayer", 'esri/geometry/Extent',"esri/geometry/Point","esri/SpatialReference","dojo/_base/lang","dojo/_base/declare"
], function(TileInfo,TiledMapServiceLayer,Extent,Point,SpatialReference,lang,declare
){return declare([TiledMapServiceLayer], {constructor: function() {this.spatialReference = new SpatialReference({ wkid:4326 });this.initialExtent = (this.fullExtent = new Extent(-180.0,-90.0, 180.0, 90.0, this.spatialReference));this.tileInfo = new TileInfo({"rows" : 256,"cols" : 256,"origin" : {"x" : -180,"y" : 90},"spatialReference" : {"wkid" : 4326},"lods": [{"level": "1", "scale": 295829355.45, "resolution": 0.703125},{"level": "2", "scale": 147914677.725, "resolution": 0.3515625},{"level": "3", "scale": 73957338.8625, "resolution": 0.17578125},{"level": "4", "scale": 36978669.43125, "resolution": 0.087890625},{"level": "5", "scale": 18489334.715625, "resolution": 0.0439453125},{"level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625},{"level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125},{"level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625},{"level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125},{"level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625},{"level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125},{"level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625},{"level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125},{"level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625},{"level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125},{"level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625},{"level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312},{"level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156},{"level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578}]});this.loaded = true;this.onLoad(this);},getTileUrl: function (level, row, col) {return "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL="+ col + "&FORMAT=tiles"+"&tk=02bfaceb68be37589fe97da1f860c873";}});
});

index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>ArcGIS JS API 加载天地图</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css"><style>html,body{height: 100%;padding: 0;margin: 0;}#map{height: 100%;}</style><script>var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));//var package_path = window.location.pathname.replace(/\/[^\/]*$/,"");var dojoConfig = {// The locationPath logic below may look confusing but all its doing is// enabling us to load the api from a CDN and load local modules from the correct location.packages: [{name: "modules",location: package_path + '/modules'}]};</script><script src="https://js.arcgis.com/3.27/"></script>
</head>
<script>require(["esri/map","modules/TDTLayer","dojo/domReady!"], function(Map,TDTLayer) {var map = new Map("map");var layer = new TDTLayer();map.addLayer(layer);});
</script>
<body><div id="map"></div>
</body>
</html>

总结

注意 getTileUrl 返回的地址，行列号、缩放级别要对应,19年起天地图访问后面要加上密钥(tk=********)，要获取key的话可以注册成为天地图开发者，创建应用后可以获取；
tileInfo 里面的信息可以通过地图服务元数据查询，如现在用的地图可以通过 http://t0.tianditu.gov.cn/vec_c/wmts?request=GetCapabilities&service=wmts 查询，如果请求被拦截的话需要在后面追加 &tk=申请的密钥

3. 各种天地图服务地址：http://lbs.tianditu.gov.cn/server/MapService.html
4. 关于比例尺(scale)与分辨率的换算关系可参考： https://blog.csdn.net/supermapsupport/article/details/70143182
https://blog.csdn.net/esrichinacd/article/details/19338471

参考链接

https://developers.arcgis.com/javascript/3/jssamples/layers_wmtslayerresourceinfo.html

源文件下载地址：https://download.csdn.net/download/wml00000/11092383

基于ArcGIS API for JavaScript加载天地图相关推荐

填坑 ---- arcgis api for javascript 加载天地图
写在前面首先要感谢 arcgis api for javascript 加载天地图这篇文章,帮助我完成了在网页中加载天地图. 在此就不再描述加载天地图的方法与过程,只记录我遇到的一个坑与填坑方法. ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
GIS开发之二维地下管线综合管理系统（Arcgis）第四节使用arcgis api for js 加载天地图
GIS开发之二维地下管线综合管理系统(Arcgis)第四节使用arcgis api for js 加载天地图核心js文件调用方式调用结果核心js文件 #通过定义加载天地图js文件,引用并组织 ...
arcgis api 4.x加载天地图（经纬度和墨卡托投影）（一篇文章搞透天地图加载）
主要说明: 1.天地图影像分两种经纬度投影(WKID:4490)和墨卡托投影两种,arcgis默认为墨卡托坐标系(3857),可以切换二维/三维,加载经纬度切片时view需要设置wkid:4326 2 ...
arcgis api for javascipt 加载天地图、百度地图
写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百 ...
(转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...
Android Arcgis入门(12)、加载天地图
在项目中可以经常需要动态加载一些图层,像投影地图服务.投影地图服务器.其实网上有大量这样的服务,比如天地图官网, . 随便点开一个服务,里面有相关的信息.那如何加载这样图层服务呢. 一.首先感谢这篇博 ...
使用ArcGIS JavaScript API 3.18 加载天地图
对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. Ar ...
ArcGIS JS api 4.15加载天地图（一）
1 下载与配置.进入下载页面 https://developers.arcgis.com/javascript/latest/guide/get-api/ 2.下载完成后,将js类库放到web程序资源 ...

基于ArcGIS API for JavaScript加载天地图

文章目录

前言

效果图

详细代码

总结

参考链接

基于ArcGIS API for JavaScript加载天地图相关推荐

最新文章

热门文章