天地图如何展示多边形polygon

基础展示：

源码(Normal.vue)：--不包含多边形，基础版

<template>
  <div style="width: 100vw; height: 100%; position: relative">
    <div id="mapDom">
      <!-- 地图实例 -->
      <div id="mapView" />
      <!-- 底图切换 -->
      <div id="baseMapToggle" />
      <!-- 比例尺 -->
      <div id="scaleBar" />
      <!-- 缩放 -->
      <div id="zoom" />
      <!-- 指北针 -->
      <div id="compass" />
      <!-- 图例 -->
      <div id="selfLegend" />
      <!-- Sketch -->
      <div id="selfSketch" />
      <div class="copyRight">
        ©2023 上海*****设计股份有限公司 荣誉出品
      </div>
      <div id="maskDiv" class="hide screenshotCursor" />
    </div>
  </div>
</template>

<script>
import { loadModules } from "esri-loader";
import config from "@/config/mapOptions";
import { centerPoint, tiandituInfo } from "@/config/mapConfig";
import { showScreenLoading, hideScreenLoading } from "@/utils/loadingContent";

export default {
  name: "Normal",
  data() {
    return {
      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: 初始化地图
     * @return {*}
     */
    async _createMapView() {
      showScreenLoading({ text: "地图加载中。。。" });
      const [
        Map,
        GraphicsLayer,
        Legend,
        Expand,
        Sketch,
        WebTileLayer,
        TileInfo,
        MapView,
        SpatialReference,
        Point,
        ScaleBar,
        Zoom,
        BasemapToggle,
        Compass,
        // esriConfig,

        // Print
      ] = 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",

          // "esri/widgets/Print",
        ],
        config.options
      );
      // esriConfig.fontsUrl = "http://localhost:1008/arcgisFont";
      // =================================创建mapView start==========================
      // 设置天地图配置（影像地图和矢量地图）
      const { tianDiTuBaseUrl, token, TileInfoMsg } = tiandituInfo;
      const tileInfo = new TileInfo(TileInfoMsg);
      //影像地图
      const tiledLayer = new WebTileLayer({
        urlTemplate:
          tianDiTuBaseUrl +
          "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" +
          token,
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tileInfo: tileInfo,
        spatialReference: { wkid: 4490 },
      });

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

      // 矢量地图
      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 },
      });
      const layer = new GraphicsLayer({
        id: "selfSketchLayer",
      });
      await layer.load();

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

      // 定位到中心，设置地图中心点
      const cityCenter = new Point(
        centerPoint.x,
        centerPoint.y,
        new SpatialReference({ wkid: 4490 })
      );

      // 创建地图视图
      const mapView = new MapView({
        container: "mapView",
        map: map,
        center: cityCenter,
        zoom: 10,
      });
      // 实例化底图切换控件
      const mapToggle = new BasemapToggle({
        view: mapView,
        nextBasemap: {
          // baseLayers: [vecLayer, vecLayerAnno],
          baseLayers: [tiledLayer, tiledLayerAnno],
          thumbnailUrl: this.imageMapUrl,
        },
        // nextBasemap: { baseLayers: [tiledLayer, tiledLayerAnno] },
        container: "baseMapToggle",
      });
      mapView.ui.add(mapToggle);

      // ==============================  创建mapView end  ================
      await mapView
        .when(async () => {
          this.$store.commit("map/CHANGE_MAP_VIEW", mapView);
          // 去除控件UI
          mapView.ui.components = [];
          // 实例化比例尺
          const mapScaleBar = new ScaleBar({
            view: mapView,
            container: "scaleBar",
            unit: "metric",
          });
          mapView.ui.add(mapScaleBar);
          // 实例化比例尺
          const mapSketch = new Sketch({
            layer: layer,
            view: mapView,
            creationMode: "update",
            container: "selfSketch",
            availableCreateTools: ["point", "polygon", "rectangle", "circle"],
          });
          mapSketch.on("create", function (event) {
            if (event.state === "complete") {
              console.log(event);
            }
          });
          mapView.ui.add(mapSketch);
          // 实例化缩放控件
          const mapZoom = new Zoom({
            container: "zoom",
            view: mapView,
          });
          mapView.ui.add(mapZoom);

          const mapCompass = new Compass({
            container: "compass",
            view: mapView,
          });
          mapView.ui.add(mapCompass);

          const legend = new Expand({
            content: new Legend({
              view: mapView,
              // style: "card",
            }),
            view: mapView,
            expanded: false,
            container: "selfLegend",
          });
          // const legend = new Legend({
          //   view: mapView,
          //   container: "selfLegend",
          //   // layerInfos: [
          //   //   {
          //   //     layer: featureLayer,
          //   //     title: "Legend",
          //   //   },
          //   // ],
          // });
          mapView.ui.add(legend, "bottom-right");
          // const print = new Print({
          //   view: mapView,
          //   // specify your own print service
          //   printServiceUrl:
          //     "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
          // });

          // // Add widget to the top right corner of the view
          // mapView.ui.add(print, "top-right");
        })
        .then(async () => {
          hideScreenLoading();
          //弹框自定义操作
          mapView.popup.viewModel.on("trigger-action", async (event) => {
            await triggerAction.call(this, event);
          });
        });
    },
  },
};
</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;
  }

  /* stylelint-disable-next-line selector-id-pattern */
  #baseMapToggle {
    position: absolute;
    right: 30px;
    top: 109px;
    transform: scale(0.44);
    border: 2px solid #fff;
  }

  /* stylelint-disable-next-line selector-id-pattern */
  #scaleBar {
    position: absolute;
    bottom: 15px;
    right: 60px;
  }

  /* stylelint-disable-next-line selector-id-pattern */
  #mapTools {
    position: absolute;
    top: 0px;
    right: 0px;
  }

  #zoom {
    position: absolute;
    right: 48px;
    top: 50px;
    transform: scale(0.9);
  }

  #compass {
    position: absolute;
    right: 48px;
    top: 180px;
  }
  #selfLegend {
    position: absolute;
    right: 47px;
    bottom: 30px;
  }
  #selfSketch {
    position: absolute;
    left: 630px;
    bottom: 15px;
    transform: translateX(-50%);
  }

  #currentComponent {
    position: absolute;
  }
  #maskDiv {
    position: absolute;
    background: rgba(255, 51, 0, 0.1);
    border: 2px dashed rgb(255, 51, 0);
  }
  .hide {
    display: none;
  }
  .screenshotCursor {
    cursor: crosshair;
  }
}
.copyRight {
  position: absolute;
  bottom: 5px;
  left: 60%;
  transform: translateX(-50%);
  color: #fff;
  font-weight: 500;
  font-size: 15px;
}
</style>

以下展示多边形polygon：

数据库：

天地图代码结构：

最外层 MapView 地图视图：

地图： Map地图包含： 地图样式， 图层Layer

图层Layer：

Graphic ： 包含 多边形Polygon+ 弹出框

引入 接口数据 以及 调用 polygon模块：

多边形最后放在layer中进行添加：

代码：

  // 地图点击事件监听器
      this.mapView.on("click", (event) => {
        const latitude = event.mapPoint.latitude;
        const longitude = event.mapPoint.longitude;
        console.log("Clicked location - Latitude:", latitude, "Longitude:", longitude);

        // 你可以在这里执行其他操作，比如显示在界面上或将坐标存储在变量中
      });

      let resListGis = await listGis();

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

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

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

        // 创建Graphic对象
        const graphic = new Graphic({
          geometry: polygon,
          symbol: {
            type: "simple-fill",
            color: [51, 51, 204, 0.6], // 填充颜色
            outline: {
              color: [0, 0, 0], // 边界颜色
              width: 2,
            },
          },
          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(graphic);
      });

      ///end

如果出现点击无法弹出框，就隐藏比例尺 ：

打印经纬度： 经温度在 地图视图MapView中进行触发：

点击按钮 修改中心点位置：

data中设置 mapView初始值：

凡是出现mapView的地方都是用this.mapView：

添加按钮：

方法：

最终展示：