ArcGIS API For Javascript 4.15 绘制地图:底图、图层的加载和切换

1、底图、图层的加载

## index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的地图页面</title>
    <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/4.15/esri/css/main.css">
    <script src="http://127.0.0.1/arcgis_js_api/4.15/init.js"></script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="viewDiv"></div>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer"
        ], function(Map, MapView, MapImageLayer) {
            var map = new Map({
                basemap: "hybrid"
            });

            var map2 = new Map({
                basemap: "osm"
            });

            var layer = new MapImageLayer({
                url: "http://localhost:6080/arcgis/rest/services/buildings/MapServer"
            });

            map2.add(layer);

            var view = new MapView({
                container: "viewDiv",
                map: map2,
                center: [111.65, 40.82],
                zoom: 13,
                // rotation: 45,
                ui: {
                    components: ["zoom", "compass"]
                }
            });
        });
    </script>
</body>
</html>

实现效果

在这里插入图片描述

2、底图、图层的切换

## index2.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的地图页面</title>
    <!-- <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/4.15/esri/css/main.css"> -->
    <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/4.15/esri/themes/dark-blue/main.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="http://127.0.0.1/arcgis_js_api/4.15/init.js"></script>
</head>

<body>
    <div id="viewDiv"></div>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "esri/widgets/LayerList",
            "esri/widgets/Home",
            "esri/widgets/BasemapToggle"
        ], function(Map, MapView, MapImageLayer, LayerList, Home, BasemapToggle) {
            var layer = new MapImageLayer({
                url: "http://localhost:6080/arcgis/rest/services/buildings/MapServer",
                title: "全球国家",
                listMode: "hide-children",
                visible: false
            });

            var layer2 = new MapImageLayer({
                url: "http://localhost:6080/arcgis/rest/services/20201130/buildings_purple/MapServer",
                title: "全球人口密度",
                listMode: "hide"
            });

            var map = new Map({
                basemap: "hybrid",
                layers: [layer, layer2]
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [111.65, 40.82],
                zoom: 13,
                // rotation: 45,
                ui: {
                    components: ["zoom", "compass"]
                }
            });

            var layerList = new LayerList({
                view: view
            });

            view.ui.add(layerList, "bottom-right");

            var home = new Home({
                view: view
            });

            view.ui.add(home, "top-left");

            var basemapToggle1 = new BasemapToggle({
                view: view,
                nextBasemap: "osm"
            });

            var basemapToggle2 = new BasemapToggle({
                view: view,
                nextBasemap: "topo"
            });

            view.ui.add([basemapToggle1, basemapToggle2], "top-right");
        });
    </script>
</body>
</html>

实现效果

在这里插入图片描述

3、样式设置

## index.css

html,
body,
#viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页