arcgis js（四）加载天地图

继续进阶(ง •_•)ง

之前我们一直使用arcgsi自带的底图或者地图，总有违和感，体现不出来咱们的优势，借此机会讲讲咱们国家为老百姓提供的 国家地理信息公共服务平台-天地图，也是非常的好用，如果不是为了使用arcgis的地理处理工具和server我才不用arcgisヾ(≧へ≦)〃

一、概述

在2021年6月，esri公司发布了ArcGIS API for JavaScript 4.20，该版本包含了一系列改进，官网：Overview | ArcGIS API for JavaScript，大部分的使用方法在这里都能找到。为了体现测绘和地理信息系统的特殊性和专业性，特别是要引入国家2000坐标系，与当前测绘成果和国家政策相吻合，以提高地理信息资料的精度，需要将地图坐标系设置为wkid:4490，同时国内还提供了地理信息公共平台天地图，具有较新的影像底图和矢量底图，以及对应的注记，极大的方便了测绘工作者，如何将两者有效的结合显得尤为重要。天地图提供了web端和移动端的开发接口，在此记录web端的ArcGIS+天地图的使用方法，为两者的普及工作做一份贡献。移动端的使用方式见arcgis for android 入门与提高（五）加载天地图_郝大大的博客-优快云博客_android studio 天地图

别忘了去天地图天地图API注册key，不废话，直接上代码：

二、配置方式

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>测试</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.20/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/layers/WebTileLayer",
            'esri/layers/support/TileInfo',
            'esri/views/MapView',
            "esri/layers/FeatureLayer",
            "esri/geometry/SpatialReference",
            "esri/geometry/Point",

        ], function (Map, WebTileLayer, TileInfo, MapView, FeatureLayer, SpatialReference, Point) {
            var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
            var token = ""; //天地图token，在官网申请
            var tileInfo = new TileInfo({
                "rows": 256,
                "cols": 256,
                "compressionQuality": 0,
                "origin": {
                    "x": -180,
                    "y": 90
                },
                "spatialReference": {
                    "wkid": 4490
                },
                "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 }
                ]
            })

            //影像地图
            var tiledLayer = new WebTileLayer({
                urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                tileInfo: tileInfo,
                spatialReference: { wkid: 4490 },
            });

            //影像注记
            var tiledLayerAnno = new WebTileLayer({
                urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                tileInfo: tileInfo,
                spatialReference: { wkid: 4490 },
            });

            //定位到济南市中心
            var cityCenter = new Point(116.985, 36.671, new SpatialReference({ wkid: 4490 }));

            // 创建地图
            var map = new Map({
                basemap: {
                    baseLayers: [tiledLayer, tiledLayerAnno]
                },
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: cityCenter,
                zoom: 12,
                ui: {
                    components: ["zoom", "compass"]
                }
            });
            //显示经纬度坐标
            view.on("click", (event) => {
                let lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
                let lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
                alert(lon + ", " + lat);
            });

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

效果：

三、天地图其他图层加载方式

    var URL_VECTOR_2000 = "http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=";
    var URL_VECTOR_ANNOTATION_CHINESE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=";
    var URL_VECTOR_ANNOTATION_ENGLISH_2000 = "http://{subDomain}.tianditu.com/DataServer?T=eva_c&x={col}&y={row}&l={level}&tk=";
    var URL_IMAGE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=";
    var URL_IMAGE_ANNOTATION_CHINESE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=";
    var URL_IMAGE_ANNOTATION_ENGLISH_2000 = "http://{subDomain}.tianditu.com/DataServer?T=eia_c&x={col}&y={row}&l={level}&tk=";
    var URL_TERRAIN_2000 = "http://{subDomain}.tianditu.com/DataServer?T=ter_c&x={col}&y={row}&l={level}&tk=";
    var URL_TERRAIN_ANNOTATION_CHINESE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=cta_c&x={col}&y={row}&l={level}&tk=";

    var URL_VECTOR_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=";
    var URL_VECTOR_ANNOTATION_CHINESE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=";
    var URL_VECTOR_ANNOTATION_ENGLISH_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=eva_w&x={col}&y={row}&l={level}&tk=";
    var URL_IMAGE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=img_w&x={col}&y={row}&l={level}&tk=";
    var URL_IMAGE_ANNOTATION_CHINESE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=cia_w&x={col}&y={row}&l={level}&tk=";
    var URL_IMAGE_ANNOTATION_ENGLISH_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=eia_w&x={col}&y={row}&l={level}&tk=";
    var URL_TERRAIN_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=ter_w&x={col}&y={row}&l={level}&tk=";
    var URL_TERRAIN_ANNOTATION_CHINESE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=cta_w&x={col}&y={row}&l={level}&tk=";