epmet-work-pc-chengyang/src/views/modules/visual/command/cpts/map-ol.vue

<template>
  <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
    <div id="map"></div>
    <div id="searchMap"></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>

    <cpt-popup
      ref="popup"
      @clickListItem="handleClickDotListItem"
      @operate="handleClickDotBtn"
    />
  </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 cptPopup from "@/views/modules/visual/command/cpts/popup";
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";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import { Fill, Style, Stroke } from "ol/style";
import WMTS from "ol/source/WMTS.js";
import WMTSTileGrid from "ol/tilegrid/WMTS.js";
import { get as getProjection, Projection, addProjection } from "ol/proj.js";
import proj4 from "proj4";
import { register as registerProj4 } from "ol/proj/proj4";
import { getCenter, getWidth } from "ol/extent.js";
import {
  defaults as defaultInteractions,
  Modify,
  Select,
  DoubleClickZoom,
} from "ol/interaction.js";
import VectorLayer from "ol/layer/Vector.js";
import VectorSource from "ol/source/Vector.js";
import GeoJSON from "ol/format/GeoJSON.js";
import { Polygon } from "ol/geom";
import Feature from "ol/Feature";
import { click, pointerMove } from "ol/events/condition.js";

let myMap;
let scene;
let polygonLayer;
let lineLayer;
let textLayer;
let posLayer;
let circleLayer;
let dotLayer;
let dotBgLayer;
let dotLayer2;
let countTextLayer;
let countTextBgLayer;
let searchMarker;
let searchBgLayer;
let tdtSearchMap;

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

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

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

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

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

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

  components: {
    cptCard,
    cptTb,
    cptPopup,
  },

  computed: {
    polygonData() {
      const { srcGridData } = this;
      if (
        !srcGridData ||
        !srcGridData.children ||
        !Array.isArray(srcGridData.children)
      ) {
        return [];
      }

      const polygons = [
        ...srcGridData.children
          .filter((item) => item.coordinates.length > 0)
          .map((item, index) => {
            const f = new Feature({
              type: "Polygon",
              properties: {
                //   id: item.id,
                //   name: item.name,
                //   level: item.level,
                center: [item.longitude, item.latitude],
                ...item,
              },
              geometry: new Polygon([
                spliceIntoChunks(
                  item.coordinates.split(",").map((item) => parseFloat(item)),
                  2
                ).filter((item) => item.length == 2),
              ]),
            });
            return f;
          }),
      ];
      return polygons;
    },

    polygonDotData() {
      const { srcGridData, gridCountData } = 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) => {
            let countItem = gridCountData.find(
              (item2) => item2.orgId == item.id
            );
            console.log("countItem", countItem);
            return {
              type: "Feature",
              properties: {
                ...item,
                center: [item.longitude, item.latitude],
                dotCount: countItem
                  ? countItem.categoryName + "：" + countItem.total
                  : "",
              },
              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();
    },
    gridCountData() {
      this.updateGridCount();
    },
    dotData(val, oldValue) {
      this.updateDot();
    },
    dotData2(val, oldValue) {
      this.updateDot2();
    },
  },

  async mounted() {
    console.log("指挥调度map初始化啦");
    // 临时这么用吧
    window._AMapSecurityConfig = {
      securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
    };

    this.iniMap();

    // 为了避免刷新残留
    searchMarker = null;
    searchBgLayer = null;
  },

  methods: {
    async 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,
      ];

      proj4.defs(
        "EPSG:4490",
        'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]'
      );
      registerProj4(proj4);
      //重写projection4490，
      var projection = new Projection({
        code: "EPSG:4490",
        units: "degrees",
        axisOrientation: "neu",
      });
      projection.setExtent([-180, -90, 180, 90]);
      projection.setWorldExtent([-180, -90, 180, 90]);
      addProjection(projection);

      let projectionExtent = projection.getExtent();
      let size = getWidth(projectionExtent) / 256; //size就是一个像素代表的经纬度
      let matrixIds = [];

      function getResolutions() {
        let resolutions = [];
        for (let z = 7; z < 19; ++z) {
          resolutions[z] = size / Math.pow(2, z);
          matrixIds[z] = z;
        }
        return resolutions;
      }

      const resolutions = getResolutions();

      console.log("========= getProjection", getProjection("EPSG:4490"));

      let url = "http://59.206.203.34/tileservice/SDPubMap";
      if (window.SITE_CONFIG["nodeEnv"] == "dev_sdtdt") {
        url =
          "http://service.sdmap.gov.cn/tileservice/sdpubmap?tk=e758167d5b90c351b70a979c0820840c";
      }

      const baseMapLayer = new TileLayer({
        title: "地图",
        source: new WMTS({
          url,
          layer: "sdvec",
          matrixSet: "c",
          format: "image/png",
          projection: getProjection("EPSG:4490"),
          tileGrid: new WMTSTileGrid({
            origin: [-180, 90],
            resolutions,
            matrixIds,
          }),
          style: "default",
          tilematrixset: "c",
          // wrapX: true,
          tileLoadFunction(imageTile, src) {
            // 使用滤镜 将白色修改为深色
            let img = new Image();
            // img.crossOrigin = ''
            // 设置图片不从缓存取，从缓存取可能会出现跨域，导致加载失败
            img.setAttribute("crossOrigin", "anonymous");
            img.onload = function () {
              let canvas = document.createElement("canvas");
              let w = img.width;
              let h = img.height;
              canvas.width = w;
              canvas.height = h;
              let context = canvas.getContext("2d");
              context.filter =
                "grayscale(92%) invert(100%) sepia(20%) hue-rotate(140deg) saturate(2000%) brightness(70%) contrast(80%)";
              context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
              imageTile.getImage().src = canvas.toDataURL("image/png");
            };
            img.src = src;
          },
        }),
      });

      //创建地图容器
      myMap = new Map({
        //加载瓦片图层数据
        layers: [baseMapLayer],
        //初始化map和地图底图
        view: new View({
          center: iniCenter,
          projection: getProjection("EPSG:4490"),
          zoom: 15,
        }),
        //目标加载到map中
        target: "map",
      });

      myMap.on("singleclick", (event) => {
        myMap.forEachFeatureAtPixel(event.pixel, function (feature) {
          // 为移动到的 feature 发送自定义的 mousemove 消息
          feature.dispatchEvent({ type: "click", event });
        });
      });

      await nextTick();
      this.iniGridArea(myMap);

      myMap.on("loadend", async () => {
        console.log("--------地图加载新东西完毕");
        // if (mapType == "td") {
        //   this.iniMapBase(scene);
        // } else if (mapType == "tdzw") {
        //   this.iniMapBase2(scene);
        // }

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

    iniGridArea(map) {
      const { darkStyle, lightStyle, polygonData, polygonDotData } = this;

      console.log("--------------初始化网格");

      const polygonSource = new VectorSource({
        features: polygonData,
      });

      polygonLayer = new VectorLayer({
        title: "gridArea",
        source: polygonSource,
        opacity: 1,
        className: "",
        zIndex: 10,
        background: "",
      });

      polygonLayer.getSource().on("featuresloadstart", async (evt) => {
        console.log("===============featuresloadstart", evt);

        await nextTick();
        polygonLayer
          .getSource()
          .getFeatures()
          .forEach((item, index) => {
            const baseStyles = [
              new Style({
                fill: new Fill({
                  color: "rgba(255, 100, 60, 0.5)",
                }),
                stroke: new Stroke({
                  color: "rgba(220, 150, 120, 0.9)",
                  width: 2,
                }),
              }),
              new Style({
                fill: new Fill({
                  color: "rgba(43, 231, 253, 0.3)",
                }),
                stroke: new Stroke({
                  color: "rgba(33, 201, 223, 0.8)",
                  width: 2,
                }),
              }),
              new Style({
                fill: new Fill({
                  color: "rgba(255, 255, 50, 0.3)",
                }),
                stroke: new Stroke({
                  color: "rgba(200, 200, 50, 0.9)",
                  width: 2,
                }),
              }),
            ];

            item.on("click", function (event) {
              console.log("我被点击拉", item, event);
              // 修改feature的样式为半径100像素的园，用蓝色填充
              this.setStyle(
                new ol.style.Style({
                  image: new ol.style.Circle({
                    radius: 100,
                    fill: new ol.style.Fill({
                      color: "blue",
                    }),
                  }),
                })
              );
            });

            setInterval(() => {
              let currStyle = item.getStyle();
              if (!Array.isArray(currStyle)) {
                item.setStyle([
                  baseStyles[index % baseStyles.length],
                  new Style({
                    stroke: new Stroke({
                      color: [0, 0, 0, 0.5],
                      width: 2,
                      lineDash: [6, 12],
                      lineDashOffset: 0,
                    }),
                  }),
                ]);
              } else {
                let currStroke = currStyle[1].getStroke();
                let lineDashOffset = currStroke.getLineDashOffset();
                currStroke.setLineDashOffset(
                  lineDashOffset == 16 ? 0 : lineDashOffset + 2
                );
                item.setStyle(currStyle);
              }
            }, 100);
          });
      });

      let clickSelect = new Select({
        condition: click,
        layers: [polygonLayer],
      });
      clickSelect.on("select", (e) => {
        let fet = e.selected[0];
        console.log("点击我了", fet.getProperties());
        // let props = fet.getProperties().properties;
        // this.$emit("clickAgency", props);
        // if (props.level == "grid") {
        //   this.handleClickDot({ ...props, placeType: "grid" }, props.center);
        // }
      });

      map.addLayer(polygonLayer);
      map.addInteraction(clickSelect);
    },
    updateGridArea() {},

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

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

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

      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: 0,
          // 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);

        if (e.feature.properties.level == "grid") {
          this.handleClickDot(
            { ...e.feature.properties, placeType: "grid" },
            e.feature.properties.center
          );
        }
      });

      polygonLayer.on("unmousemove", (e) => {
        polygonLayer.style({
          raisingHeight: 0,
        });
      });

      countTextLayer = new PolygonLayer({
        zIndex: 20,
      })
        .source(polygonDotData)
        .color("name", styleConfig.textColor)
        .shape("dotCount", "text")
        .size(14)
        .style({
          textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
          textOffset: [0, -80], // 文本相对锚点的偏移量 [水平, 垂直]
          spacing: 2, // 字符间距
          padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
          stroke: styleConfig.textStrokeColor, // 描边颜色
          strokeWidth: 0.1, // 描边宽度
          strokeOpacity: 0.8,
          textAllowOverlap: true,
        })
        .active(true);
      scene.addLayer(countTextLayer);
    },

    iniMapDot(scene) {
      const { darkStyle, lightStyle, dotIcoList, dotData } = this;
      console.log("--------------------------图标", dotIcoList);
      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",
        });

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

      scene.addLayer(dotBgLayer);
      scene.addLayer(dotLayer);

      dotBgLayer.on("click", (e) => {
        console.log("--------clickDot", e);
        this.handleClickDot(
          e.feature.properties,
          e.feature.geometry.coordinates
        );
      });

      dotBgLayer.on("mousemove", (e) => {
        // console.log(e);
      });

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

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

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

      dotLayer2.on("click", (e) => {
        console.log("--------clickDot2", e);
        if (
          e.feature.properties.dataList &&
          e.feature.properties.dataList.length == 1
        ) {
          this.handleClickDot(
            { ...e.feature.properties, ...e.feature.properties.dataList[0] },
            e.feature.geometry.coordinates
          );
        } else {
          this.handleClickDot(
            { ...e.feature.properties, placeType: "list" },
            e.feature.geometry.coordinates
          );
        }
      });

      dotLayer2.on("mousemove", (e) => {
        // console.log(e);
      });

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

    handleClickDotBtn(type, info) {
      console.log(type, info);
      this.$emit("clickDotBtn", type, info);
    },

    handleClickDotListItem(item) {
      console.log("handleClickDotListItem", item);
      this.handleClickDot(item, [
        parseFloat(item.longitude),
        parseFloat(item.latitude),
      ]);
    },

    async handleClickDot(item, posArr) {
      console.log("handleClickDot", item, posArr);
      const res = await this.$refs.popup.show(item);
      if (res) {
        const popup = new Popup({
          closeButton: true,
          closeOnClick: true,
          maxWidth: 400,
        })
          .setLnglat(posArr)
          .setDOMContent(this.$refs.popup.$el);
        scene.addPopup(popup);
      }
    },

    drawSearchBg(lng, lat) {
      function getPoints(lng, lat) {
        // lng 经度；lat 纬度；dis 距离（千米）
        let r = 6371; //地球半径千米
        let dis = 1.5; //3千米距离
        let dlng =
          2 *
          Math.asin(Math.sin(dis / (2 * r)) / Math.cos((lat * Math.PI) / 180));
        dlng = (dlng * 180) / Math.PI; // 经度半径
        let dlat = dis / r;
        dlat = (dlat * 180) / Math.PI; // 纬度半径
        // 圆形每一度 都算出一个经纬度
        for (let sides = 1; sides <= 360; sides++) {
          var angle = Math.PI * (1 / sides - 1 / 2);
          var rotatedAngle, x, y;
          var points = [];
          for (var i = 0; i < sides; ++i) {
            rotatedAngle = angle + (i * 2 * Math.PI) / sides;
            x = lng + dlng * Math.cos(rotatedAngle);
            y = lat + dlat * Math.sin(rotatedAngle);
            points.push([x, y]);
          }
        }
        console.log("points=======", points);
        return points;
      }

      let sourceData;
      if (lng) {
        sourceData = {
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              properties: {
                center: [lng, lat],
              },
              geometry: {
                type: "Polygon",
                coordinates: [getPoints(lng, lat)],
              },
            },
          ],
        };
      } else {
        sourceData = {
          type: "FeatureCollection",
          features: [],
        };
      }

      if (searchBgLayer) {
        console.log("searchBgLayer已经存在了", searchBgLayer);
        searchBgLayer.setData(sourceData);
      } else {
        searchBgLayer = new PolygonLayer({
          //   autoFit: true,
        })
          .source(sourceData)
          .color("#f0f")
          .shape("fill")
          .style({
            opacityLinear: {
              enable: true, // true - false
              dir: "out", // in - out
            },
            opacity: 0.3,
            raisingHeight: 0,
          });

        scene.addLayer(searchBgLayer);
      }
    },

    async setDotMarker(item, posArr) {
      this.removeDotMarker();
      this.drawSearchBg(...posArr);
      const marker = new Marker({
        offsets: [0, -20],
      }).setLnglat(posArr);

      const res = await this.$refs.popup.show(item);
      if (res) {
        const popup = new Popup({
          closeButton: true,
          closeOnClick: true,
          maxWidth: 400,
        })
          .setLnglat(posArr)
          .setDOMContent(this.$refs.popup.$el);
        marker.setPopup(popup);
      }

      marker.on("click", (e) => {
        console.log("click", e);
        // this.handleClickDot(item, posArr);
        marker.openPopup();
      });

      scene.addMarker(marker);
      scene.setZoomAndCenter(14, posArr);
      marker.openPopup();
      searchMarker = marker;
    },

    removeDotMarker() {
      console.log("removeDotMarker");
      if (searchMarker) {
        searchMarker.remove();
      }
      if (searchBgLayer) {
        console.log("removeDotMarker-----searchBgLayer");
        this.drawSearchBg();
      }
    },

    // 把地图缩放等级在原来基础上大一点
    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.updateGridCount();
      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);
      }
    },

    updateGridCount() {
      const { polygonDotData } = this;
      if (countTextLayer) {
        countTextLayer.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);
      }
    },

    searchPos(name) {
      return new Promise(async (reslove) => {
        if (mapType == "td") {
          let center = scene.getCenter();
          console.log("=----------------------=searchPos", name);
          if (!tdtSearchMap) {
            tdtSearchMap = new T.Map(document.getElementById("searchMap"), {
              center,
            });
            await nextTick(1000);
            console.log("=----------------------=searchPos2", center);
          }
          tdtSearchMap.panTo(center);
          await nextTick(100);
          const { msg, data } = await searchNearby(tdtSearchMap, name);
          console.log("=----------------------=searchPos3", data);
          if (msg == "success") {
            reslove(data.resultList);
          }
          reslove([]);
        } else {
          window.AMap.plugin("AMap.PlaceSearch", () => {
            const city = this.$store.state.user.areaCodePath[1] || "全国";
            console.log("搜索区域", city);
            // 实例化Autocomplete
            let autoOptions = {
              //city 限定城市，默认全国
              city,
            };
            let autoComplete = new window.AMap.PlaceSearch(autoOptions);
            autoComplete.search(name, function (status, result) {
              reslove(result);
            });
          });
        }
      });
    },
  },
};
</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;
        }
      }
    }
  }

  /deep/ .l7-popup-content {
    background: rgba(#020340, 0.58);
    box-shadow: 0 0 20px 3px inset rgba(#22f, 0.1);
  }
  /deep/ .l7-popup-close-button {
    padding: 4px;
    font-size: 36px;
    color: rgba(#fff, 0.8);
  }

  #map {
    width: 100%;
    height: 100%;
  }
  #searchMap {
    position: absolute;
    width: 200px;
    height: 200px;
    visibility: hidden;
    pointer-events: none;
  }
  .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>