前言

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

效果图

ArcGIS_TDT

详细代码

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=申请的密钥

418_firewall

tk_origindata
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加载天地图

文章目录

前言

效果图

详细代码

总结

参考链接

猜你喜欢