web_sh_audit/src/components/map/MapHolder.vue

<template>
  <div id="map2DViewer">
    <CaseAuditPopup v-show="auditPopupShow" ref="auditRef" />
    <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 LabelCasePopup from "@/components/popup/LabelCasePopup.vue";
import BasemapChange from "@/components/map/BasemapChange.vue";
export default {
  name: "MapHolder",
  components: { CaseAuditPopup, LabelCasePopup, BasemapChange },
  data() {
    return {
      town: "祝桥镇,南汇新城镇,川沙新镇,老港镇,惠南镇,航头镇,泥城镇,书院镇,新场镇,大团镇,唐镇,曹路镇,宣桥镇,张江镇,合庆镇,周浦镇,康桥镇,三林镇,高桥镇,高东镇,金桥镇,北蔡镇,万祥镇,高行镇",
      auditPopupShow: false,
      labelDetailsPopupShow: false,
      auditPopupStatus: "normal",
      popup: null,
      labelPopup: null,
      // 疑点审计
      currentCid: null,
      currentHtml: null,
      currentProperties: null,
      // 标记疑点
      currentLabelCid: null,
      currentLabelHtml: null,
      tableObj: {},
      // 疑点审计的保存后的疑点状态集合
      caseStatusMap: new Map()
    };
  },
  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();
    },
    // 常规图层弹窗
    createAuditDiv(str, properties) {
      // 根据ref获取组件的dom元素
      this.currentHtml = this.$refs.auditRef.$el.innerHTML;
      this.$refs.auditRef.tableObj = properties;
      if (this.currentHtml) {
        let div = document.createElement("div");
        div.id = str + "_id";
        div.className = "case-audit";
        // 动态创建div后赋值模板样式
        div.innerHTML = this.currentHtml;
        $(() => {
          if (properties) {
            $(`#${str}_id .center-table-item-normal .leftcell`).each((index, domEle) => {
              $(`#${str}_id .center-table-item-normal .leftcell`).eq(index).text(Object.keys(properties)[index]);
            });
            $(`#${str}_id .center-table-item-normal .rightcell`).each((index, domEle) => {
              $(`#${str}_id .center-table-item-normal .rightcell`).eq(index).text(Object.values(properties)[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`).click(e => {
              console.log(e, "显示疑点相关的弹窗");
              this.$store.state.lawPopupShow = true;
            });
          }
          // input添加点击事件
          if ($(`#${str}_id input`)[1]) {
            $(`#${str}_id input`).click(e => {
              switch (e.target.defaultValue) {
                case "取消":
                  this.cancelBtnEvent();
                  break;
                case "确认":
                  this.confirmBtnEvent(str);
                  break;
              }
            });
          }
        });
        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);
                // console.log(str, coord, data);
                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: 47,
        modelId: 49,
        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 coordinates = [data.points];
        let geometry = publicFun.generateGeoJSON(title, des, geoType, coordinates);

        let params = new FormData();

        params = {
          geojson: JSON.stringify(geometry),
          type: geoType,
          userId: Number(localStorage.getItem("USER_ID")),
          sourceId: 0
        };
        this.$Post(this.urlsCollection.addConllection, params).then(
          res => {
            if (res.code == 200) {
              console.log(res, "添加标记成功");
              map2DViewer.map.closePopup();
              // 根据用户获取标记
              let paramData = new FormData();
              paramData = {
                userId: Number(localStorage.getItem("USER_ID")),
                sourceId: 0,
                pageSize: 10
              };
              this.$Post(this.urlsCollection.selectByUser, paramData).then(userRes => {
                if (userRes.code === 200) {
                  // console.log(userRes, "获取我的标记疑点数据");

                  if (userRes.content.length > 0) {
                    this.$store.state.myLabelPointsArr = [];
                    this.$store.state.myLabelPointsArr = userRes.content.map(v => {
                      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));
          // .openOn(map2DViewer.map);
        }, 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:2401",
      //   "+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: [
      //       529.1666666666666, 264.5833333333333, 132.29166666666666, 52.916666666666664, 26.458333333333332,
      //       13.229166666666666, 5.291666666666666, 2.645833333333333, 1.3229166666666665, 0.5291666666666666,
      //       0.2645833333333333, 0.13229166666666664
      //     ],
      //     origin: [-66000, 75000],
      //     bounds: L.bounds([-65000, -76000], [75000, 72000])
      //   }
      // );

      map2DViewer.map = L.map("map2DViewer", {
        // crs: crs,
        // center: [31.074472887639914, 121.72521988031804],
        // zoom: 1,
        // minZoom: 1,
        // maxZoom: 12
        attributionControl: false,
        zoomControl: false,
        minZoom: 10,
        maxZoom: 16
      }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);

      //添加默认图层
      let guid = publicFun.buildGuid("baseLayer");
      let layer = L.esri
        .tiledMapLayer({
          url:
            // systemConfig.mapService +
            // "?servertype=Street_Purplish_Blue&token=" +
            // systemConfig.token,

            // url: "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver",
            // tileSize: 512
            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 => {
          if (this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1) {
            this.renderPolygon(feature);
          }
        });
      });
    },
    // 可视化单一的镇域面
    getSingleJsonData(name) {},
    // 默认获取浦东新区全区的图层数据
    getJSonData() {
      if (!map2DViewer.map) {
        this.mapInit();
      } else if (
        // 切换到首页和疑点筛查页且图层不存在时重新渲染区域图
        (this.$ifMenu("1", "") || this.$ifMenu("2", "")) &&
        !map2DViewer.map.hasLayer(map2DViewer.groups["浦东新区_polygon"])
      ) {
        this.getJSonDataToStreet("", "");
      } 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) {
      // console.log(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") {
        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";
      }
    },
    addSinglePolygon(geometry, cid, color, uniqueId) {
      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;
      let coordinates = "";

      if (uniqueId === "一般耕地_47") {
        let coord = JSON.parse(geometry).geometry.coordinates[0];
        coordinates = coord.map(v => {
          return [v[1], v[0]];
        });
      } else {
        coordinates = JSON.parse(geometry).geometry.coordinates[0];
        coordinates = coordinates.map(v => {
          let data = transformCoord.shcj_to_wgs84(v[1], [v[0]]);
          data = [data[1], data[0]];
          return data;
        });
      }
      // if(){

      // }
      let properties = JSON.parse(geometry).properties;
      // 纬经度
      // [22474.568725585938, -16689.47381591797]
      // x,y转换
      let polygon = L.polygon(coordinates, {
        color: color,
        weight: 3,
        fillColor: color,
        opacity: 1,
        fillOpacity: 0.4
      }).addTo(map2DViewer.analysisGroups[uniqueId]);

      polygon.on("click", e => {
        this.auditPopupShow = true;
        this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
          .setLatLng(e.latlng)
          .setContent(this.createAuditDiv(cid, properties));
        this.auditPopupShow = false;
        this.popup.openOn(map2DViewer.map);
        this.currentCid = cid;
        this.currentProperties = properties;
      });
    },
    // 综合分析 - 图层绘制面
    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) {
      this.setView(data.coord, 16);
      if (!map2DViewer.myLabels[`label_${data.id}`]) {
        // console.log("开始绘制点", data);
        let point = L.marker(data.coord, {
          opacity: 1
        }).addTo(map2DViewer.map);
        map2DViewer.myLabels[`label_${data.id}`] = point;
      }
    },
    drawLine(data, color) {
      if (!map2DViewer.myLabels[`label_${data.id}`]) {
        // console.log("开始绘制线", data);
        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.map);
        // zoom the map to the polyline
        map2DViewer.map.fitBounds(polyline.getBounds());
        map2DViewer.myLabels[`label_${data.id}`] = polyline;
      } else {
        map2DViewer.map.fitBounds(map2DViewer.myLabels[`label_${data.id}`].getBounds());
      }
    },
    drawPolygon(data, color) {
      if (!map2DViewer.myLabels[`label_${data.id}`]) {
        console.log("开始绘制面", data);
        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.map);
        map2DViewer.map.fitBounds(polygon.getBounds());
        map2DViewer.myLabels[`label_${data.id}`] = polygon;
      } else {
        map2DViewer.map.fitBounds(map2DViewer.myLabels[`label_${data.id}`].getBounds());
      }
    },

    drawCircle(data, color) {
      if (!map2DViewer.myLabels[`label_${data.id}`]) {
        console.log("开始绘制圆", data);
        let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
        // console.log(coordinates);
        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)), console.log(distance, "圆的半径");
          let circle = L.circle(coordinates[0].reverse(), {
            color: color,
            weight: 3,
            fillOpacity: color,
            opacity: 1,
            fillOpacity: 0.4,
            radius: Number(distance)
          }).addTo(map2DViewer.map);
          console.log(circle);
          map2DViewer.map.fitBounds(circle.getBounds());
          map2DViewer.myLabels[`label_${data.id}`] = circle;
        }
      } else {
        map2DViewer.map.fitBounds(map2DViewer.myLabels[`label_${data.id}`].getBounds());
      }
    },
    /**
     * 综合分析 -- 我的标记 -- 绘制单一几何体方法
     * @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) {
        console.log(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>