Merge branch 'dev-l7'

3 years ago · 7a93729dda
12 changed files with 2186 additions and 833 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,9 @@
    "et:list": "gulp themes"
  },
  "dependencies": {
+    "@antv/l7": "^2.9.14",
+    "@antv/l7-draw": "^3.0.5",
+    "@antv/l7-maps": "^2.9.14",
    "@riophae/vue-treeselect": "^0.4.0",
    "@tinymce/tinymce-vue": "^3.2.8",
    "async-validator": "^4.2.5",
--- a/src/assets/img/shuju/grid/pos-green.png
+++ b/src/assets/img/shuju/grid/pos-green.png
--- a/src/assets/img/shuju/grid/pos-green2.png
+++ b/src/assets/img/shuju/grid/pos-green2.png
--- a/src/assets/img/shuju/grid/pos-red.png
+++ b/src/assets/img/shuju/grid/pos-red.png
--- a/src/assets/img/shuju/grid/pos-red2.png
+++ b/src/assets/img/shuju/grid/pos-red2.png
--- a/src/assets/img/shuju/grid/pos-yellow.png
+++ b/src/assets/img/shuju/grid/pos-yellow.png
--- a/src/assets/img/shuju/grid/pos-yellow2.png
+++ b/src/assets/img/shuju/grid/pos-yellow2.png
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -145,4 +145,13 @@ export function computedCard(idCard) {
    sex = '1';
  return  {age , sex, birth}
 }
+// 将数组分成小块数组的集合
+export function spliceIntoChunks(arr, chunkSize) {
+  const res = [];
+  while (arr.length > 0) {
+      const chunk = arr.splice(0, chunkSize);
+      res.push(chunk);
+  }
+  return res;
+}

--- a/src/views/modules/visual/basicinfo/basicInfoMain-备份.vue
+++ b/src/views/modules/visual/basicinfo/basicInfoMain-备份.vue
--- a/src/views/modules/visual/basicinfo/basicInfoMain.vue
+++ b/src/views/modules/visual/basicinfo/basicInfoMain.vue
--- a/src/views/modules/visual/basicinfo/cpts/grid-map.vue
+++ b/src/views/modules/visual/basicinfo/cpts/grid-map.vue
@ -0,0 +1,371 @@
+<template>
+  <div class="m-map">
+    <div id="map"></div>
+    <div
+      class="btn"
+      v-if="mapStyleType == 'light'"
+      @click="shiftMapStyle('dark')"
+    >
+      切换深色模式
+    </div>
+    <div class="btn" v-else @click="shiftMapStyle('light')">切换浅色模式</div>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import cptCard from "@/views/modules/visual/cpts/card";
+import cptTb from "@/views/modules/visual/cpts/tb";
+import nextTick from "dai-js/tools/nextTick";
+import { Scene, PolygonLayer, LineLayer } from "@antv/l7";
+import { GaodeMap, Map } from "@antv/l7-maps";
+import { spliceIntoChunks } from "@/utils/index";
+
+let scene;
+let polygonLayer;
+let lineLayer;
+let textLayer;
+let posLayer;
+let circleLayer;
+
+export default {
+  name: "l7",
+  inject: ["refresh"],
+
+  data() {
+    return {
+      mapStyleType: localStorage.getItem("mapStyle") || "dark",
+      //   srcGridData: {},
+      darkStyle: {
+        style: "amap://styles/blue",
+        polygonColor: [
+          "rgba(255, 100, 60, 0.5)",
+          "rgba(43, 231, 253, 0.35)",
+          "rgba(255, 255, 50, 0.35)",
+        ],
+        lineColor: [
+          "rgba(255, 180, 150, 0.9)",
+          "rgba(43, 231, 253, 0.7)",
+          "rgba(255, 255, 50, 0.7)",
+        ],
+        circleColor: [
+          "rgba(255, 180, 150, 0.99)",
+          "rgba(43, 231, 253, 0.99)",
+          "rgba(255, 255, 50, 0.99)",
+        ],
+        textColor: [
+          "rgba(255, 100, 60, 0.99)",
+          "rgba(43, 231, 253, 0.99)",
+          "rgba(255, 255, 50, 0.99)",
+        ],
+        textStrokeColor: "#fff",
+      },
+
+      lightStyle: {
+        style: "amap://styles/whitesmoke",
+        polygonColor: [
+          "rgba(255, 100, 60, 0.3)",
+          "rgba(43, 231, 253, 0.3)",
+          "rgba(255, 255, 50, 0.3)",
+        ],
+        lineColor: [
+          "rgba(220, 150, 120, 0.9)",
+          "rgba(33, 201, 223, 0.8)",
+          "rgba(200, 200, 50, 0.9)",
+        ],
+        circleColor: [
+          "rgba(255, 180, 150, 0.99)",
+          "rgba(13, 181, 203, 0.8)",
+          "rgba(255, 255, 50, 0.99)",
+        ],
+        textColor: [
+          "rgba(200, 50, 10, 0.99)",
+          "rgba(0, 130, 153, 0.99)",
+          "rgba(120, 120, 0, 0.99)",
+        ],
+        textStrokeColor: "#666",
+      },
+    };
+  },
+
+  props: {
+    srcGridData: {
+      type: Object,
+      default: null,
+    },
+  },
+
+  computed: {},
+
+  components: {
+    cptCard,
+    cptTb,
+  },
+
+  watch: {},
+
+  async mounted() {
+    // 临时这么用吧
+    window._AMapSecurityConfig = {
+      securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
+    };
+
+    // await this.getMapData();
+    this.iniMap();
+  },
+
+  computed: {
+    polygonData() {
+      const { srcGridData } = this;
+      if (
+        !srcGridData ||
+        !srcGridData.children ||
+        !Array.isArray(srcGridData.children)
+      ) {
+        return { type: "FeatureCollection", features: [] };
+      }
+      const polygon = [
+        ...srcGridData.children
+          .filter((item) => item.coordinates.length > 0)
+          .map((item) => ({
+            type: "Feature",
+            properties: {
+              //   id: item.id,
+              //   name: item.name,
+              //   level: item.level,
+              center: [item.longitude, item.latitude],
+              ...item,
+            },
+            geometry: {
+              type: "Polygon",
+              coordinates: [
+                spliceIntoChunks(
+                  item.coordinates.split(",").map((item) => parseFloat(item)),
+                  2
+                ).filter((item) => item.length == 2),
+              ],
+            },
+          })),
+      ];
+      return { type: "FeatureCollection", features: polygon };
+    },
+  },
+
+  watch: {
+    srcGridData(val, oldValue) {
+      if (oldValue == null) {
+        this.iniMap();
+      } else {
+        this.updateMap();
+      }
+    },
+  },
+
+  methods: {
+    iniMap() {
+      const { darkStyle, lightStyle, srcGridData, polygonData } = this;
+      if (!srcGridData) return false;
+
+      let styleConfig = darkStyle;
+      if (this.mapStyleType == "light") {
+        styleConfig = lightStyle;
+      }
+
+      console.log("地图初始化数据", polygonData);
+
+      scene = new Scene({
+        id: "map",
+        logoVisible: false,
+        map: new GaodeMap({
+          pitch: 60,
+          style: styleConfig.style,
+          center: [
+            srcGridData.longitude || this.$store.state.user.longitude,
+            srcGridData.latitude || this.$store.state.user.latitude,
+          ],
+          token: "fc14b42e0ca18387866d68ebd4f150c1",
+          zoom: 18,
+          minZoom: 10,
+          isHotspot: false,
+          resizeEnable: true,
+          doubleClickZoom: false,
+        }),
+      });
+
+      scene.on("loaded", () => {
+        polygonLayer = new PolygonLayer({
+          autoFit: true,
+        })
+          // .size(0)
+          .source(polygonData)
+          .color("name", styleConfig.polygonColor)
+          //   .shape("extrude")
+          .shape("fill")
+          .style({
+            opacityLinear: {
+              enable: true, // true - false
+              dir: "out", // in - out
+            },
+            opacity: 1,
+            // heightfixed: true,
+            // pickLight: true,
+            raisingHeight: 0,
+            // sourceColor: "#333",
+            // targetColor: "rgba(255,255,255, 0.5)",
+          });
+
+        scene.addLayer(polygonLayer);
+
+        lineLayer = new LineLayer({
+          zIndex: 2,
+          name: "line2",
+        })
+          .source(polygonData)
+          .shape("line")
+          .size(1)
+          .color("name", styleConfig.lineColor)
+          .style({
+            opacity: 1,
+          })
+          .animate({
+            interval: 1, // 间隔
+            duration: 2, // 持续时间，延时
+            trailLength: 2, // 流线长度
+          });
+        scene.addLayer(lineLayer);
+
+        circleLayer = new PolygonLayer({
+          zIndex: 3,
+        })
+          .source(polygonData)
+          .color("name", styleConfig.circleColor)
+          .shape("circle")
+          .active(true)
+          .animate(true)
+          .size(50)
+          .style({
+            offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直]
+            opacity: 1,
+          });
+        scene.addLayer(circleLayer);
+
+        scene.addImage(
+          "pos-red",
+          require("@/assets/img/shuju/grid/pos-red.png")
+        );
+        scene.addImage(
+          "pos-green",
+          require("@/assets/img/shuju/grid/pos-green.png")
+        );
+        scene.addImage(
+          "pos-yellow",
+          require("@/assets/img/shuju/grid/pos-yellow.png")
+        );
+        posLayer = new PolygonLayer({
+          zIndex: 4,
+        })
+          .source(polygonData)
+          .shape("name", ["pos-red", "pos-green", "pos-yellow"])
+          .size(12)
+          .style({
+            offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直]
+            // rotation: 60,
+            layerType: "fillImage",
+          });
+        scene.addLayer(posLayer);
+
+        textLayer = new PolygonLayer({
+          zIndex: 20,
+        })
+          .source(polygonData)
+          .color("name", styleConfig.textColor)
+          .shape("name", "text")
+          .size(16)
+          .style({
+            textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+            textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
+            spacing: 2, // 字符间距
+            padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+            stroke: styleConfig.textStrokeColor, // 描边颜色
+            strokeWidth: 0.1, // 描边宽度
+            strokeOpacity: 0.8,
+            textAllowOverlap: true,
+          })
+          .active(true);
+        scene.addLayer(textLayer);
+
+        polygonLayer.on("mousemove", (e) => {
+          polygonLayer.style({
+            raisingHeight: 0,
+          });
+        });
+
+        polygonLayer.on("click", (e) => {
+          console.log(e.feature.properties);
+          this.$emit("clickAgency", e.feature.properties);
+        });
+
+        polygonLayer.on("unmousemove", (e) => {
+          polygonLayer.style({
+            raisingHeight: 0,
+          });
+        });
+      });
+    },
+
+    shiftMapStyle(type) {
+      this.mapStyleType = type;
+      localStorage.setItem("mapStyle", type);
+      this.refresh();
+    },
+
+    updateMap() {
+      const { polygonData } = this;
+      if (polygonLayer) {
+        polygonLayer.setData(polygonData);
+        lineLayer.setData(polygonData);
+        textLayer.setData(polygonData);
+        posLayer.setData(polygonData);
+        circleLayer.setData(polygonData);
+      }
+    },
+
+    async getMapData() {
+      const { data, code, msg } = await requestPost("/gov/org/agency/maporg", {
+        level: "",
+        orgId: "",
+      });
+      if (msg === "success" && code === 0) {
+        this.srcGridData = data;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.m-map {
+  position: relative;
+  height: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+
+  #app {
+    width: 100%;
+    height: 100%;
+  }
+  .btn {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100px;
+    line-height: 36px;
+    height: 36px;
+    text-align: center;
+    color: #ffffff;
+    font-size: 14px;
+    background-color: rgba(#000, 0.2);
+    cursor: pointer;
+  }
+}
+</style>
--- a/src/views/modules/visual/test/l7.vue
+++ b/src/views/modules/visual/test/l7.vue
@ -0,0 +1,547 @@
+<template>
+  <div class="g-cnt">
+    <cpt-card isFullScreen>
+      <div class="m-map">
+        <div id="map"></div>
+      </div>
+    </cpt-card>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import cptCard from "@/views/modules/visual/cpts/card";
+import cptTb from "@/views/modules/visual/cpts/tb";
+import nextTick from "dai-js/tools/nextTick";
+import dateFormat from "dai-js/tools/dateFormat";
+import {
+  Scene,
+  PointLayer,
+  PolygonLayer,
+  LineLayer,
+  CityBuildingLayer,
+  RasterLayer,
+  Popup,
+} from "@antv/l7";
+import { GaodeMap, Map } from "@antv/l7-maps";
+// import { DrawEvent, DrawPolygon } from "@antv/l7-draw";
+import { spliceIntoChunks } from "@/utils/index";
+
+let scene;
+// window._AMapSecurityConfig = {
+//   securityJsCode: "您申请的安全密钥",
+// };
+
+export default {
+  name: "l7",
+  data() {
+    return {
+      srcMapData: [],
+      dotData: [],
+      iconUrlArray: {
+        anzhibangjiao: require("@/assets/img/shuju/fiveLayer/anzhibangjiao.png"),
+        buliangqingshaonian: require("@/assets/img/shuju/fiveLayer/buliangqingshaonian.png"),
+        shequjiaozheng: require("@/assets/img/shuju/fiveLayer/shequjiaozheng.png"),
+        resi_xfry: require("@/assets/img/shuju/fiveLayer/resi_xfry.png"),
+        xidurenyuan: require("@/assets/img/shuju/fiveLayer/xidurenyuan.png"),
+        xiejiaorenyuan: require("@/assets/img/shuju/fiveLayer/xiejiaorenyuan.png"),
+        zhaoshizhaohuojingshenbing: require("@/assets/img/shuju/fiveLayer/zhaoshizhaohuojingshenbing.png"),
+
+        yjdw: require("@/assets/img/shuju/fiveLayer/yjdw.png"),
+        sr_gy: require("@/assets/img/shuju/fiveLayer/sr_gy.png"),
+        sr_gc: require("@/assets/img/shuju/fiveLayer/sr_gc.png"),
+        whdw: require("@/assets/img/shuju/fiveLayer/whdw.png"),
+        sr_ggld: require("@/assets/img/shuju/fiveLayer/sr_ggld.png"),
+        lwh: require("@/assets/img/shuju/fiveLayer/lwh.png"),
+        sr_tyc: require("@/assets/img/shuju/fiveLayer/sr_tyc.png"),
+        lyjlb: require("@/assets/img/shuju/fiveLayer/lyjlb.png"),
+        sr_yjy: require("@/assets/img/shuju/fiveLayer/sr_yjy.png"),
+        zaxld: require("@/assets/img/shuju/fiveLayer/zaxld.png"),
+        other: require("@/assets/img/shuju/fiveLayer/other.png"),
+        sr_jzz: require("@/assets/img/shuju/fiveLayer/sr_jzz.png"),
+        sr_djc: require("@/assets/img/shuju/fiveLayer/sr_djc.png"),
+        sr_rfqck: require("@/assets/img/shuju/fiveLayer/sr_rfqck.png"),
+        ep_lg: require("@/assets/img/shuju/fiveLayer/ep_lg.png"),
+        sr_xfz: require("@/assets/img/shuju/fiveLayer/sr_xfz.png"),
+        pu_jgzsbm: require("@/assets/img/shuju/fiveLayer/pu_jgzsbm.png"),
+        ep_qt: require("@/assets/img/shuju/fiveLayer/ep_qt.png"),
+
+        gr_czw: require("@/assets/img/shuju/fiveLayer/gr_czw.png"),
+        ep_cycs: require("@/assets/img/shuju/fiveLayer/ep_cycs.png"),
+        dc_jyz: require("@/assets/img/shuju/fiveLayer/dc_jyz.png"),
+        ep_gwylcs: require("@/assets/img/shuju/fiveLayer/ep_gwylcs.png"),
+        dc_jqz: require("@/assets/img/shuju/fiveLayer/dc_jqz.png"),
+        dc_whpdw: require("@/assets/img/shuju/fiveLayer/dc_whpdw.png"),
+        ep_wb: require("@/assets/img/shuju/fiveLayer/ep_wb.png"),
+        ep_mrxycs: require("@/assets/img/shuju/fiveLayer/ep_mrxycs.png"),
+        dc_yqhjz: require("@/assets/img/shuju/fiveLayer/dc_yqhjz.png"),
+        dc_jzgd: require("@/assets/img/shuju/fiveLayer/dc_jzgd.png"),
+        ep_scjgqy: require("@/assets/img/shuju/fiveLayer/ep_scjgqy.png"),
+
+        cm_nmsc: require("@/assets/img/shuju/fiveLayer/cm_nmsc.png"),
+        event_tdnd: require("@/assets/img/shuju/fiveLayer/event_tdnd.png"),
+        cm_bhsc: require("@/assets/img/shuju/fiveLayer/cm_bhsc.png"),
+        cm_cjsc: require("@/assets/img/shuju/fiveLayer/cm_cjsc.png"),
+        ep_lssd: require("@/assets/img/shuju/fiveLayer/ep_lssd.png"),
+
+        resi_szry: require("@/assets/img/shuju/fiveLayer/resi_szry.png"),
+        ps_lyy: require("@/assets/img/shuju/fiveLayer/ps_lyy.png"),
+        resi_snry: require("@/assets/img/shuju/fiveLayer/resi_snry.png"),
+        ps_mzb: require("@/assets/img/shuju/fiveLayer/ps_mzb.png"),
+        ps_zs: require("@/assets/img/shuju/fiveLayer/ps_zs.png"),
+        ps_wss: require("@/assets/img/shuju/fiveLayer/ps_wss.png"),
+        ps_jjz: require("@/assets/img/shuju/fiveLayer/ps_jjz.png"),
+        ep_xx: require("@/assets/img/shuju/fiveLayer/ep_xx.png"),
+        ep_yy: require("@/assets/img/shuju/fiveLayer/ep_yy.png"),
+      },
+    };
+  },
+
+  props: {},
+
+  computed: {},
+
+  components: {
+    cptCard,
+    cptTb,
+  },
+
+  watch: {},
+
+  async mounted() {
+    await this.getMapData();
+    this.iniMap();
+    await this.getDotData();
+    this.updateMap();
+  },
+
+  methods: {
+    iniMap() {
+      const { srcMapData } = this;
+      scene = new Scene({
+        id: "map",
+        logoVisible: false,
+        map: new GaodeMap({
+          // viewMode: "3D",
+          pitch: 35.210526315789465,
+        //   style: "dark",
+            style: "light",
+          center: [srcMapData.longitude, srcMapData.latitude],
+        //   token: "77e4e81967f342b3e7b81ad1d0411224",
+          zoom: 18,
+          minZoom: 10,
+        }),
+      });
+
+      //   scene = new Scene({
+      //     id: "map",
+      //     map: new Map({
+      //       pitch: 35.210526315789465,
+      //       style: "dark",
+      //       //   style: "light",
+      //       center: [srcMapData.longitude, srcMapData.latitude],
+      //       //   token: "xxxx - token",
+      //       zoom: 18,
+      //       minZoom: 10,
+      //     }),
+      //   });
+
+      scene.on("loaded", () => {
+        // 底图服务
+        // const baseLayer = new RasterLayer({
+        //   zIndex: 1,
+        // });
+        // baseLayer.source(
+        //   "https://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd",
+        //   {
+        //     parser: {
+        //       type: "rasterTile",
+        //       tileSize: 256,
+        //       // minZoom: 6,
+        //       // maxZoom: 15,
+        //       zoomOffset: 0,
+        //     },
+        //   }
+        // );
+
+        // // 注记服务
+        // const annotionLayer = new RasterLayer({
+        //   zIndex: 2,
+        // });
+        // annotionLayer.source(
+        //   "https://t1.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd",
+        //   {
+        //     parser: {
+        //       type: "rasterTile",
+        //       tileSize: 256,
+        //       // minZoom: 6,
+        //       // maxZoom: 15,
+        //       zoomOffset: 0,
+        //     },
+        //   }
+        // );
+
+        // scene.addLayer(baseLayer);
+        // scene.addLayer(annotionLayer);
+
+        const polygon = [
+          ...srcMapData.children
+            .filter((item) => item.coordinates.length > 0)
+            .map((item) => ({
+              type: "Feature",
+              properties: {
+                name: item.name,
+                center: [item.longitude, item.latitude],
+              },
+              geometry: {
+                type: "Polygon",
+                coordinates: [
+                  spliceIntoChunks(
+                    item.coordinates.split(",").map((item) => parseFloat(item)),
+                    2
+                  ),
+                ],
+              },
+            })),
+        ];
+        console.log(polygon);
+
+        const polygonLayer = new PolygonLayer({
+          autoFit: true,
+        })
+          //   .size(1000)
+          .source({ type: "FeatureCollection", features: polygon })
+          .color("name", [
+            "rgba(255, 100, 60, 0.5)",
+            "rgba(43, 231, 253, 0.35)",
+            "rgba(255, 255, 50, 0.35)",
+          ])
+          //   .shape("extrude")
+          .shape("fill")
+          .style({
+            opacityLinear: {
+              enable: true, // true - false
+              dir: "out", // in - out
+            },
+            opacity: 1,
+            // heightfixed: true,
+            // pickLight: true,
+            // raisingHeight: 1000,
+            // sourceColor: "#333",
+            // targetColor: "rgba(255,255,255, 0.5)",
+          });
+
+        scene.addLayer(polygonLayer);
+
+        const linelayer = new LineLayer({
+          zIndex: 2,
+          name: "line2",
+        })
+          .source({ type: "FeatureCollection", features: polygon })
+          .shape("line")
+          .size(1)
+          .color("name", [
+            "rgba(255, 50, 50, 0.7)",
+            "rgba(43, 231, 253, 0.7)",
+            "rgba(255, 255, 50, 0.7)",
+          ])
+          .style({
+            opacity: 1,
+          })
+          .animate({
+            interval: 1, // 间隔
+            duration: 2, // 持续时间，延时
+            trailLength: 2, // 流线长度
+          });
+        scene.addLayer(linelayer);
+
+        const circleLayer = new PolygonLayer({
+          zIndex: 3,
+        })
+          .source({ type: "FeatureCollection", features: polygon })
+          .color("name", [
+            "rgba(255, 50, 50, 0.99)",
+            "rgba(43, 231, 253, 0.99)",
+            "rgba(255, 255, 50, 0.99)",
+          ])
+          .shape("circle")
+          .active(true)
+          .animate(true)
+          .size(50)
+          .style({
+            offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直]
+            opacity: 1,
+          });
+        scene.addLayer(circleLayer);
+
+        scene.addImage(
+          "pos-red",
+          require("@/assets/img/shuju/grid/pos-red.png")
+        );
+        scene.addImage(
+          "pos-green",
+          require("@/assets/img/shuju/grid/pos-green.png")
+        );
+        scene.addImage(
+          "pos-yellow",
+          require("@/assets/img/shuju/grid/pos-yellow.png")
+        );
+        const posLayer = new PolygonLayer({
+          zIndex: 4,
+        })
+          .source({ type: "FeatureCollection", features: polygon })
+          .shape("name", ["pos-red", "pos-green", "pos-yellow"])
+          .size(12)
+          .style({
+            offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直]
+            // rotation: 60,
+            layerType: "fillImage",
+          });
+        scene.addLayer(posLayer);
+
+        const textLayer = new PolygonLayer({
+          zIndex: 10,
+        })
+          .source({ type: "FeatureCollection", features: polygon })
+          .color("name", [
+            "rgba(255, 100, 60, 0.99)",
+            "rgba(43, 231, 253, 0.99)",
+            "rgba(255, 255, 50, 0.99)",
+          ])
+          .shape("name", "text")
+          .size(16)
+          .style({
+            textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+            textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
+            spacing: 2, // 字符间距
+            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+            stroke: "#ffffff", // 描边颜色
+            strokeWidth: 0.3, // 描边宽度
+            strokeOpacity: 1.0,
+          })
+          .active(true);
+        scene.addLayer(textLayer);
+
+        textLayer.on("mousemove", (e) => {
+          textLayer.style({
+            raisingHeight: 0,
+          });
+        });
+
+        textLayer.on("click", (e) => {
+          console.log(e.feature.properties.name);
+        });
+
+        textLayer.on("unmousemove", (e) => {
+          polygonLayer.style({
+            raisingHeight: 0,
+          });
+        });
+
+        fetch(
+          "https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json"
+        ).then(async (res) => {
+          const pointLayer = new CityBuildingLayer({
+            autoFit: true,
+          });
+          pointLayer
+            .source(await res.json())
+            .size("floor", [0, 500])
+            .color("rgba(242,246,250,1.0)")
+            .animate({
+              enable: true,
+            })
+            .active({
+              color: "#0ff",
+              mix: 0.5,
+            })
+            .style({
+              opacity: 0.7,
+              baseColor: "rgb(16, 16, 16)",
+              windowColor: "rgb(30, 60, 89)",
+              brightColor: "rgb(255, 176, 38)",
+              sweep: {
+                enable: true,
+                sweepRadius: 2,
+                sweepColor: "#1990FF",
+                sweepSpeed: 0.5,
+                sweepCenter: [120.145319, 30.238915],
+              },
+            });
+          //   scene.addLayer(pointLayer);
+        });
+
+        // const textFeatures = [
+        //   ...srcMapData.children.map((item) => ({
+        //     type: "Feature",
+        //     properties: {
+        //       name: item.name,
+        //     },
+        //     geometry: {
+        //       type: "Point",
+        //       coordinates: [item.longitude, item.latitude],
+        //     },
+        //   })),
+        // ];
+
+        // console.log(textFeatures);
+
+        // let textLayer = new PointLayer({
+        //   // autoFit: true
+        // })
+        //   .source({ type: "FeatureCollection", features: textFeatures })
+        //   .shape("name", "text")
+        //   .size(24)
+        //   .color("#0ff")
+        //   .style({
+        //     textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+        //     textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
+        //     spacing: 2, // 字符间距
+        //     padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+        //     stroke: "#ffffff", // 描边颜色
+        //     strokeWidth: 0.3, // 描边宽度
+        //     strokeOpacity: 1.0,
+        //   });
+
+        // scene.addLayer(textLayer);
+      });
+    },
+
+    updateMap() {
+      const { iconUrlArray, dotData } = this;
+      if (!dotData || dotData.length == 0) return;
+      if (!scene) return;
+
+      Object.keys(iconUrlArray).forEach((ki) => {
+        scene.addImage(ki, iconUrlArray[ki]);
+        console.log(ki);
+      });
+
+      const dotFeatures = [
+        ...dotData.map((item) => ({
+          type: "Feature",
+          properties: {
+            categoryKey: item.categoryKey,
+          },
+          geometry: {
+            type: "Point",
+            coordinates: [
+              parseFloat(item.longitude),
+              parseFloat(item.latitude),
+            ],
+          },
+        })),
+      ];
+
+      console.log(dotFeatures);
+
+      const dotLayer = new PointLayer()
+        .source({ type: "FeatureCollection", features: dotFeatures })
+        .shape("categoryKey", (categoryKey) => {
+          return categoryKey;
+        })
+        .size(8)
+        .style({
+          rotation: 0,
+          layerType: "fillImage",
+        });
+
+      dotLayer.on("mousemove", (e) => {
+        console.log(e);
+        const popup = new Popup({
+          offsets: [0, -0],
+          closeButton: false,
+        })
+          .setLnglat(e.feature.geometry.coordinates)
+          .setHTML(`<span>类型: ${e.feature.properties.categoryKey}</span>`);
+        scene.addPopup(popup);
+      });
+      scene.addLayer(dotLayer);
+    },
+
+    async getMapData() {
+      const { data, code, msg } = await requestPost("/gov/org/agency/maporg", {
+        level: "",
+        orgId: "",
+      });
+      if (msg === "success" && code === 0) {
+        this.srcMapData = data;
+      }
+    },
+
+    async getDotData() {
+      const { data, code, msg } = await requestPost(
+        "/data/aggregator/coverage/dataList",
+        {
+          coverageTypes: ["zhzl", "yjcl", "aqsc", "csgl"],
+          categoryKeys: [
+            "resi_xfry",
+            "anzhibangjiao",
+            "xiejiaorenyuan",
+            "buliangqingshaonian",
+            "shequjiaozheng",
+            "zhaoshizhaohuojingshenbing",
+            "xidurenyuan",
+            "yjdw",
+            "whdw",
+            "lwh",
+            "lyjlb",
+            "zaxld",
+            "other",
+            "ep_lg",
+            "pu_jgzsbm",
+            "sr_gy",
+            "sr_gc",
+            "sr_ggld",
+            "sr_tyc",
+            "sr_yjy",
+            "sr_jzz",
+            "sr_djc",
+            "sr_rfqck",
+            "sr_xfz",
+            "dc_jyz",
+            "dc_jqz",
+            "dc_whpdw",
+            "dc_yqhjz",
+            "dc_jzgd",
+            "ep_cycs",
+            "ep_gwylcs",
+            "ep_wb",
+            "ep_mrxycs",
+            "ep_scjgqy",
+            "ep_qt",
+            "gr_czw",
+            "cm_nmsc",
+            "cm_bhsc",
+            "cm_cjsc",
+            "ep_lssd",
+            "event_tdnd",
+          ],
+          search: "",
+          isPage: false,
+        }
+      );
+      if (msg === "success" && code === 0) {
+        this.dotData = data.list;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.g-cnt {
+  margin-top: 40px;
+}
+
+.m-map {
+  position: relative;
+  padding: 20px 0;
+  height: 100%;
+
+  #app {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>