web_sh_audit/src/components/map/MapHolder.vue

<template>
  <div id="map2DViewer">
    <!-- 特殊地图属性弹窗 -- 有审计功能 -->
    <CaseAuditPopup v-show="auditPopupShow" :tableObj="auditRefTableObj" ref="auditRef" />
    <!-- 通用地图属性弹窗 -- 无审计功能 -->
    <NormalAttrPopup v-show="normalAttrPopupShow" :tableObj="tableObj" ref="normalRef" />
    <LabelCasePopup v-show="labelDetailsPopupShow" ref="labelRef" />
    <BasemapChange />
  </div>
</template>
<script>
import publicFun from "@/utils/publicFunction.js";
import transformCoord from "@/utils/coordinate";
import { get } from "@/utils/request";
import { streetLocation, 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";
import BasemapChange from "@/components/map/BasemapChange.vue";
import coordinate from "@/utils/coordinate.js";
import { nextTick } from "vue";
export default {
  name: "MapHolder",
  components: {
    CaseAuditPopup,
    NormalAttrPopup,
    LabelCasePopup,
    BasemapChange
  },
  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,
      // 标记疑点
      currentLabelCid: null,
      currentLabelHtml: null,
      // 疑点审计的保存后的疑点状态集合
      caseStatusMap: new Map(),
      tableObj: {
        镇域名称: "--",
        面积: "--",
        土地类型: "--",
        图斑编号: "--"
      },
      auditRefTableObj: {
        镇域名称: "--",
        面积: "--",
        图层构成: "--",
        性质: "--"
      }
    };
  },
  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.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
    });
  },
  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) {
      // console.log(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) {
            // console.log(i, "图层名");
            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: {
    // 开始标记疑点事件
    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`).remove();
            }
          });
          // console.log("呈现我的模型的几何数据");
        }
        return div;
      }
    },
    /**
     * 有审计功能的地图弹窗
     * @str
     * @properties
     * @sourceType
     */
    createAuditDiv(str, geojsonData, sourceType) {
      // 根据ref获取组件的dom元素
      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));
            }
          }

          // 法律法规点击事件
          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);
                  break;
              }
            });
          }
        }, 0);
        return div;
      }
    },
    /**
     * 标记疑点完成时保存描述信息的弹窗
     * @str -- id
     * @coord -- 坐标信息
     * @data -- 其余数据
     * @geoType -- 几何体类型
     */
    createLabelDiv(str, coord, data, geoType) {
      // console.log(str, coord, data, geoType, "createLabelDiv");
      // console.log(str, "label - str");
      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;
        $(() => {
          console.log($(`#${str}_id textarea`).val(), "textarea");
          $(`#${str}_id`).css("height", "100%");

          $(`#${str}_id input`).click(e => {
            console.log(e.target.defaultValue);
            switch (e.target.defaultValue) {
              case "取消":
                this.cancelBtnEvent();
                break;
              case "保存":
                this.saveBtnEvent(str, data, geoType);

                break;
            }
          });
        });
        return div;
      }
    },
    modifyBtnEvent() {
      console.log("用户点击了地图中的修改按钮！");
    },
    confirmBtnEvent(str) {
      // isTrue
      let selectVal = $(`#${str}_id .center-table-item-special select`).val();
      this.caseStatusMap.set(str, selectVal);
      let obj = {
        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: 510,
        modelId: 118,
        content: JSON.stringify(obj)
      };
      this.$Post(this.urlsCollection.updateContent, modifyParams).then(res => {
        if (res.code === 200) {
          this.$message.success("数据修改成功");
          map2DViewer.map.closePopup();
        }
      });
    },
    cancelBtnEvent() {
      map2DViewer.map.closePopup();
      this.labelPopup = null;
      this.popup = null;
    },

    /**
     * 点击保存事件时保存点数据
     * @str
     * @data -- 绘制几何体时获取的数据；
     * @geoType 几何体类型 类型: 0 点；1 线；2 面；3 矩形；4 圆形；5 其他；
     */
    saveBtnEvent(str, data, geoType) {
      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 geometry = publicFun.generateGeoJSON(title, des, geoType, coordinates, geoName);
          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);
        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));
        }, 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.labelDetailsPopupShow = true;
              this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
                .setLatLng(newCoord)
                .setContent(this.createLabelDiv("label", coord, data, geoType))
                .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"
        });
      }
    },

    mapInit: function () {
      var 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: [
            132.2919312505292, 52.91677250021167, 26.458386250105836, 13.229193125052918, 5.291677250021167, 2.6458386250105836,
            1.3229193125052918, 0.5291677250021167, 0.26458386250105836, 0.13229193125052918
          ],
          origin: [-66000, 75000],
          bounds: L.bounds([-65000, -76000], [75000, 72000])
        }
      );

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

      //添加默认图层
      let guid = publicFun.buildGuid("baseLayer");
      let layer = L.esri
        .tiledMapLayer({
          // url:
          // "http://10.242.182.25:9099/8639b723819f4b63940b93cc28e1b3ed/operation?APPID=00d494ff5d7b27fae263410627ba52bd&AUTHKEY=zCcyaym9MSkH1FT3&ClientId=com.pudong.002456271.00d494ff5d7b27fae263410627ba52bd&OperationCode=com.pudong.esb.catalog.8639b723819f4b63940b93cc28e1b3ed.operation&AccessKey=lUaEMxqqhZKLSImGuP/Ergx47orYVyIqHVgxfyGpIurKAy9kdq5uU1cWuTuIXeOM"
          // systemConfig.mapService +
          // "?servertype=Street_Purplish_Blue&token=" +
          // systemConfig.token,
          // url: "http://aimap.pudong.sh:5236/zjmap/reproduction-service/maps/rest/services/sat-2018s2/proxy?AccessKey=lUaEMxqqhZKLSImGuP/Ergx47orYVyIqHVgxfyGpIurKAy9kdq5uU1cWuTuIXeOM",
          // http://aimap.pudong.sh:5236/zjmap/reproduction-service/maps/rest/services/sat-2019s4/proxy?AccessKey=lUaEMxqqhZKLSImGuP/Ergx47orYVyIqHVgxfyGpIurKAy9kdq5uU1cWuTuIXeOM
          // url: "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver",
          tileSize: 512,
          url:systemConfig.blueBlackMap
        })
        .addTo(map2DViewer.map);
      // layer.setStyle({opacity:0,fillOpacity:0})
      map2DViewer.layers["darkmap"] = layer;

      // 加载天地图
      let imageryLayer = L.tileLayer(systemConfig.imageryLayer);
      map2DViewer.layers["imagery"] = imageryLayer;
    },
    // 传入街道参数，重新渲染区域图层
    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", "") || this.$ifMenu("2", "")) &&
        !map2DViewer.map.hasLayer(map2DViewer.groups["浦东新区_polygon"])
      ) {
        this.getJSonDataToStreet("", "");
        // 切换到首页时需定位到当前图层
        if (this.$store.state.homeSpecialTown === "全部") {
          this.setView(
            townLocationMap.get(this.$store.state.homeSpecialTown),
            10
          );
        } 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) {
      // coord = publicFun.latLngsCorrection(coord);
      let center = L.latLng(coord[0], coord[1]);
      map2DViewer.map.setView(center, zoom);
    },
    renderPolygon: function (feature) {
      let center = turf.center(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);
      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 土地资源/林地资源/生态资源/水资源/全部
     */
    addSinglePolygon(geometry, cid, color, uniqueId, mainType, sourceType) {
      let uniqueIdList = [];
      if (this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId]) {
        uniqueIdList = this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId];
      }

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

      polygon.on("click", e => {
        let geojsonData = geometry;
        // 所有图层下的疑点图层 -- 常规展示
        if (geojsonData) {
          if (mainType === "预设模型") {
            let geoProperties = JSON.parse(geojsonData).properties;
            this.auditRefTableObj = {
              镇域名称: geoProperties["镇域名称"] || "--",
              面积: geoProperties["面积"] || "--",
              图层构成: geoProperties["图层构成"] || "--",
              性质: geoProperties["性质"] || "--"
            };
            this.$refs.auditRef.$nextTick(() => {
              this.currentCid = cid;
              this.currentProperties = geojsonData;
              this.currentSourceType = sourceType;
              let domItem = this.createAuditDiv(cid, geojsonData, sourceType);
              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);
            });
            // this.$refs.normalRef.$nextTick(() => {
            //     if (mainType === "所有图层") {
            //       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);
            //     }
            //     // 预设模型下图层 -- 需要考虑审计功能
            //     if (mainType === "预设模型") {
            //       let domItem = this.createAuditDiv(cid, geojsonData, sourceType);
            //       this.auditPopupShow = true;
            //       this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
            //         .setLatLng(e.latlng)
            //         .setContent(domItem);
            //       this.auditPopupShow = false;
            //       this.popup.openOn(map2DViewer.map);
            //       this.currentCid = cid;
            //       this.currentProperties = geojsonData;
            //       this.currentSourceType = sourceType;
            //     }
            //     // 我的模型图层 -- 无疑点审计功能，无法律法规选项
            //     if (mainType === "我的模型") {
            //       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);
            //     }
            // });
          }
        }
      });
    },
    // 综合分析 - 图层绘制面
    // addPolygonLayer(data, cid, color) {
    //   data.map(feature => {
    //     let polygonData = JSON.parse(JSON.stringify(feature));
    //     let coordinates = polygonData.geometry.coordinates[0];
    //     let infos = polygonData.properties;
    //     let polygon = L.polygon(coordinates, {
    //       color: color,
    //       weight: 3,
    //       fillColor: color,
    //       opacity: 1,
    //       fillOpacity: 0.4
    //     }).addTo(map2DViewer.map);
    //     map2DViewer.polygons[`${cid}_layer`].push(polygon);
    //     polygon.infos = infos;
    //     polygon.on("click", e => {
    //       // console.log(e, "polygon");
    //       this.auditPopupShow = true;
    //       // console.log(e.latlng, "获取当前弹窗坐标111");

    //       this.popup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(this.createAuditDiv(cid));
    //       // .openOn(map2DViewer.map);
    //       this.auditPopupShow = false;
    //       this.popup.openOn(map2DViewer.map);
    //       this.currentCid = cid;
    //     });
    //   });
    // },
    deleteSinglePolygon(polygon) {
      map2DViewer.map.removeLayer(polygon);
    },
    // 综合分析 - 图层显示
    deleteGroupFromMap(uniqueId) {
      if (map2DViewer.analysisGroups[uniqueId]) {
        map2DViewer.map.removeLayer(map2DViewer.analysisGroups[uniqueId]);
      }
    },
    //综合分析 - 标记疑点 - 删除面
    deletePolygonLayer(layer) {
      console.log(layer, "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: 100%;
  height: calc(100% - 60px);
  background-color: #003452;
  z-index: 1;
  top: 60px;
  left: 0px;
}
</style>