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

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