测试

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",

src/utils/index.js

@@ -144,4 +144,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;
+}
 

src/views/modules/visual/test/l7.vue

@@ -0,0 +1,480 @@
+<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,
+} from "@antv/l7";
+import { GaodeMap, Map } from "@antv/l7-maps";
+import { DrawEvent, DrawPolygon } from "@antv/l7-draw";
+import { spliceIntoChunks } from "@/utils/index";
+
+let scene;
+
+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",
+        map: new GaodeMap({
+          pitch: 45,
+          style: "dark",
+          //   style: "light",
+          center: [srcMapData.longitude, srcMapData.latitude],
+          //   token: "xxxx - token",
+          zoom: 18,
+          minZoom: 10,
+        }),
+      });
+
+      scene.on("loaded", () => {
+        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(14)
+          .style({
+            offsets: [0, 10], // 文本相对锚点的偏移量 [水平, 垂直]
+            // 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, 45], // 文本相对锚点的偏移量 [水平, 垂直]
+            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",
+        });
+      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>