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

最新推荐文章于 2023-07-10 23:28:03 发布

之乎者也哦

最新推荐文章于 2023-07-10 23:28:03 发布

阅读量1.7k

点赞数 3

分类专栏： Web GIS 开发文章标签： GIS

本文链接：https://blog.csdn.net/HB_Programmer/article/details/119830905

版权

Web GIS 开发专栏收录该内容

12 篇文章 18 订阅

订阅专栏

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");

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

修改第一段列出的代码：

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

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

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

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

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

别忘了在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>

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

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

官网链接：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>

官网效果：

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

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

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

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

之乎者也哦

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
arcgis js（三）移除和添加地图控件

1、我们来看下面一段代码：const view = new MapView({ map: map, center: [-118.805, 34.027], zoom: 13, container: "viewDiv" });该段代码实例化了一个MapView对象view，在实例化的时候可以进行参数的初始化，这里初始化了map、center、zoom和container，含义跟他们的名字一样，arcgis js默认自带了底部显示的那一行属性信息和左上角的放大缩小按
复制链接

扫一扫