epmet-oper-gov/src/views/modules/visual/cpts/map/index.vue

<template>
  <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
    <div id="map"></div>
    <div
      class="btn"
      v-if="mapStyleType == 'light'"
      v-show="mapType == 'qq'"
      @click="shiftMapStyle('dark')"
    >
      切换深色模式
    </div>
    <div
      class="btn"
      v-show="mapType == 'qq'"
      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,
  RasterLayer,
  PointLayer,
} from "@antv/l7";
import { GaodeMap, Map } from "@antv/l7-maps";
import { spliceIntoChunks } from "@/utils/index";
import { mapType, searchNearby } from "@/utils/dai-map";
import tdtWp from "@/utils/tdt-wp";
import tdtWpZw from "@/utils/tdt-wp-zw";

let myMap;
let scene;
let polygonLayer;
let lineLayer;
let textLayer;
let posLayer;
let circleLayer;
let dotLayer;
let dotBgLayer;
let dotLayer2;

export default {
  name: "l7",
  inject: ["refresh"],

  data() {
    return {
      mapType,

      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: {
    pitch: {
      type: Number,
      default: 60,
    },

    srcGridData: {
      type: Object,
      default: null,
    },

    dotList: {
      type: Array,
      default: () => [],
    },

    dotIcoList: {
      type: Object,
      default: () => ({}),
    },

    dotList2: {
      type: Array,
      default: () => [],
    },

    dotIcoList2: {
      type: Object,
      default: () => ({}),
    },
  },

  computed: {},

  components: {
    cptCard,
    cptTb,
  },

  watch: {},

  async mounted() {
    // 临时这么用吧
    window._AMapSecurityConfig = {
      securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
    };

    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 };
    },

    polygonDotData() {
      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: [
                item.latitude
                  ? [[item.longitude, item.latitude]]
                  : spliceIntoChunks(
                      item.coordinates
                        .split(",")
                        .map((item) => parseFloat(item)),
                      2
                    ).filter((item) => item.length == 2),
              ],
            },
          })),
      ];
      return { type: "FeatureCollection", features: polygon };
    },

    dotData() {
      const { dotList } = this;
      return {
        type: "FeatureCollection",
        features: [
          ...dotList
            .filter((item) => item.latitude)
            .map((item) => ({
              type: "Feature",
              properties: {
                ...item,
              },
              geometry: {
                type: "Point",
                coordinates: [
                  parseFloat(item.longitude),
                  parseFloat(item.latitude),
                ],
              },
            })),
        ],
      };
    },

    dotData2() {
      const { dotList2 } = this;
      return {
        type: "FeatureCollection",
        features: [
          ...dotList2
            .filter((item) => item.latitude)
            .map((item) => ({
              type: "Feature",
              properties: {
                ...item,
              },
              geometry: {
                type: "Point",
                coordinates: [
                  parseFloat(item.longitude),
                  parseFloat(item.latitude),
                ],
              },
            })),
        ],
      };
    },
  },

  watch: {
    srcGridData(val, oldValue) {
      if (oldValue == null) {
        this.iniMap();
      } else {
        this.updateGrid();
      }
      this.zoomInABit();
    },
    dotList(val, oldValue) {
      this.updateDot();
    },
    dotList2(val, oldValue) {
      this.updateDot();
    },
  },

  methods: {
    iniMap() {
      const { darkStyle, lightStyle, srcGridData } = this;
      if (!srcGridData) return false;

      let styleConfig = darkStyle;
      if (this.mapStyleType == "light") {
        styleConfig = lightStyle;
      }

      const iniCenter = [
        srcGridData.longitude ||
          this.$store.state.user.longitude ||
          116.39743841556731,
        srcGridData.latitude ||
          this.$store.state.user.latitude ||
          39.9088810666821,
      ];

      if (mapType != "qq") {
        myMap = new Map({
          center: iniCenter,
          zoom: 18,
        });
      } else {
        myMap = new GaodeMap({
          pitch: this.pitch,
          style: styleConfig.style,
          center: iniCenter,
          token: "244bb4165c8ce4bcb4b67e56e84b3eb1",
          zoom: 18,
          isHotspot: false,
          resizeEnable: true,
          doubleClickZoom: false,
        });
      }

      scene = new Scene({
        id: "map",
        logoVisible: false,
        map: myMap,
      });

      scene.on("loaded", async () => {
        if (mapType == "td") {
          this.iniMapBase(scene);
        } else if (mapType == "tdzw") {
          this.iniMapBase2(scene);
        }

        this.iniMapGrid(scene);
        this.iniMapDot(scene);
        this.iniMapDot2(scene);
        await nextTick(0);
        this.zoomInABit();
      });
    },

    // 初始化底图
    iniMapBase(scene) {
      console.log("-----------------iniMapBase");
      // 底图服务
      const baseLayer = new RasterLayer({
        zIndex: 1,
      });
      baseLayer
        .source(
          "http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
          {
            parser: {
              type: "rasterTile",
              tileSize: 256,
              // minZoom: 6,
              // maxZoom: 15,
              zoomOffset: 0,
            },
          }
        )
        .style({
          opacity: 0.7,
        });

      // 注记服务
      const annotionLayer = new RasterLayer({
        zIndex: 2,
      });
      annotionLayer
        .source(
          "http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
          {
            parser: {
              type: "rasterTile",
              tileSize: 256,
              // minZoom: 6,
              // maxZoom: 15,
              zoomOffset: 0,
            },
          }
        )
        .style({
          opacity: 0.5,
        });

      scene.addLayer(baseLayer);
      scene.addLayer(annotionLayer);
    },

    // 初始化底图 天地图山东政务网瓦片
    iniMapBase2(scene) {
      console.log("-----------------iniMapBase");
      // 底图服务
      const baseLayer = new RasterLayer({
        zIndex: 1,
      });
      baseLayer
        .source(tdtWpZw.vec, {
          parser: {
            type: "rasterTile",
            tileSize: 256,
            zoomOffset: 0,
          },
        })
        .style({
          opacity: 0.7,
        });

      scene.addLayer(baseLayer);
    },

    iniMapGrid(scene) {
      const { darkStyle, lightStyle, polygonData, polygonDotData } = this;

      let styleConfig = darkStyle;
      if (this.mapStyleType == "light") {
        styleConfig = lightStyle;
      }

      console.log("地图初始化数据", polygonData);

      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(polygonDotData)
        .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(polygonDotData)
        .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(polygonDotData)
        .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,
        });
      });
    },

    iniMapDot(scene) {
      const { darkStyle, lightStyle, dotIcoList, dotData } = this;
      Object.keys(dotIcoList).forEach((k) => {
        scene.addImage(k, dotIcoList[k]);
      });
      dotBgLayer = new PointLayer({
        zIndex: 20,
      })
        .source(dotData)
        .shape("circle")
        .color("rgba(255,255,255,0.8)")
        .size(20)
        .style({
          strokeWidth: 3,
          strokeOpacity: 0.1,
          stroke: "#000",
        });
      scene.addLayer(dotBgLayer);

      dotLayer = new PointLayer({
        zIndex: 21,
      })
        .source(dotData)
        .shape("categoryKey", (k) => k)
        .size(10)
        .style({
          offsets: [0, 0],
          layerType: "fillImage",
        });
      scene.addLayer(dotLayer);

      dotBgLayer.on("click", (e) => {
        console.log(e.feature.properties);
        this.$emit("clickDot", e.feature.properties);
      });

      dotBgLayer.on("mousemove", (e) => {
        // console.log(e);
        if (e.feature.properties.content) {
          const popup = new Popup({
            offsets: [0, -0],
            closeButton: false,
          })
            .setLnglat(e.feature.geometry.coordinates)
            .setHTML(`<span>${e.feature.properties.content}</span>`);
          scene.addPopup(popup);
        }
      });

      dotBgLayer.on("unmousemove", (e) => {});
    },

    iniMapDot2(scene) {
      const { dotIcoList2: dotIcoList, dotData2: dotData } = this;
      Object.keys(dotIcoList).forEach((k) => {
        scene.addImage(k, dotIcoList[k]);
      });

      dotLayer2 = new PointLayer({
        zIndex: 21,
      })
        .source(dotData)
        .shape("categoryKey", (k) => k)
        .size(20)
        .style({
          offsets: [0, 0],
          layerType: "fillImage",
        });
      scene.addLayer(dotLayer2);

      dotLayer2.on("click", (e) => {
        console.log(e.feature.properties);
        this.$emit("clickDot", e.feature.properties);
      });

      dotLayer2.on("mousemove", (e) => {
        // console.log(e);
        if (e.feature.properties.content) {
          const popup = new Popup({
            offsets: [0, -0],
            closeButton: false,
          })
            .setLnglat(e.feature.geometry.coordinates)
            .setHTML(`<span>${e.feature.properties.content}</span>`);
          scene.addPopup(popup);
        }
      });

      dotLayer2.on("unmousemove", (e) => {});
    },

    // 把地图缩放等级在原来基础上大一点
    zoomInABit() {
      let current = scene.getZoom();
      scene.setZoomAndCenter(current + 0.5);
    },

    shiftMapStyle(type) {
      this.mapStyleType = type;
      localStorage.setItem("mapStyle", type);
      this.refresh();
    },

    updateMap() {
      this.updateGrid();
      this.updateDot();
      this.updateDot2();
    },

    updateGrid() {
      const { polygonData, polygonDotData } = this;
      if (polygonLayer) {
        polygonLayer.setData(polygonData);
        lineLayer.setData(polygonData);
        textLayer.setData(polygonDotData);
        posLayer.setData(polygonDotData);
        circleLayer.setData(polygonDotData);
      }
    },

    updateDot() {
      const { dotData } = this;
      if (dotLayer) {
        console.log(dotData);
        dotLayer.setData(dotData);
        dotBgLayer.setData(dotData);
      }
    },

    updateDot2() {
      const { dotData2: dotData } = this;
      if (dotLayer2) {
        console.log(dotData);
        dotLayer2.setData(dotData);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.m-map {
  position: relative;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;

  &.z-td {
    #app {
      /deep/ .l7-scene {
        canvas {
          background-color: rgba(43, 51, 73, 0.82);
          background-image: radial-gradient(
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.3),
            #000
          );
        }
        .gray {
          -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
          opacity: 0.7;
        }
      }
    }
  }

  #map {
    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>