arcgis js（五）切换底图

怼烎@ 2022-09-06 15:17 363阅读 0赞

1、经过四节的学习终于能够显示天地图了[arcgis js（四）加载天地图\_郝大大的博客-CSDN博客][arcgis js_-CSDN]，以后的开发也就能基于天地图的底图了，这节学习天地图矢量底图和影像底图的自由切换，主要介绍**两种方法**。

2、切换底图比较常用的一个widget是**"esri/widgets/BasemapToggle"**，toggle本身就是切换的意思，通过实例化BasemapToggle对象，设置nextBasemap即可：

<!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",
                "esri/widgets/BasemapToggle",
    
            ], function (Map, WebTileLayer, TileInfo, MapView, FeatureLayer, SpatialReference, Point, BasemapToggle) {
                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 vecLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo,
                    spatialReference: { wkid: 4490 },
                });
    
                //矢量注记
                var vecLayerAnno = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=cva_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"]
                    }
                });
    
                const toggle = new BasemapToggle({
                    view: view,
                    nextBasemap: { baseLayers: [vecLayer, vecLayerAnno] }
                });
    
                view.ui.add(toggle, "top-right");
    
    
            });
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 1][]

3、下面介绍使用Expand控件切换底图，这种方法可以设置底图的title：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>ArcGIS API for JavaScript</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 {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    
        <script>
            require(["esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/layers/FeatureLayer",
                "esri/layers/WebTileLayer",
                "esri/layers/MapImageLayer",
                "esri/widgets/LayerList",
                "esri/widgets/BasemapLayerList",
                "esri/widgets/Expand",
                "esri/geometry/SpatialReference",
                "esri/geometry/Point",
                "esri/layers/support/TileInfo",
            ],
                function (esriConfig, Map, MapView, FeatureLayer, WebTileLayer, MapImageLayer,
                    LayerList, BasemapLayerList, Expand,
                    SpatialReference, Point, TileInfo) {
                    var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
                    var token = ""; //天地图token，在官网申请
                    var tileInfo = new TileInfo({
                        "rows": 256,
                        "cols": 256,
                        "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 tdtImageLayer = 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 },
                        title: "天地图影像地图",
                        visible: true
                    });
    
                    //影像注记
                    var tdtAnnoImageLayer = 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 },
                        title: "天地图影像注记",
                        visible: true
                    });
    
                    //矢量地图
                    var tdtVecLayer = new WebTileLayer({
                        urlTemplate: tiandituBaseUrl + "/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=" + token,
                        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                        tileInfo: tileInfo,
                        spatialReference: { wkid: 4490 },
                        title: "天地图矢量地图",
                        visible: false
                    });
    
                    //矢量注记
                    var tdtAnnoVecLayer = new WebTileLayer({
                        urlTemplate: tiandituBaseUrl + "/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=" + token,
                        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                        tileInfo: tileInfo,
                        spatialReference: { wkid: 4490 },
                        title: "天地图矢量注记",
                        visible: false
                    });
    
                    const map = new Map({
                        basemap: {
                            baseLayers: [tdtImageLayer, tdtAnnoImageLayer, tdtVecLayer, tdtAnnoVecLayer]
                        }
    
                    });
    
                    //定位到济南市中心
                    var cityCenter = new Point(116.985, 36.671, new SpatialReference({ wkid: 4490 }));
                    const view = new MapView({
                        map: map,
                        center: cityCenter,
                        zoom: 13,
                        container: "viewDiv",
                        ui: {
                            components: ["zoom", "compass"]
                        },
                    });
    
                    let basemapLayerList = new BasemapLayerList({
                        view: view,
    
                    });
    
                    var layerListExpand = new Expand({
                        expandIconClass: "esri-icon-layer-list",
                        view: view,
                        content: basemapLayerList
                    });
                    view.ui.add(layerListExpand, "top-right");
    
    
                });
    
    
        </script>
    
    
    </head>
    
    <body>
    
        <div id="viewDiv"></div>
    
    </body>
    
    </html>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 2][]

[arcgis js_-CSDN]: https://blog.csdn.net/HB_Programmer/article/details/119446903
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70]: /images/20220829/a17e9fb0304941bf90e462b90afb64ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 1]: /images/20220829/8b768555c0704c46b5858af84d9f3187.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 2]: /images/20220829/ea9ed3cf7f30485aaa2600c6d52de5f5.png