arcgis js（三）移除和添加地图控件

╰半夏微凉° 2022-09-06 14:24 221阅读 0赞

1、我们来看下面一段代码：

const view = new MapView({
        map: map,
        center: [-118.805, 34.027], 
        zoom: 13,
        container: "viewDiv" 
    });

该段代码实例化了一个MapView对象view，在实例化的时候可以进行参数的初始化，这里初始化了map、center、zoom和container，含义跟他们的名字一样，arcgis js默认自带了底部显示的那一行属性信息和左上角的放大缩小按钮，如果需要添加别的地图操作按钮该怎么办呢？通过代码可以将其移除或者添加需要的控件，例如移除最下面一行信息：

view.ui.remove("attribution");

添加指南针：

view.ui.add("compass");

但是你会发现指南针的位置在左上角，与放大缩小按钮有重叠，那该怎么办呢？

![20210820203447257.png][]

修改第一段列出的代码：

const view = new MapView({
        map: map,
        center: [-118.805, 34.027], 
        zoom: 13,
        container: "viewDiv",
        ui: {
    	    components: ["zoom", "compass"]
    	}
    });

这次就变成这样了，达到了我们想要的结果：

![20210820203809820.png][]

同时底部的属性信息也没了O(∩\_∩)O，大功告成！

2、ArcGIS API for JavaScript 提供了一个接口来设置简单的UI界面，同时允许这些组件放在不同的角落，添加搜索框到右上角：

var search = new Search({
        view: view
    });
    view.ui.add(search, "top-right");

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70][]

别忘了在**require**中添加**"esri/widgets/Search"**

3、如何把缩放按钮放到**右下角**呢？

<html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS Developer Guide: Basemap layers</title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
    
            .esri-view .esri-ui .esri-attribution {
                position: fixed;
                bottom: unset;
                top: 0;
            }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.20/"></script>
        <script>
            require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/widgets/Zoom",
                "esri/widgets/Attribution"
            ], (
                esriConfig,
                Map,
                MapView,
                Zoom,
                Attribution,
            ) => {
    
                esriConfig.apiKey = "YOUR_API_KEY";
    
                const map = new Map({
                    basemap: "arcgis-imagery"
                });
    
                const view = new MapView({
                    container: "viewDiv",
                    map: map,
                    center: [-10, 30],
                    zoom: 2,
                    constraints: {
                        snapToZoom: false,
                    },
                    padding: { top: 15 },
                    ui: {
                        components: []
                    }
                });
    
    
                const attribution = new Attribution({ view });
                view.ui.add(attribution, "manual");
    
    
                const zoom = new Zoom({
                    view
                })
                view.ui.add(zoom, "bottom-right");
            });
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 1][]

4、arcgis提供了非常多的控件供大家选择，根据具体需要选择，在官网查看[https://developers.arcgis.com/javascript/latest/api-reference/][https_developers.arcgis.com_javascript_latest_api-reference]

比如**卷帘工具**swipe，自从4.13版本之后才有，首先添加**"esri/widgets/Swipe"**

**官网链接：**[Swipe Widget | ArcGIS API for JavaScript][Swipe Widget _ ArcGIS API for JavaScript]

**官网例子：**

<html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Swipe Widget | Sample | ArcGIS API for JavaScript 4.20</title>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/dark/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/views/MapView",
                "esri/layers/TileLayer",
                "esri/widgets/LayerList",
                "esri/widgets/Swipe",
                "esri/widgets/Expand"
            ], function (Map, MapView, TileLayer, LayerList, Swipe, Expand) {
                const map = new Map({
                    basemap: "satellite"
                });
    
                const infrared = new TileLayer({
                    url:
                        "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/WV03_Kilauea_20180519_ShortwaveInfrared/MapServer",
                    maxScale: 3000
                });
                map.add(infrared);
    
                const nearInfrared = new TileLayer({
                    url:
                        "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/WV03_Kilauea_20180519_NearInfrared/MapServer",
                    maxScale: 3000
                });
                map.add(nearInfrared);
    
                const view = new MapView({
                    container: "viewDiv",
                    map: map,
                    zoom: 14,
                    center: [-154.88, 19.46], // longitude, latitude
                    constraints: {
                        maxZoom: 17,
                        minZoom: 8
                    }
                });
    
                // create a layerlist and expand widget and add to the view
                const layerList = new LayerList({
                    view: view
                });
                const llExpand = new Expand({
                    view: view,
                    content: layerList,
                    expanded: false
                });
                view.ui.add(llExpand, "top-right");
    
                // create a new Swipe widget
                const swipe = new Swipe({
                    leadingLayers: [infrared],
                    trailingLayers: [nearInfrared],
                    position: 35, // set position of widget to 35%
                    view: view
                });
    
                // add the widget to the view
                view.ui.add(swipe);
            });
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>

**官网效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 2][]

我们注意到该例子的样式风格是黑色，在哪设置呢？答案是css样式：

找到两者的区别了没(●ˇ∀ˇ●)

[20210820203447257.png]: /images/20220829/4fb90ef49766476fbd90b55390357acd.png
[20210820203809820.png]: /images/20220829/784e2963ca1c4d2c89a12d68eed82961.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70]: /images/20220829/f9f256ab903841efa07254f9f7f4eb56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 1]: /images/20220829/8ffe487a2f7548c2824f93df7a56a342.png
[https_developers.arcgis.com_javascript_latest_api-reference]: https://developers.arcgis.com/javascript/latest/api-reference/
[Swipe Widget _ ArcGIS API for JavaScript]: https://developers.arcgis.com/javascript/latest/sample-code/widgets-swipe/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 2]: /images/20220829/183c18f575ca4735862ce7ddfb5d3020.png