天地图 多个polygon 点击按钮后改变颜色，即对polygon数组改变颜色

改变颜色前：

改变颜色后：

如何修改？

new每一个polygon：

按钮功能：循环数组后统一修改颜色

源码，修改token：

<template>
  <div style="width: 100%; position: relative">
    <div id="mapDom">
      <div
        style="
          position: absolute;
          top: 5px;
          left: 5px;
          z-index: 1;
          display: flex;
          flex-direction: column;
        "
      >
        <el-button @click="changePolygonColor" type="primary">改变Polygon颜色</el-button>
      </div>

      <!-- 地图实例 -->
      <div id="mapView" />
    </div>
  </div>
</template>

<script>
import { loadModules } from "esri-loader";
import { showScreenLoading, hideScreenLoading } from "@/utils/loadingContent";
import { listGis } from "@/api/search/gis.js"; // 数据来源的地方

export default {
  name: "Search",
  data() {
    return {
      listGis: {},
      listGisRows: [],
      keyword: "",
      poiList: [],
      noMessage: "暂无POI列表信息",
      errorMessage: "",
      marker: null,

      polygonGraphics: [],
      markers: [],
      circleGraphic: null,
      dialogVisible: false, // 控制对话框显示
      form: {
        projectType: "", // 项目类型
        area: "", // 所属区域
        projectName: "", // 项目名称
        projectCode: "", // 项目编号
        client: "", // 委托单位
        approvalDate: "", // 批复时间
        bufferWidth: "2000", // 缓冲宽度
      },
      drawer: false,
      drawer2: false,
      mapView: null, // 存储 MapView 实例
      vectorMapUrl: require("@/assets/dashbord/one.png"),
      imageMapUrl: require("@/assets/dashbord/two.png"),
    };
  },
  mounted() {
    // 页面加载时调用_createMapView 方法初始化地图
    let promiseList = [];

    promiseList.push(this._createMapView());
    Promise.all(promiseList).then(() => {
      console.log("ok");
    });
  },

  methods: {
    /**
     * @description: 改变Polygon的颜色为红色
     * @return {*}
     */
    changePolygonColor() {
      if (this.polygonGraphics) {
        this.polygonGraphics.forEach((polygon) => {
          polygon.symbol = {
            type: "simple-fill", // 简单填充符号
            color: [255, 0, 0, 0.6], // 红色填充，透明度 0.6
            outline: {
              color: [0, 0, 0], // 边界颜色
              width: 1,
            },
          };
        });
      }
    },

    /**
     * @description: 初始化地图
     * @return {*}
     */
    async _createMapView() {
      showScreenLoading({ text: "地图加载中..." });
      const [
        Map,
        GraphicsLayer,
        Legend,
        Expand,
        Sketch,
        WebTileLayer,
        TileInfo,
        MapView,
        SpatialReference,
        Point,
        ScaleBar,
        Zoom,
        BasemapToggle,
        Compass,
      ] = await loadModules(
        [
          "esri/Map",
          "esri/layers/GraphicsLayer",
          "esri/widgets/Legend",
          "esri/widgets/Expand",
          "esri/widgets/Sketch",
          "esri/layers/WebTileLayer",
          "esri/layers/support/TileInfo",
          "esri/views/MapView",
          "esri/geometry/SpatialReference",
          "esri/geometry/Point",
          "esri/widgets/ScaleBar",
          "esri/widgets/Zoom",
          "esri/widgets/BasemapToggle",
          "esri/widgets/Compass",
          "esri/config",
        ],

        {
          url:
            "http://220.248.94.61:1008/arcgis_js_v425_api/arcgis_js_api/javascript/4.25/init.js",
          css:
            "http://220.248.94.61:1008/arcgis_js_v425_api/arcgis_js_api/javascript/4.25/esri/css/main.css",
        }
      );

      // =================================创建mapView start==========================
      // 设置天地图配置（影像地图和矢量地图）

      const tiandituInfo = {
        tianDiTuBaseUrl: "http://{subDomain}.tianditu.com", // 天地图服务地址
        token: "*******", // 天地图token，在官网申请
        TileInfoMsg: {
          rows: 256,
          cols: 256,
          compressionQuality: 0,
          origin: {
            x: -180,
            y: 90,
          },
          spatialReference: {
            wkid: 4490,
          },
          lods: [
            { level: "1", scale: 295829355.45, resolution: 0.703125 },
            { level: "2", scale: 147914677.725, resolution: 0.3515625 },
            { level: "3", scale: 73957338.8625, resolution: 0.17578125 },
            { level: "4", scale: 36978669.43125, resolution: 0.087890625 },
            { level: "5", scale: 18489334.715625, resolution: 0.0439453125 },
            { level: "6", scale: 9244667.3578125, resolution: 0.02197265625 },
            { level: "7", scale: 4622333.67890625, resolution: 0.010986328125 },
            { level: "8", scale: 2311166.839453125, resolution: 0.0054931640625 },
            { level: "9", scale: 1155583.4197265625, resolution: 0.00274658203125 },
            { level: "10", scale: 577791.7098632812, resolution: 0.001373291015625 },
            { level: "11", scale: 288895.8549316406, resolution: 0.0006866455078125 },
            { level: "12", scale: 144447.9274658203, resolution: 0.00034332275390625 },
            { level: "13", scale: 72223.96373291015, resolution: 0.000171661376953125 },
            { level: "14", scale: 36111.98186645508, resolution: 0.0000858306884765625 },
            { level: "15", scale: 18055.99093322754, resolution: 0.00004291534423828125 },
            { level: "16", scale: 9027.99546661377, resolution: 0.000021457672119140625 },
            {
              level: "17",
              scale: 4513.997733306885,
              resolution: 0.000010728836059570312,
            },
            {
              level: "18",
              scale: 2256.9988666534423,
              resolution: 0.000005364418029785156,
            },
          ],
        },
      };

      const { tianDiTuBaseUrl, token, TileInfoMsg } = tiandituInfo;
      const tileInfo = new TileInfo(TileInfoMsg);

      // 矢量地图
      const vecLayer = new WebTileLayer({
        urlTemplate:
          tianDiTuBaseUrl + "/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=" + token,
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tileInfo: tileInfo,
        spatialReference: { wkid: 4490 },
      });

      const vecLayerAnno = new WebTileLayer({
        urlTemplate:
          tianDiTuBaseUrl + "/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=" + token,
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tileInfo: tileInfo,
        spatialReference: { wkid: 4490 },
      });

      // Layer
      const layer = new GraphicsLayer({
        id: "selfSketchLayer",
      });
      await layer.load();

      // 创建地图
      const map = new Map({
        basemap: {
          thumbnailUrl: this.vectorMapUrl,
          baseLayers: [vecLayer, vecLayerAnno],
        },
        layers: [layer],
      });

      // 定位到中心，设置地图中心点
      const cityCenter = new Point(
        "121.42524531217315",
        "31.167829642058244",
        new SpatialReference({ wkid: 4490 })
      );

      // 创建地图视图
      this.mapView = new MapView({
        container: "mapView",
        map: map,
        center: cityCenter,
        zoom: 14,
      });

      // 获取项目多边形
      this.listGis = await listGis(); //获取数据

      // 动态加载Polygon模块
      const [Polygon, Graphic] = await loadModules([
        "esri/geometry/Polygon",
        "esri/Graphic",
      ]);

      // 添加GIS数据到地图图层
      this.listGis.rows.forEach((item) => {
        // 解析geometry
        const geometryData = JSON.parse(item.geometry);

        // 创建Polygon对象
        const polygon = new Polygon({
          rings: geometryData.coordinates[0],
          spatialReference: { wkid: 4490 },
        });

        // 创建Graphic对象
        const polygonGraphic = new Graphic({
          geometry: polygon,
          symbol: {
            type: "simple-fill",
            color: [51, 51, 204, 0.6], // 填充颜色
            outline: {
              color: [0, 0, 0], // 边界颜色
              width: 1,
            },
          },
          attributes: {
            title: item.title,
            leader: item.leader,
            code: item.code,
            area: item.area,
          },
          popupTemplate: {
            title: "{title}",
            content: [
              {
                type: "fields",
                fieldInfos: [
                  { fieldName: "leader", label: "负责人" },
                  { fieldName: "code", label: "项目编号" },
                  { fieldName: "area", label: "区域" },
                ],
              },
            ],
          },
        });

        // 添加Graphic到图层
        layer.add(polygonGraphic);
        this.polygonGraphics.push(polygonGraphic);
      });

      // ==============================  创建mapView end  ================
      hideScreenLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
#mapDom {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  height: calc(100vh - 86px);

  /* stylelint-disable-next-line selector-id-pattern */
  #mapView {
    flex: 1;
  }
}
</style>