SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Add Multiple Polygons to FeatureLayer</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.24/"></script>
  <style>
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/tasks/support/FeatureSet",
      "esri/geometry/Polygon"
    ], function (Map, MapView, FeatureLayer, FeatureSet, Polygon) {

      // 创建地图
      const map = new Map({
        basemap: "streets"
      });

      // 创建地图视图
      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 10,
        center: [-122.4194, 37.7749]
      });

      // 创建要素集合
      const featureCollection = {
        featureSet: {
          features: [],
          geometryType: "polygon"
        },
        layerDefinition: {
          geometryType: "esriGeometryPolygon",
          fields: []
        }
      };

      // 创建 FeatureLayer
      const featureLayer = new FeatureLayer({
        source: featureCollection,
        objectIdField: "ObjectID",
        renderer: {
          type: "simple",
          symbol: {
            type: "simple-fill",
            color: "blue",
            outline: {
              color: [255, 255, 255, 0.5],
              width: 1
            }
          }
        }
      });

      // 将 FeatureLayer 添加到地图中
      map.add(featureLayer);

      // 创建多个多边形要素并添加到要素集合中
      const polygon1 = {
        geometry: new Polygon({
          rings: [
            [
              [-122.45, 37.8], // 多边形1的坐标点1
              [-122.45, 37.9], // 多边形1的坐标点2
              [-122.35, 37.9], // 多边形1的坐标点3
              [-122.35, 37.8], // 多边形1的坐标点4
              [-122.45, 37.8]  // 多边形1的坐标点5(闭合)
            ]
          ]
        })
      };

      const polygon2 = {
        geometry: new Polygon({
          rings: [
            [
              [-122.4, 37.7],  // 多边形2的坐标点1
              [-122.4, 37.8],  // 多边形2的坐标点2
              [-122.3, 37.8],  // 多边形2的坐标点3
              [-122.3, 37.7],  // 多边形2的坐标点4
              [-122.4, 37.7]   // 多边形2的坐标点5(闭合)
            ]
          ]
        })
      };

      featureCollection.featureSet.features.push(polygon1, polygon2);

      // 更新要素集合的 extent
      featureCollection.featureSet.extent = featureLayer.fullExtent;

      // 刷新 FeatureLayer,使新添加的多边形图形显示在地图上
      featureLayer.refresh();

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>