web_sh_audit/src/components/map/MapHolder.vue

<template>
  <div id="map2DViewer">
    <!-- 特殊地图属性弹窗 -- 有审计功能 -->
    <CaseAuditPopup
      v-show="auditPopupShow"
      :tableObj="auditRefTableObj"
      :defaultStatus="defaultStatus"
      ref="auditRef"
    />
    <!-- 通用地图属性弹窗 -- 无审计功能 -->
    <NormalAttrPopup
      v-show="normalAttrPopupShow"
      :tableObj="tableObj"
      ref="normalRef"
    />
    <LabelCasePopup
      v-show="labelDetailsPopupShow"
      ref="labelRef"
      :targetArea="targetArea"
      :targetDistance="targetDistance"
    />
  </div>
</template>
<script>
import publicFun from "@/utils/publicFunction.js";
import { get } from "@/utils/request";
import { townData } from "@/config/common";
import CaseAuditPopup from "@/components/popup/CaseAuditPopup.vue";
import NormalAttrPopup from "@/components/popup/NormalAttrPopup.vue";
import LabelCasePopup from "@/components/popup/LabelCasePopup.vue";
export default {
  name: "MapHolder",
  components: {
    CaseAuditPopup,
    NormalAttrPopup,
    LabelCasePopup,
  },
  data() {
    return {
      town: "祝桥镇,南汇新城镇,川沙新镇,老港镇,惠南镇,航头镇,泥城镇,书院镇,新场镇,大团镇,唐镇,曹路镇,宣桥镇,张江镇,合庆镇,周浦镇,康桥镇,三林镇,高桥镇,高东镇,金桥镇,北蔡镇,万祥镇,高行镇",
      auditPopupShow: false,
      normalAttrPopupShow: false,
      labelDetailsPopupShow: false,
      auditPopupStatus: "normal",
      popup: null,
      labelPopup: null,
      normalPopup: null,
      // 疑点审计
      currentCid: null,
      currentHtml: null,
      currentProperties: null,
      currentSourceType: null,
      currentModelId: null,
      currentColumnId: null,
      // 标记疑点
      currentLabelCid: null,
      currentLabelHtml: null,
      // 疑点审计的保存后的疑点状态集合
      caseStatusMap: new Map(),
      tableObj: {
        镇域名称: "--",
        "面积(平方米)": "--",
        土地类型: "--",
        图斑编号: "--",
      },
      auditRefTableObj: {
        镇域名称: "--",
        "面积(平方米)": "--",
        图层构成: "--",
        性质: "--",
      },
      targetArea: 0,
      targetDistance: 0,
      defaultStatus: "未标记",
    };
  },
  created() {},
  mounted() {
    // 监听全局事件总线中的卷帘对比事件（JLControl）
    this.$bus.$off("JLControl");
    this.$bus.$on("JLControl", () => {
      this.JLControl();
    });
    // 监听全局事件总线中的卷帘对比重绘事件（reJLControl）
    this.$bus.$off("reJLControl");
    this.$bus.$on("reJLControl", () => {
      this.reJLControl();
    });
    this.$bus.$off("caseAuditEvent");
    this.$bus.$on("caseAuditEvent", () => {
      this.caseAuditEvent();
      this.$bus.$emit("caseAuditEvent2");
    });

    //地图初始化
    this.mapInit();

    this.$store.state.mapMethodsCollection.set("RENDER", {
      addPolygonLayer: this.addPolygonLayer,
      setView: this.setView,
      deletePolygonLayer: this.deletePolygonLayer,
      addSinglePolygon: this.addSinglePolygon,
      deleteSinglePolygon: this.deleteSinglePolygon,
      deleteGroupFromMap: this.deleteGroupFromMap,
      drawGeometry: this.drawGeometry,
      deleteGeometry: this.deleteGeometry,
      addTiledMapLayer: this.addTiledMapLayer,
    });
  },
  beforeDestroyed() {
    // 当容器销毁时，需要停止监听该事件
    this.$bus.$off("JLControl");
    // 疑点审计
    this.$bus.$off("caseAuditEvent");
    map2DViewer.map.closePopup();
  },
  computed: {
    // 监听底部菜单栏的状态
    getLabelCaseBtnStatus() {
      //疑点审计 1,0
      let _index = this.$store.state.bottomMenuIndexs.index;
      let _subIndex = this.$store.state.bottomMenuIndexs.subIndex;
      return { index: _index, subIndex: _subIndex };
    },
    // 监听当前菜单
    getCurrentMenu() {
      return this.$store.state.navSelect;
    },
  },
  watch: {
    getLabelCaseBtnStatus(val) {
      if (val.index === 1 && val.subIndex === 1) {
        // 删除地图上所有弹窗
        this.$store.state.attrTableShow = false;
        this.$store.state.updateCasePopupShow = false;
        // 删除地图上的所有标记
        if (map2DViewer.myLabels) {
          for (let i in map2DViewer.myLabels) {
            this.deleteGeometry(map2DViewer.myLabels[i]);
            map2DViewer.myLabels[i] = null;
          }
        }
        this.initDraw();
      } else {
        this.stopLabelCase();
        if (this.labelPopup) {
          map2DViewer.map.closePopup();
          this.labelPopup = null;
        }
      }
    },
    "$store.state.navSelect": {
      handler(val) {
        if (val.index !== "3") {
          if (map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
            map2DViewer.map.removeControl(map2DViewer.jlControl);
            map2DViewer.map.removeLayer(map2DViewer.jlMap);
            delete map2DViewer.jlMap;
            map2DViewer.jlControl = null;
          }
          this.$store.state.bottomMenuIndexs.index = -1;
          this.$store.state.bottomMenuIndexs.subIndex = -1;
          this.$store.commit("changeJlActiveState", false);
        }
        // 切换页面时判断是否需要显示区域图
        this.$nextTick(() => {
          this.getJSonData();
        });
      },
      // immediate: true
    },
  },
  methods: {
    // 测试宝石蓝底图
    addDarkmap(url) {
      let layer = L.esri.tiledMapLayer({
        tileSize: 512,
        url: url,
        minZoom: 0,
        minNativeZoom: 3,
        maxNativeZoom: 7,
        maxZoom: 14,
      });
      return layer;
    },
    // 添加tiledMapLayer图层 -- 针对arcgis rest services
    addTiledMapLayer(url) {
      let layer = L.esri.tiledMapLayer({
        tileSize: 512,
        url: url,
        minZoom: 0,
        minNativeZoom: 0,
        maxNativeZoom: 7,
        maxZoom: 14,
      });
      return layer;
    },
    // 开始标记疑点事件
    startLabelCase() {
      map2DViewer.setDrawTool({ action: "start" });
    },
    // 停止标记疑点事件
    stopLabelCase() {
      if (map2DViewer.measureTool) {
        map2DViewer.setDrawTool({
          action: "remove",
        });
      }
    },
    reStartLabelCase() {
      this.stopLabelCase();

      this.initDraw();
    },
    /**
     * 无审计功能的地图弹窗
     * @str
     * @properties
     * @sourceType
     */
    createNormalDiv(str, geojsonData, sourceType) {
      let currentInnerHtml = this.$refs.normalRef.$el.innerHTML;
      if (currentInnerHtml) {
        let div = document.createElement("div");
        div.id = str + "_id";
        div.className = "case-audit";
        // 动态创建div后赋值模板样式
        div.innerHTML = currentInnerHtml;
        // 需要显示法律法规详细信息的弹窗
        if (sourceType) {
          setTimeout(() => {
            let _this = this;
            // 法律法规点击事件
            if ($(`#${str}_id a`)) {
              $(`#${str}_id a`)
                .eq(0)
                .click((e) => {
                  this.$store.state.lawPopupShow = true;
                  this.$store.state.lawSourceType = sourceType;
                });
              $(`#${str}_id a`)
                .eq(1)
                .click((e) => {
                  // 触发综合分析右侧面板点击事件
                  this.$bus.$emit("viewDetailsPopup", geojsonData);
                });
            }
          }, 0);
        } else {
          // 不需要显示法律法规详细信息的弹窗
          $(() => {
            if ($(`#${str}_id a`)) {
              $(`#${str}_id a`).eq(0).remove();
              $(`#${str}_id a`)
                .eq(0)
                .click((e) => {
                  // 触发综合分析右侧面板点击事件
                  this.$bus.$emit("viewDetailsPopup", geojsonData);
                });
            }
          });
          // console.log("呈现我的模型的几何数据");
        }
        return div;
      }
    },
    /**
     * 有审计功能的地图弹窗
     * @str
     * @properties
     * @sourceType
     * @modelId -- 用于疑点标记修改保存
     * @columnId -- 用于疑点标记修改保存
     */
    createAuditDiv(str, geojsonData, sourceType, modelId, columnId) {
      // 根据ref获取组件的dom元素columnId
      this.currentHtml = this.$refs.auditRef.$el.innerHTML;
      if (this.currentHtml) {
        let div = document.createElement("div");
        div.id = str + "_id";
        div.className = "case-audit";
        // 动态创建div后赋值模板样式
        div.innerHTML = this.currentHtml;
        setTimeout(() => {
          // let _this = this;
          // 属性框内容
          // if ($(".center-table-item-normal")) {
          //   $(".center-table-item-normal .leftcell").each((index, domEle) => {
          //     $(".center-table-item-normal .leftcell").eq(index).text(Object.keys(_this.auditRefTableObj)[index]);
          //     $(".center-table-item-normal .rightcell").eq(index).text(Object.values(_this.auditRefTableObj)[index]);
          //   });
          // }

          // if ($(".center-table-item-special")) {
          //   $(".center-table-item-special .leftcell").each((index, domEle) => {
          //     $(".center-table-item-speciall .leftcell").eq(index).text(Object.keys(_this.auditRefTableObj)[index]);
          //     $(".center-table-item-special .rightcell").eq(index).text(Object.values(_this.auditRefTableObj)[index]);
          //   });
          // }

          // 下拉框内容
          if ($(`#${str}_id .center-table-item-special select`)) {
            if (this.caseStatusMap.has(str)) {
              $(`#${str}_id .center-table-item-special select`).val(
                this.caseStatusMap.get(str)
              );
              let inputStatus = "";
              if (this.caseStatusMap.has(str)) {
                this.caseStatusMap.get(str) === "isTrue" &&
                  $(`#${str}_id .center-table-item-special input`).val("疑点");
                !this.caseStatusMap.get(str) === "isTrue" &&
                  $(`#${str}_id .center-table-item-special input`).val(
                    "非疑点"
                  );
              }
            }
          }

          // 法律法规点击事件
          if ($(`#${str}_id a`)) {
            $(`#${str}_id a`)
              .eq(0)
              .click((e) => {
                this.$store.state.lawPopupShow = true;
                this.$store.state.lawSourceType = sourceType;
              });
            $(`#${str}_id a`)
              .eq(1)
              .click((e) => {
                // 触发综合分析右侧面板点击事件

                this.$bus.$emit("viewDetailsPopup", geojsonData);
              });
          }
          // input添加点击事件
          if ($(`#${str}_id input`)[1]) {
            $(`#${str}_id input`).click((e) => {
              switch (e.target.defaultValue) {
                case "取消":
                  this.cancelBtnEvent();
                  break;
                case "确认":
                  this.confirmBtnEvent(str, modelId, columnId);
                  break;
              }
            });
          }
        }, 0);
        return div;
      }
    },
    /**
     * 标记疑点完成时保存描述信息的弹窗
     * @str -- id
     * @coord -- 坐标信息
     * @data -- 其余数据
     * @geoType -- 几何体类型
     * @area -- 面积
     * @distance -- 距离
     */
    createLabelDiv(str, coord, data, geoType, area, distance) {
      this.currentLabelHtml = this.$refs.labelRef.$el.innerHTML;
      if (this.currentLabelHtml) {
        let div = document.createElement("div");
        div.id = `${str}_id`;
        div.className = "label-case";
        // 动态创建div后赋值模板样式
        div.innerHTML = this.currentLabelHtml;
        $(() => {
          $(`#${str}_id`).css("height", "100%");
          $(`#${str}_id input`).click((e) => {
            switch (e.target.defaultValue) {
              case "取消":
                this.cancelBtnEvent();
                break;
              case "保存":
                this.saveBtnEvent(str, data, geoType, area, distance);
                break;
            }
          });
        });
        return div;
      }
    },
    confirmBtnEvent(str, modelId, columnId) {
      // isTrue
      let selectVal = $(`#${str}_id .center-table-item-special select`).val();
      this.caseStatusMap.set(str, selectVal);
      if (selectVal === "isTrue") {
        map2DViewer.polygons[str].setStyle({
          color: `rgb(${caseColorChange["isPointColor"][0]},${caseColorChange["isPointColor"][1]},${caseColorChange["isPointColor"][2]})`,
          weight: 4,
        });
      } else {
        map2DViewer.polygons[str].setStyle({
          color: `rgb(${caseColorChange["notPointColor"][0]},${caseColorChange["notPointColor"][1]},${caseColorChange["notPointColor"][2]})`,
          weight: 4,
        });
      }
      // 修改疑点时必须要写id
      let obj = {
        id: str,
        c_date_time: this.$dayjs().valueOf(),
        c_boolean: selectVal === "isTrue" ? true : false,
        // 修改人员名称
        c_editor_name: localStorage.getItem("USER_NAME"),
        // 修改人员ID
        c_editorid: localStorage.getItem("USER_ID"),
      };

      let modifyParams = new FormData();
      modifyParams = {
        columnId: columnId,
        modelId: modelId,
        content: JSON.stringify(obj),
      };
      this.$Post(this.urlsCollection.updateContent, modifyParams).then(
        (res) => {
          if (res.code === 200) {
            this.$message.success("数据修改成功");
            map2DViewer.map.closePopup();

            switch (selectVal) {
              case "isTrue":
                this.$store.state.mapMethodsCollection
                  .get("METHODS")
                  .changeCaseBoolean(str, "疑点");
                this.$store.state.mapMethodsCollection
                  .get("METHODS")
                  .changeSortMethod("疑点");
                break;
              case "isFalse":
                this.$store.state.mapMethodsCollection
                  .get("METHODS")
                  .changeCaseBoolean(str, "非疑点");
                this.$store.state.mapMethodsCollection
                  .get("METHODS")
                  .changeSortMethod("非疑点");
                break;
            }
          }
        }
      );
    },
    cancelBtnEvent() {
      map2DViewer.map.closePopup();
      this.labelPopup = null;
      this.popup = null;
    },

    /**
     * 点击保存事件时保存点数据
     * @str
     * @data -- 绘制几何体时获取的数据；
     * @geoType 几何体类型 类型: 0 点；1 线；2 面；3 矩形；4 圆形；5 其他；
     * @area
     * @distance
     */
    saveBtnEvent(str, data, geoType, area, distance) {
      if (localStorage.getItem("USER_ID")) {
        let title = $(`#${str}_id select`).val();
        let des = $(`#${str}_id textarea`).val();
        let geoName = "";
        let currentName = $(`#${str}_id input`).eq(0).val();
        if (myLabelNameMap.has(currentName)) {
          this.$message.info("该名称已存在，请重新输入!");
        } else {
          geoName = $(`#${str}_id input`).eq(0).val();

          let coordinates = [data.points];
          let options = {
            title: title,
            des: des,
            geoType: geoType,
            coordinates: coordinates,
            geoName: geoName,
            area: area,
            distance: distance,
          };
          let geometry = publicFun.generateGeoJSON(options);
          let params = new FormData();
          let newGeojson = JSON.stringify(geometry);
          myLabelNameMap.set(geoName, newGeojson);
          params = {
            geojson: newGeojson,
            type: geoType,
            userId: Number(localStorage.getItem("USER_ID")),
            sourceId: 0,
          };

          this.$Post(this.urlsCollection.addConllection, params).then(
            (res) => {
              if (res.code == 200) {
                // 标记成功后删除保存的原有名称
                myLabelNameMap.delete(geoName);
                map2DViewer.map.closePopup();
                // 根据用户获取标记
                let paramData = new FormData();
                paramData = {
                  userId: Number(localStorage.getItem("USER_ID")),
                  sourceId: 0,
                  pageSize: 10,
                };
                // 暂存map中刚刚保存的数据
                this.$Post(this.urlsCollection.selectByUser, paramData).then(
                  (userRes) => {
                    if (userRes.code === 200) {
                      if (userRes.content.length > 0) {
                        this.$store.state.myLabelPointsArr = [];
                        this.$store.state.myLabelPointsArr =
                          userRes.content.map((v) => {
                            if (JSON.stringify(geometry) === v.geojson) {
                              sessionStorage.setItem("myLabelPointsId", v.id);
                            }
                            return {
                              id: v.id,
                              geojson: v.geojson,
                              type: v.type,
                            };
                          });
                        // 判断刚刚暂存的数据，并调用小眼睛的方法
                      }
                    }
                    // 更新时调用一次搜索接口
                  }
                );
              }
              // 保存后需要删除地图上的标记
              this.reStartLabelCase();
            },
            (error) => {
              console.log("标记疑点保存失败！", error);
              this.reStartLabelCase();
            }
          );
        }
      }
    },
    // 卷帘对比
    JLControl() {
      if (!map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
        // 天地图遥感影像数据
        // map2DViewer.jlMap = L.tileLayer(
        //   "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
        // ).addTo(map2DViewer.map);
        if (this.$store.state.JLControlRightMapUrl) {
          map2DViewer.jlMap = this.addTiledMapLayer(
            this.$store.state.JLControlRightMapUrl
          ).addTo(map2DViewer.map);
        } else {
          map2DViewer.jlMap = this.addTiledMapLayer(
            systemConfig.imageryLayerSat2022s2.url
          ).addTo(map2DViewer.map);
        }

        map2DViewer.jlControl = L.control
          .sideBySide(map2DViewer.map, map2DViewer.jlMap)
          .addTo(map2DViewer.map);
      } else if (map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
        map2DViewer.map.removeControl(map2DViewer.jlControl);
        map2DViewer.map.removeLayer(map2DViewer.jlMap);
        delete map2DViewer.jlMap;
        map2DViewer.jlControl = null;
      }
    },
    // 卷帘对比重绘
    reJLControl() {
      if (map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
        map2DViewer.map.removeControl(map2DViewer.jlControl);
        map2DViewer.map.removeLayer(map2DViewer.jlMap);
        delete map2DViewer.jlMap;
        map2DViewer.jlControl = null;
        this.JLControl();
      }
    },
    // 疑点审计
    caseAuditEvent() {
      if (this.currentHtml && this.currentCid) {
        setTimeout(() => {
          this.popup.setContent(
            this.createAuditDiv(
              this.currentCid,
              this.currentProperties,
              this.currentSourceType,
              this.currentModelId,
              this.currentColumnId
            )
          );
        }, 300);
      }
    },
    // 初始化引入绘制工具
    initDraw() {
      if (!map2DViewer.measureTool) {
        // 引入疑点标记绘制方法
        map2DViewer.drawToolFire = (data) => {
          // 纬经度
          if (data && data.points.length >= 1) {
            let geoType = null;
            // 类型: 0 点；1 线；2 面；3 矩形；4 圆形；5 其他；
            if (data.points.length === 1 && data.area === 0) {
              geoType = 0;
            }
            if (data.points.length === 2 && data.distance > 0) {
              geoType = 4;
            }

            if (data.points.length > 2 && data.area === 0) {
              geoType = 1;
            }

            if (data.points.length > 2 && data.area != 0 && data.area != "") {
              geoType = 2;
            }

            let coord = data.points[data.points.length - 1];

            if (coord && coord.length >= 2) {
              let newCoord = { lat: coord[0], lng: coord[1] };
              this.targetArea = data.area;
              this.targetDistance = data.distance;
              this.$refs.labelRef.$nextTick(() => {
                this.labelDetailsPopupShow = true;
                this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
                  .setLatLng(newCoord)
                  .setContent(
                    this.createLabelDiv(
                      "label",
                      coord,
                      data,
                      geoType,
                      data.area,
                      data.distance
                    )
                  )
                  .openOn(map2DViewer.map);
                this.labelDetailsPopupShow = false;
              });
            }
          }
        };
        map2DViewer.setDrawTool({
          action: "add",
          offset: [150, 50],
          background: "#fff",
          color: "red",
          font_size: "14px",
          closeButton: true,
          iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png",
          map: map2DViewer.map,
        });
      }
    },

    mapInit: function () {
      // 遥感影像图层crs -- original
      let crs = new L.Proj.CRS(
        "EPSG:0986",
        "+proj=tmerc +lat_0=0 +lon_0=121.2751921 +k=1 +x_0=0 +y_0=-3457147.81 +ellps=krass +units=m +no_defs",
        {
          resolutions: systemConfig.imageryLayer.resolutions,
          origin: [-66000, 75000],
          bounds: L.bounds([-65000, -76000], [75000, 72000]),
        }
      );

      map2DViewer.map = L.map("map2DViewer", {
        crs: crs,
        zoom: 2,
        minZoom: systemConfig.imageryLayer.minZoom,
        maxZoom: systemConfig.imageryLayer.maxZoom,
        attributionControl: false,
        zoomControl: false,
        // preferCanvas: true,
      }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);

      //添加默认图层
      let guid = publicFun.buildGuid("baseLayer");
      let layer = this.addTiledMapLayer(systemConfig.blueBlackMap.url).addTo(
        map2DViewer.map
      );
      map2DViewer.layers["darkmap"] = layer;

      let imageryLayer = this.addTiledMapLayer(systemConfig.imageryLayer.url);
      map2DViewer.layers["imagery"] = imageryLayer;
      // map2DViewer.map.on("click", onMapClick);
    },
    onMapClick() {
      // if (map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid]) {
      //   map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid].setStyle({
      //     color: "red"
      //   });
      // } else {
      // }
    },
    // 传入街道参数，重新渲染区域图层
    getJSonDataToStreet(url, param) {
      // 先删除历史图层
      if (map2DViewer.map.hasLayer(map2DViewer.groups["浦东新区_polygon"])) {
        map2DViewer.groups["浦东新区_label"].remove();
        map2DViewer.groups["浦东新区_polygon"].remove();
      }
      // 请求并渲染新的区域图层
      get("./static/json/simplified_pdgeojson.json", "").then((geoJson) => {
        // 存放所有的面数据
        map2DViewer.groups["浦东新区_polygon"] = L.featureGroup();
        map2DViewer.groups["浦东新区_label"] = L.featureGroup();
        map2DViewer.groups["浦东新区_polygon"].addTo(map2DViewer.map);
        map2DViewer.groups["浦东新区_label"].addTo(map2DViewer.map);
        geoJson.features.map((feature) => {
          let correctCordArr = JSON.parse(
            JSON.stringify(feature.geometry.coordinates)
          );
          let newCorrectCoordArr = publicFun.latLngsCorrection(correctCordArr);
          feature.geometry.coordinates = newCorrectCoordArr;
          // if (
          // this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
          // ) {
          this.renderPolygon(feature);
          // }
        });
      });
    },
    /**
     * val :经纬度数组
     */
    w84Proj4ToShanghai(val) {
      // 参数1：随意定义的坐标系名称，格式“EPSG:xxxxx”
      // 参数2：prj文件里的内容
      this.$proj4.defs(
        "EPSG:0986",
        "+proj=tmerc +lat_0=0 +lon_0=121.2751921 +k=1 +x_0=0 +y_0=-3457147.81 +ellps=GRS80 +units=m +no_defs +type=crs"
      );
      // "+proj=tmerc +lat_0=0 +lon_0=121.2751921 +k=1 +x_0=0 +y_0=-3457147.81 +ellps=krass +units=m +no_defs",
      // 从"EPSG:0986"转成"EPSG:4326"
      // coordinate 类型Array  例：[116, 39]
      let pro = `PROJCS[\"shanghaicity\",GEOGCS[\"GCS_Beijing_1954\",DATUM[\"D_Beijing_1954\",SPHEROID[\"Krasovsky_1940\",6378245.0,298.3]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",-3457147.81],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",121.2751921],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]`;
      return this.$proj4("EPSG:0986", "EPSG:4326", val);
    },
    // 可视化单一的镇域面
    getSingleJsonData(name) {},
    // 默认获取浦东新区全区的图层数据
    getJSonData() {
      if (!map2DViewer.map) {
        this.mapInit();
      } else if (
        // 切换到首页和疑点筛查页且图层不存在时重新渲染区域图
        this.$ifMenu("1", "") &&
        !map2DViewer.map.hasLayer(map2DViewer.groups["浦东新区_polygon"])
      ) {
        this.getJSonDataToStreet("", "");
        // 切换到首页时需定位到当前图层
        if (this.$store.state.homeSpecialTown === "全部") {
          this.setView(
            townLocationMap.get(this.$store.state.homeSpecialTown),
            3
          );
        } else {
          let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
          map2DViewer.map.fitBounds(polygon.getBounds());
        }
      } else if (this.$ifMenu("2", "5")) {
        this.getJSonDataToStreet("", "");
        // 切换到镇域专题是时均往左偏移一些
        if (this.$store.state.homeSpecialTown === "全部") {
          let locationArr = townLocationMap.get(
            this.$store.state.homeSpecialTown
          );
          this.setView([locationArr[0], locationArr[1] + 0.15], 3);
        } else {
          let locationArr = townLocationMap.get(
            this.$store.state.homeSpecialTown
          );
          this.setView([locationArr[0], locationArr[1]], 5);
          // let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
          // map2DViewer.map.fitBounds(polygon.getBounds());
        }
      } else if (
        this.$ifMenu("2", "1") ||
        this.$ifMenu("2", "2") ||
        this.$ifMenu("2", "3") ||
        this.$ifMenu("2", "4")
      ) {
        this.getJSonDataToStreet("", "");
        // 切换到疑点筛查时均往右偏移一些
        if (this.$store.state.homeSpecialTown === "全部") {
          this.setView(
            townLocationMap.get(this.$store.state.homeSpecialTown),
            3
          );
        } else {
          let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
          map2DViewer.map.fitBounds(polygon.getBounds());
        }
      } else if (
        !(this.$ifMenu("1", "") || this.$ifMenu("2", "")) &&
        map2DViewer.map.hasLayer(map2DViewer.groups["浦东新区_polygon"])
      ) {
        // 当前页不是首页和疑点筛查页时移除区域图且图层存在时
        map2DViewer.groups["浦东新区_label"].remove();
        map2DViewer.groups["浦东新区_polygon"].remove();
      }
    },
    setView: function (coord, zoom) {
      let center = L.latLng(coord[0], coord[1]);
      map2DViewer.map.setView(center, zoom);
    },
    renderPolygon: function (feature) {
      let center;
      if (
        feature.properties.NAME.indexOf("南汇新城镇") > -1 ||
        feature.properties.NAME.indexOf("高行镇") > -1 ||
        feature.properties.NAME.indexOf("宣桥镇") > -1 ||
        feature.properties.NAME.indexOf("康桥镇") > -1
      ) {
        center = turf.centerOfMass(feature.geometry);
      } else {
        center = turf.centroid(feature.geometry);
      }
      // let itemvalue = JSON.parse((Math.random() * 1000).toFixed(0));
      let name = feature.properties.NAME;

      let polygonData = JSON.parse(JSON.stringify(feature));
      let coordinates = polygonData.geometry.coordinates[0];
      // 几何体
      let polygon = L.polygon(this.latLngsToReverse(coordinates), {
        color: "#87d8fd",
        weight: 3,
        fillColor: this.getColor(name),
        opacity: 1,
        fillOpacity: 0.4,
      }).addTo(map2DViewer.groups["浦东新区_polygon"]);

      center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
      center.reverse();
      // 坐标
      townLocationMap.set(name, center);
      townPolygonMap.set(name, polygon);
      if (this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1) {
        let wmarker = L.circleMarker(center, {
          radius: 10,
          weight: 1,
          fillOpacity: 0,
          color: "#e6d273",
        });
        wmarker.bindLabel(feature.properties.NAME, {
          noHide: true,
          clickable: true,
          offset: [-25, 10],
        });
        wmarker.addTo(map2DViewer.groups["浦东新区_label"]);
        let circle1 = L.circleMarker(center, {
          radius: 8,
          weight: 1,
          fillOpacity: 0,
          color: "#e6d273",
        }).addTo(map2DViewer.groups["浦东新区_polygon"]);
        let circle2 = L.circleMarker(center, {
          radius: 5,
          weight: 1,
          fillOpacity: 1,
          color: "#e6d273",
        }).addTo(map2DViewer.groups["浦东新区_polygon"]);
      }
    },
    latLngsToReverse: function (latlngsAry) {
      var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
      if (typeof tempLatlngsAry[0] != "object") {
        // tempLatlngsAry[0] -= 0.1915;
        return tempLatlngsAry.reverse();
      } else {
        for (var i = 0, l = tempLatlngsAry.length; i < l; i++) {
          tempLatlngsAry[i] = this.latLngsToReverse(tempLatlngsAry[i]);
        }
      }
      return tempLatlngsAry;
    },
    getColor(name) {
      if (townData.A.indexOf(name) > -1) {
        return "#e565ff";
      } else if (townData.B.indexOf(name) > -1) {
        return "#0055ff";
      } else if (townData.C.indexOf(name) > -1) {
        return "#00ffd5";
      } else {
        return "#00000032";
      }
    },
    /**
     * 获取图层信息 -- 所有模型和预设模型
     * @geometry 字符串格式的geojson数据
     * @cid columnId
     * @color 随机色
     * @uniqueId label_columnId
     * @mainType  所有图层/预设模型
     * @sourceType 土地资源/林地资源/生态资源/水资源/全部
     * @defaultStatus 当前疑点图斑的状态 -- 未标记，疑点，非疑点
     * @modelId -- modelId
     * @columnId -- columnId
     */
    addSinglePolygon(
      geometry,
      cid,
      color,
      uniqueId,
      mainType,
      sourceType,
      defaultStatus,
      modelId,
      columnId
    ) {
      let uniqueIdList = [];
      if (this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId]) {
        uniqueIdList =
          this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId];
      }

      let singlePolygonItem = {
        uniqueId: uniqueId,
        geometry: geometry,
        cid: cid,
        color: color,
      };
      uniqueIdList.push(singlePolygonItem);
      this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId] =
        uniqueIdList;
      // 当前数据坐标系为WGS84
      let targetGeometry = JSON.parse(geometry).geometry;
      // 预设模型与所有图层层级不同
      let coord = targetGeometry.coordinates;
      let coordinates = publicFun.latLngsToReverse(coord);
      let polygon = L.polygon(coordinates, {
        color: color,
        weight: 3,
        fillColor: color,
        opacity: 1,
        fillOpacity: 0,
      }).addTo(map2DViewer.analysisGroups[uniqueId]);

      polygon.on("click", (e) => {
        // 鼠标点击图版高亮提示逻辑
        // 首先恢复上一个图版
        if (
          this.$store.state.map2DViewerPolygonsCid.newCid &&
          map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid]
        ) {
          map2DViewer.polygons[
            this.$store.state.map2DViewerPolygonsCid.newCid
          ].setStyle({
            color: this.$store.state.map2DViewerPolygonsCid.oldColor,
            fillOpacity: 0,
          });
        }
        // 判断是否是重复点击，不是的话高亮，是的话不操作。
        if (cid != this.$store.state.map2DViewerPolygonsCid.newCid) {
          this.$store.state.map2DViewerPolygonsCid = {
            newCid: cid,
            oldColor: color,
          };
          polygon.setStyle({
            color: "red",
            fillColor: "red",
            fillOpacity: 0.35,
          });
        } else {
          this.$store.state.map2DViewerPolygonsCid = {
            newCid: null,
            oldColor: null,
          };
        }

        let geojsonData = geometry;
        // 所有图层下的疑点图层 -- 常规展示
        if (geojsonData) {
          if (mainType === "预设模型") {
            let geoProperties = JSON.parse(geojsonData).properties;
            this.auditRefTableObj = {
              镇域名称: geoProperties["镇域名称"] || "--",
              "面积(平方米)": geoProperties["面积"] || "--",
              图层构成: geoProperties["图层构成"] || "--",
              性质: geoProperties["性质"] || "--",
            };
            this.defaultStatus = defaultStatus;

            this.$refs.auditRef.$nextTick(() => {
              this.currentCid = cid;
              this.currentProperties = geojsonData;
              this.currentSourceType = sourceType;
              this.currentModelId = modelId;
              this.currentColumnId = columnId;
              let domItem = this.createAuditDiv(
                cid,
                geojsonData,
                sourceType,
                modelId,
                columnId
              );
              this.auditPopupShow = true;
              this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
                .setLatLng(e.latlng)
                .setContent(domItem);
              this.auditPopupShow = false;
              this.popup.openOn(map2DViewer.map);
            });
          } else {
            let geoProperties = JSON.parse(geojsonData).properties;
            this.tableObj = {
              镇域名称: geoProperties["镇域名称"] || "--",
              "面积(平方米)": geoProperties["面积"] || "--",
              土地类型: geoProperties["土地类型"] || "--",
              图斑编号: geoProperties["图斑编号"] || "--",
            };

            this.$refs.normalRef.$nextTick(() => {
              let domItem = this.createNormalDiv(cid, geojsonData, sourceType);
              this.normalAttrPopupShow = true;
              this.normalPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
                .setLatLng(e.latlng)
                .setContent(domItem);
              this.normalAttrPopupShow = false;
              this.normalPopup.openOn(map2DViewer.map);
            });
          }
        }
      });
      map2DViewer.polygons[cid] = polygon;
    },

    deleteSinglePolygon(polygon) {
      map2DViewer.map.removeLayer(polygon);
    },
    // 综合分析 - 图层显示
    deleteGroupFromMap(uniqueId) {
      if (map2DViewer.analysisGroups[uniqueId]) {
        map2DViewer.map.removeLayer(map2DViewer.analysisGroups[uniqueId]);
      }
    },
    //综合分析 - 标记疑点 - 删除面
    deletePolygonLayer(layer) {
      map2DViewer.polygons[layer].forEach((polygon) => {
        map2DViewer.map.removeLayer(polygon);
      });
    },

    drawPoints(data) {
      if (!map2DViewer.myLabels[`label_${data.id}`]) {
        let point = L.marker(data.coord, {
          opacity: 1,
        }).addTo(map2DViewer.groups["我的标记图层组"]);
        map2DViewer.myLabels[`label_${data.id}`] = point;
      }
    },
    drawLine(data, color) {
      if (!map2DViewer.myLabels[`label_${data.id}`]) {
        let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
        let polyline = L.polyline(coordinates, {
          color: color,
          weight: 3,
          fillOpacity: color,
          opacity: 1,
          fillOpacity: 0.4,
        }).addTo(map2DViewer.groups["我的标记图层组"]);
        // zoom the map to the polyline
        map2DViewer.myLabels[`label_${data.id}`] = polyline;
      }
    },
    drawPolygon(data, color) {
      if (!map2DViewer.myLabels[`label_${data.id}`]) {
        let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
        let polygon = L.polygon(coordinates, {
          color: color,
          weight: 3,
          fillOpacity: color,
          opacity: 1,
          fillOpacity: 0.4,
        }).addTo(map2DViewer.groups["我的标记图层组"]);

        map2DViewer.myLabels[`label_${data.id}`] = polygon;
      }
    },

    drawCircle(data, color) {
      if (!map2DViewer.myLabels[`label_${data.id}`]) {
        let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
        if ((coordinates.length = 2)) {
          let from = turf.point(coordinates[0].reverse());
          let to = turf.point(coordinates[1].reverse());
          let options = { units: "kilometers" };
          let distance = turf.distance(from, to, options);
          distance = parseFloat(distance * 1000).toFixed(6);
          let circle = L.circle(coordinates[0].reverse(), {
            color: color,
            weight: 3,
            fillOpacity: color,
            opacity: 1,
            fillOpacity: 0.4,
            radius: Number(distance),
          }).addTo(map2DViewer.groups["我的标记图层组"]);
          map2DViewer.myLabels[`label_${data.id}`] = circle;
        }
      }
    },
    /**
     * 综合分析 -- 我的标记 -- 绘制单一几何体方法
     * @type 判断需要绘制的几何体类型
     */
    drawGeometry(type, data) {
      let color = "#ff0000";
      switch (type) {
        case "点":
          this.drawPoints(data);
          break;
        case "线":
          this.drawLine(data, color);
          break;
        case "面":
          this.drawPolygon(data, color);
          break;
        case "圆":
          this.drawCircle(data, color);
          break;
      }
    },
    deleteGeometry(geometry) {
      if (geometry) {
        geometry.removeFrom(map2DViewer.map);
      }
    },
  },
};
</script>
<style lang="less" scoped>
#map2DViewer {
  position: absolute;
  width: 140%;
  height: calc(147% - 2px);
  background-color: rgb(0, 47, 71);
  z-index: 1;
  top: -220px;
  left: -400px;
  scale: 0.62;
}
</style>