當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

基于ArcGIS API for JavaScript加载天地图

發布時間：2025/3/21 javascript 47 豆豆

生活随笔收集整理的這篇文章主要介紹了基于ArcGIS API for JavaScript加载天地图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

前言
效果圖
詳細代碼
總結
參考鏈接

前言

該篇主要介紹如何用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加载天地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： The difference betwe
下一篇：使用ArcGIS JS API加载WMT