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

如何在 ArcGIS JavaScript API 中添加图例

在 ArcGIS JavaScript API 中，为地图添加图例是一个常见的需求，图例可以帮助用户理解地图上的符号和图层信息，本文将详细介绍如何在 ArcGIS JavaScript API 中添加图例。

1. 引入必要的库

确保你已经引入了 ArcGIS JavaScript API 的必要库，你可以在 HTML 文件中通过<script> 标签引入这些库：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ArcGIS JavaScript API Add Legend</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.25/"></script>
  <style>
    html, body, #viewDiv {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="viewDiv"></div>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Legend"
    ], function(Map, MapView, FeatureLayer, Legend) {
      const map = new Map({
        basemap: "streets"
      });
      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65] // Longitude, latitude
      });
      // 添加图层
      const layer = new FeatureLayer({
        url: "https://services.arcgis.com/.../arcgis/rest/services..."
      });
      map.add(layer);
      // 创建并配置图例
      const legend = new Legend({
        view: view,
        map: map
      });
      view.ui.add(legend, "top-right");
    });
  </script>
</body>
</html>

2. 创建地图和视图

创建一个Map 实例和一个MapView 实例，并将它们关联起来，这是地图显示的基本步骤：

require([
  "esri/Map",
  "esri/views/MapView"
], function(Map, MapView) {
  const map = new Map({
    basemap: "streets"
  });
  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 4,
    center: [15, 65] // Longitude, latitude
  });
});

3. 添加图层

在地图上添加一个或多个图层，这里我们以FeatureLayer 为例：

const layer = new FeatureLayer({
  url: "https://services.arcgis.com/.../arcgis/rest/services..."
});
map.add(layer);

4. 创建并配置图例

使用esri/widgets/Legend 小部件来创建图例，然后将其添加到视图的用户界面（UI）中：

const legend = new Legend({
  view: view,
  map: map
});
view.ui.add(legend, "top-right");

常见问题与解答

问题1：如何自定义图例的样式？

解答： 你可以通过修改Legend 小部件的样式属性来自定义图例的外观，可以设置图例的背景颜色、边框等：

const legend = new Legend({
  view: view,
  map: map,
  style: {
    backgroundColor: "rgba(255, 255, 255, 0.8)",
    borderColor: "#ccc",
    borderWidth: "1px",
    borderStyle: "solid"
  }
});

问题2：如何更改图例的位置？

解答： 你可以通过调整view.ui.add 方法的第二个参数来更改图例的位置，将图例放置在底部左侧：