如何在ArcGIS JS中添加图层？-酷北运营网

使用 ArcGIS API for JavaScript 添加图层

ArcGIS API for JavaScript 是一个强大的工具，用于在网页中展示地理数据，通过该 API，你可以方便地在地图上添加各种类型的图层，包括矢量图层、瓦片图层和影像图层等，本文将详细介绍如何使用 ArcGIS API for JavaScript 添加不同类型的图层，并提供一些常见问题的解答。

1. 引入 ArcGIS API for JavaScript

需要在 HTML 文件中引入 ArcGIS API for JavaScript，你可以通过 CDN 链接来引入：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ArcGIS API for JavaScript Add Layers</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>
</head>
<body>
    <div id="viewDiv"></div>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/TileLayer",
            "esri/layers/FeatureLayer"
        ], function(Map, MapView, TileLayer, FeatureLayer) {
            var map = new Map({
                basemap: "streets-navigation-vector"
            });
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [116.397, 39.907], // Longitude, Latitude
                zoom: 5
            });
            // 示例代码将在后续部分中添加
        });
    </script>
</body>
</html>

2. 添加瓦片图层（Tile Layer）

瓦片图层是最常见的图层类型之一，通常用于显示底图，以下代码演示了如何添加一个瓦片图层：

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/TileLayer"
], function(Map, MapView, TileLayer) {
    var map = new Map({
        basemap: "topo-vector"
    });
    var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [116.397, 39.907], // Longitude, Latitude
        zoom: 5
    });
    // 添加瓦片图层
    var tileLayer = new TileLayer({
        url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
    });
    map.add(tileLayer);
});

3. 添加矢量图层（Feature Layer）

矢量图层用于显示点、线、面等几何要素，以下代码演示了如何添加一个矢量图层：

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {
    var map = new Map({
        basemap: "streets-navigation-vector"
    });
    var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [116.397, 39.907], // Longitude, Latitude
        zoom: 5
    });
    // 添加矢量图层
    var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/Specialty/Soil_Survey_Area/FeatureServer/0",
        outFields: ["*"],
        popupTemplate: { // 自定义弹出窗口模板
            title: "{NAME}",
            content: "{DESCRIPTION}"
        }
    });
    map.add(featureLayer);
});

4. 添加动态图层（Dynamic Layer）

动态图层可以实时更新数据，例如实时交通信息或气象数据，以下代码演示了如何添加一个动态图层：

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/GraphicsLayer",
    "esri/Graphic"
], function(Map, MapView, GraphicsLayer, Graphic) {
    var map = new Map({
        basemap: "streets-navigation-vector"
    });
    var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [116.397, 39.907], // Longitude, Latitude
        zoom: 5
    });
    // 创建动态图层并添加图形元素
    var graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);
    var point = {
        type: "point",
        longitude: 116.397,
        latitude: 39.907,
    };
    var simpleMarkerSymbol = {
        type: "simple-marker",  // autocasts as new SimpleFillSymbol()
        color: [226, 119, 40], // orange, can be hex or rgb
        size: "12px",
        outline: { // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255], // white, can be hex or rgb or array of numbers
            width: 2
        }
    };
    var pointSymbol = {
        type: "text", // autocasts as new TextSymbol()
        text: "Sample Point",
        font: { // autocasts as new Font()
            size: 12,
            family: "sans-serif"
        },
        color: "black",
        haloColor: "white",
        haloSize: "1px",
        backgroundColor: "white"
    };
    var pointGraphic = new Graphic({
        geometry: point,
        symbol: simpleMarkerSymbol,
        textSymbol: pointSymbol,
        popupTemplate: { // autocasts as new PopupTemplate()
            title: "Sample Point",
            content: "This is a sample point."
        }
    });
    graphicsLayer.add(pointGraphic);
});

常见问题与解答

问题1：如何在地图上添加多个图层？

答：你可以在map.add 方法中多次调用不同的图层对象。

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/TileLayer",
    "esri/layers/FeatureLayer"
], function(Map, MapView, TileLayer, FeatureLayer) {
    var map = new Map({
        basemap: "topo-vector"
    });
    var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [116.397, 39.907], // Longitude, Latitude
        zoom: 5
    });
    // 添加第一个图层：瓦片图层
    var tileLayer = new TileLayer({
        url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
    });
    map.add(tileLayer);
    // 添加第二个图层：矢量图层
    var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/Specialty/Soil_Survey_Area/FeatureServer/0",
        outFields: ["*"]
    });
    map.add(featureLayer);
});

问题2：如何为图层设置透明度？

答：你可以通过图层对象的opacity 属性来设置透明度。

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/TileLayer"
], function(Map, MapView, TileLayer) {
    var map = new Map({
        basemap: "streets-navigation-vector"
    });
    var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [116.397, 39.907], // Longitude, Latitude
        zoom: 5
    });
    // 添加瓦片图层并设置透明度为0.5
    var tileLayer = new TileLayer({
        url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        opacity: 0.5 // 设置透明度为0.5（50%）
    });
    map.add(tileLayer);
});

到此，以上就是小编对于“arcgis js添加图层”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。