JiangningUrbanManagePc/src/views/bigScreen/map/index.vue

<template>
  <div class="map-main">
    <div id="showMap" class="showMap"></div>
    <div class="left-bg">
      <div class="bgt"></div>
    </div>
    <transition name="left-animationMap">
      <div class="map-left" v-if="leftAnimationData">
        <map-left :personLine='personLine'></map-left>
      </div>
    </transition>

    <img
      :src="
        leftAnimationData
          ? require('@/assets/images/action-left.png')
          : require('@/assets/images/action-right.png')
      "
      alt=""
      :class="!leftAnimationData ? 'left-image2' : 'left-image'"
      @click="leftAnimation()"
    />
    <div
      class="middle-top-left"
      :class="!leftAnimationData ? 'middle-top-left2' : 'middle-top-left'"
    >
      <div class="input-keyword">
        <el-input placeholder="请输入关键字" v-model="input">
          <i slot="suffix" class="el-icon-search" @click="search"></i>
        </el-input>
      </div>
      <div class="laser-positioning">
        <span>地图扎点</span>
        <img src="@/assets/images/positioning.png" alt="" />
      </div>
      <div class="creation-task">
        <span>任务创建</span>
        <img src="@/assets/images/createdTask.png" alt="" />
      </div>
    </div>
    <div
      class="middle-bottom-left"
      :class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'"
    >
      <div class="list" @click="changeMap(1)">
        <div class="leftbg" :class="actionMap == 1 ? 'action-map' : ''">
          <img src="@/assets/images/icon1.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 1">
          <span>执法人员</span>
        </div>
      </div>
      <div class="list" @click="changeMap(2)">
        <div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
          <img src="@/assets/images/icon2.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 2">
          <span>普通事件</span>
        </div>
      </div>
      <div class="list" @click="changeMap(2)">
        <div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
          <img src="@/assets/images/icon3.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 2">
          <span>重点事件</span>
        </div>
      </div>
      <div class="list" @click="changeMap(3)">
        <div class="leftbg" :class="actionMap == 3 ? 'action-map' : ''">
          <img src="@/assets/images/icon4.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 3">
          <span>执法车辆</span>
        </div>
      </div>
      <div class="list" @click="changeMap(4)">
        <div class="leftbg" :class="actionMap == 4 ? 'action-map' : ''">
          <img src="@/assets/images/icon5.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 4">
          <span>监控视频</span>
        </div>
      </div>
      <div class="list" @click="changeMap(5)">
        <div class="leftbg" :class="actionMap == 5 ? 'action-map' : ''">
          <img src="@/assets/images/icon6.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 5">
          <span>沿街商铺分布</span>
        </div>
      </div>
    </div>
    <transition name="right-animationMap">
      <div class="map-right" v-if="rightAnimationData">
        <map-right :quyuData="quyuData" :weilanData="weilanData" :luduanData="luduanData" :wanggeData="wanggeData"></map-right>
      </div>
    </transition>

    <img
      :src="
        rightAnimationData
          ? require('@/assets/images/action-right.png')
          : require('@/assets/images/action-left.png')
      "
      alt=""
      :class="!rightAnimationData ? 'right-image2' : 'right-image'"
      @click="rightAnimation()"
    />

    <div
      class="middle-bottom-right"
      :class="
        !rightAnimationData ? 'middle-bottom-right2' : 'middle-bottom-right'
      "
    >
      <div class="btn-action">
        <span :class="action == 1 ? 'action' : ''" @click="actionBtn(1)"
          >电子地图</span
        >
        <span :class="action == 2 ? 'action' : ''" @click="actionBtn(2)"
          >卫星地图</span
        >
      </div>
    </div>
    <div class="right-bg">
      <div class="bgt"></div>
    </div>
    <div class="bottom-bg">
      <div class="bgt"></div>
    </div>
    <personage-track ref="personageTrack"></personage-track>
    <crew-assign ref="crewAssign"></crew-assign>
    <video-wall ref="videoWall"></video-wall>
    <shop ref="shop" width="50%" title="商铺详情查看" />
  </div>
</template>
<script>
import L from "leaflet";
//引入坐标系转换插件
// import "proj4";
// import "proj4leaflet";
//引入中国底图插件
import "@/utils/lib/leaflet.ChineseTmsProviders.js";
//引入坐标系偏移插件
// import "@/utils/lib/leaflet.mapCorrection.min.js";//
import "@/utils/lib/leaflet-tilelayer-colorizr.js";
// import zhifarenyuan from "@/utils/mapJson/zhifarenyuan.json"
// import shijianfenbu from "@/utils/mapJson/shijianfenbu.json"
// import zhifacheliang from "@/utils/mapJson/zhifacheliang.json"
// import jiankongshipin from "@/utils/mapJson/jiankongshipin.json"
import point from "@/utils/mapJson/point.json";

import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
import detachment1 from "@/utils/mapJson/detachment1.json";
import detachment2 from "@/utils/mapJson/detachment2.json";
import detachment3 from "@/utils/mapJson/detachment3.json";
import detachment4 from "@/utils/mapJson/detachment4.json";

// import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
// import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";


import mapLeft from "../components/mapLeftContent.vue";
import mapRight from "../components/mapRightContent.vue";
// import mapCentre from "../components/mapCentre.vue"
// 弹窗
import personageTrack from "../../components/personagetrack/index.vue";
import crewAssign from "../../components/crewAssign/index.vue";
import videoWall from "../../components/videoWall/index.vue";
import shop from "../../components/shop/index.vue";

// import jiangningwangge from "@/utils/data/江宁开发区网格.json";

import weilan from "@/utils/data/围栏1.json";

import { regionalsettings, roadsetting, fence, getDeviceList, levelQywg } from "@/api/bigScreenApi"

export default {
  name: "myMap",
  components: {
    mapLeft,
    mapRight,
    personageTrack,
    crewAssign,
    videoWall,
    shop,
  },
  data() {
    return {
      globalMap: null,
      basemap: null,
      townCenter: [31.863971, 118.835418],
      myZoom: 12,
      mapLayers: {
        mapLayer1: null,
        mapLayer2: null,
        mapLayer3: null,
        mapLayer4: null,
        mapLayer5: null,
        mapLayer6: null,
        mapLayer7: null,
        mapLayer8: null,
      },
      mapEvent: {
        mapEvent1: null,
        mapEvent2: null,
        mapEvent3: null,
        mapEvent4: null,
      },
      mapLayer1: null,
      mapLayer2: null,
      mapLayer3: null,
      mapLayer4: null,
      mapLayer5: null,
      input: "", // 输入框的值
      actionMap: 1, // 默认选中执法人员地图
      action: 1, // 切换执法人员/车辆/事件分类/监控视频/沿街商铺分布 控制的值
      mypoint: {},
      leftAnimationData: true,
      rightAnimationData: true,
      electronicMap: null,            // 电子地图
      satelliteMap: null,             // 卫星地图
      satelliteNoteMap:null,          // 卫星地图注记
      wanggeData: null,                // 区域网格数据
      quyuData: null,                  // 重点区域数据
      weilanData: null,                // 考勤围栏数据
      luduanData: null,                // 重点路段
      personLine: [],                  // 在线人员情况
    };
  },
  methods: {
    initMap() {
      this.globalMap = L.map("showMap", {
        center: this.townCenter, // 地图中心[纬度，经度]
        zoom: this.myZoom, // 地图层级
        zoomControl: false,
        attributionControl: false, // 右下角leaflet图标
        doubleClickZoom: false, // 双击放大
        scrollWheelZoom: true, // 滚轮放大
        dragging: true,
        renderer: L.svg(),
      });

      // 电子底图/百度
      // this.basemap = L.tileLayer(
      //   "https://api.mapbox.com/styles/v1/sharealex/cllg9dw1i00iz01oj9zmu6iv7/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
      //   {
      //     maxZoom: 18,
      //     minZoom: 9,
      //     subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
      //   }
      // ).addTo(this.globalMap);

      // this.basemap = L.tileLayer(
      //   "/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      //   {
      //     maxZoom: 18,
      //     minZoom: 9,
      //     subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
      //   }
      // ).addTo(this.globalMap);

      //L.tileLayer
      // .colorizr(
      //   "/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      //   {
      //    maxZoom: 18,
      //    minZoom: 3,
      //   colorize: function (pixel) {
      // 这个方法用来调整所有的图片上的rgb值，pixel是图片原有的rgb值
      //    pixel.r += 30;
      //     pixel.g += 30;
      //      pixel.b += 48;
      //     return pixel;
      //   },
      //   }
      //    )
      //   .addTo(this.globalMap);
      // 电子地图
      this.electronicMap = L.tileLayer
        .chinaProvider("GaoDe.Normal.Map", {
          maxZoom: 18,
          minZoom: 5,
          color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
        })
      // 卫星地图
      this.satelliteMap = L.tileLayer
        .chinaProvider("GaoDe.Satellite.Map", {
          maxZoom: 18,
          minZoom: 5,
          color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
        })
      // 卫星地图注记
      this.satelliteNoteMap = L.tileLayer
        .chinaProvider("GaoDe.Satellite.Annotion", {
          maxZoom: 18,
          minZoom: 5,
          color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
        })
      this.globalMap.addLayer(this.electronicMap)
      // L.tileLayer
      //   .chinaProvider("GaoDe.Satellite.Annotion", {
      //     maxZoom: 18,
      //     minZoom: 5,
      //   })
      //   .addTo(this.globalMap);

      this.globalMap.createPane("mapLayer1");
      this.globalMap.getPane("mapLayer1").style.zIndex = 501;
      this.globalMap.getPane("mapLayer1").style.pointerEvents = "none";

      this.globalMap.createPane("mapLayer2");
      this.globalMap.getPane("mapLayer2").style.zIndex = 502;
      this.globalMap.getPane("mapLayer2").style.pointerEvents = "none";

      this.globalMap.createPane("mapLayer3");
      this.globalMap.getPane("mapLayer3").style.zIndex = 502;
      this.globalMap.getPane("mapLayer3").style.pointerEvents = "none";

      this.globalMap.createPane("mapLayer4");
      this.globalMap.getPane("mapLayer4").style.zIndex = 502;
      this.globalMap.getPane("mapLayer4").style.pointerEvents = "none";

      this.globalMap.createPane("mapLayer5");
      this.globalMap.getPane("mapLayer5").style.zIndex = 502;
      this.globalMap.getPane("mapLayer5").style.pointerEvents = "none";

      this.globalMap.createPane("mapLayer6");
      this.globalMap.getPane("mapLayer6").style.zIndex = 502;
      this.globalMap.getPane("mapLayer6").style.pointerEvents = "none";

      this.globalMap.createPane("mapLayer7");
      this.globalMap.getPane("mapLayer7").style.zIndex = 503;
      this.globalMap.getPane("mapLayer7").style.pointerEvents = "none";

      this.globalMap.createPane("mapEvent1");
      this.globalMap.getPane("mapEvent1").style.zIndex = 504;
      this.globalMap.getPane("mapEvent1").style.pointerEvents = "none";

      this.mapEvent.mapEvent1 = L.featureGroup().addTo(this.globalMap);

      this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.globalMap);
      this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.globalMap);
      this.mapLayers.mapLayer3 = L.featureGroup().addTo(this.globalMap);
      this.mapLayers.mapLayer4 = L.featureGroup().addTo(this.globalMap);
      this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap);
      this.mapLayers.mapLayer6 = L.featureGroup().addTo(this.globalMap);
      this.mapLayers.mapLayer7 = L.featureGroup().addTo(this.globalMap);
      this.mapLayers.mapLayer8 = L.featureGroup().addTo(this.globalMap);

      this.globalMap.on("zoomend", (e) => {
        let zoom = this.globalMap.getZoom();
        console.log("层级：", zoom);
      });
      this.globalMap.on("click", (e) => {
        console.log("click：", e);
      });
      // this.addLayer2();
      this.addLayer1();
      this.getTem();
      // this.addLayer2();
      // this.addLayer3();
      // this.addLayer4();
      // this.addLayer5();
      this.addLayer6();         // 重点区域
      this.addLayer7();         // 重点路段

      this.addLayer8();         // 网格and围栏

      // 定位点 118.797442,32.087219 南京站   测试偏移量点位
      L.marker(L.latLng(31.96840071263104, 118.79808425903322), {
        icon: L.icon({
          iconUrl: require("../../../assets/images/3.png"),
          iconSize: [38, 43],
          iconAnchor: [22, 38],
        }),
      }).addTo(this.globalMap);
    },
    // 网格and围栏
    addLayer8() {
      // 网格
      levelQywg({ level: 1 }).then((res) => {
        this.wanggeData = res.data;
        res.data.forEach(element=>{
          let shapeStr = JSON.parse(element.shapeStr);
          let geojson = L.geoJSON(shapeStr.features[0], {
            pane: "mapLayer2",
            style: function (feature) {
              return {
                color: "#ffa500",
                weight: 3,
                fillColor: "#ffa500",
                fillOpacity: 0.3,
              };
            },
            onEachFeature: (feature, layer) => {
              // let text = feature.properties.name;
              // let bounds = layer._bounds;
              // let center = bounds.getCenter();
              let myIcon = L.divIcon({
                className: "land-name2",
                html: element.name,
                iconSize: [150, 24],
                iconAnchor: [75, 12],
              });
              // 多边形上的标记点;
              L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
                pane: "mapLayer3",
                icon: myIcon,
              }).addTo(this.mapLayers.mapLayer8);
            },
          });
        })
        console.log(res,'网格');
      })
      // .addTo(this.mapLayers.mapLayer8);

      // 加载围栏
      fence({ pageNum: 1, pageSize: 100 }).then(res=>{
        // console.log(res,'考勤围栏');
        this.weilanData = res.rows;
        res.rows.forEach(element=>{
          let shapeStr = JSON.parse(element.shapeStr);
          // 圆形围栏
          if(shapeStr.features[0].geometry.type == "Point") {
            let geojson2 = L.circle([shapeStr.features[0].geometry.coordinates[1], shapeStr.features[0].geometry.coordinates[0]], {
              radius: shapeStr.features[0].properties.radius,
              color: "#62E1FA",
              weight: 1,
              fillColor: "#62E1FA",
              fillOpacity: 0.3,
              pane: "mapLayer2"
            }).addTo(this.mapLayers.mapLayer8);
            let myIcon = L.divIcon({
              className: "land-name5",
              html: element.name,
              iconSize: [150, 24],
              iconAnchor: [75, 12],
            });
            // 多边形上的标记点;
            L.marker([shapeStr.features[0].geometry.coordinates[1], shapeStr.features[0].geometry.coordinates[0]], {
              pane: "mapLayer3",
              icon: myIcon,
            }).addTo(this.mapLayers.mapLayer8);

          } else if(shapeStr.features[0].geometry.type == "Polygon") {
            // 多边形围栏
            let geojson2 = L.geoJSON(shapeStr.features[0], {
              pane: "mapLayer2",
              style: function (feature) {
                return {
                  color: "#62E1FA",
                  weight: 1,
                  fillColor: "#62E1FA",
                  fillOpacity: 0.3,
                };
              },
              onEachFeature: (feature, layer) => {
                let text = feature.properties.name;
                let bounds = layer._bounds;
                let center = bounds.getCenter();
                let myIcon = L.divIcon({
                  className: "land-name5",
                  html: element.name,
                  iconSize: [150, 24],
                  iconAnchor: [75, 12],
                });
                // 多边形上的标记点;
                L.marker(center, {
                  pane: "mapLayer3",
                  icon: myIcon,
                }).addTo(this.mapLayers.mapLayer8);
              },
            }).addTo(this.mapLayers.mapLayer8);
          }
        })
      })
    },
    addLayer1() {
      this.mapLayers.mapLayer1.clearLayers();
      // this.mapLayers.mapLayer2.clearLayers()
      let geojson = L.geoJSON(
        jiangninggeo,
        {
          pane: "mapLayer1",
          style: function (feature) {
            return {
              color: "#00C5EC",
              weight: 1,
              fillColor: "rgba(64,175,255,0.4)",
              fillOpacity: 1,
            };
          },
        },
        { className: "jack-s" }
      ).addTo(this.mapLayers.mapLayer1);
      // this.addMark()
      // 获取json文件的中心位置
      this.mapLayer1 = geojson.getBounds();
      // 居中加载json文件
      this.globalMap.fitBounds(this.mapLayer1);
    },
    // 执法人员点位
    getTem(){
      this.personLine = [];
      getDeviceList({imei:'861316060217211'}).then(res=>{
        console.log('res0',res);
        let obj = [];
        if(res.data.obj) {
          res.data.obj.forEach(element => {
            if(element.status == 0) {
              // 离线
              obj.push(element)
              this.personLine.push(element);
            } else if(element.status == 1) {
              // 在线
              obj.push(element)
              this.personLine.push(element);
              console.log(this.personLine,'请求回来的在线情况');
            } else if(element.status == 9) {
              // 掉线
            }
          });
        } else {
          this.$modal.msgError('执法人员' + res.data.msg);
        }
        this.addMark(obj);
      })
    },
    getIcons(name,src){
      let icon = L.divIcon({
        className: 'divIcon-marker',
        html: `<div class="markers"><div class="marker-title">${name}</div><img src="${src}" /></div>`,
        iconSize: [100, 50],
      });
      return icon
    },
    addMark(obj) {
      this.mapEvent.mapEvent1.clearLayers();
      let ico1 = require("../../../assets/images/icon/icon1.png")
      // let ico1 = L.icon({
      //   iconUrl: require("../../../assets/images/icon/icon1.png"),
      //   iconSize: [52, 81],
      // });
      let ico2 = L.icon({
        iconUrl: require("../../../assets/images/icon/icon2.png"),
        iconSize: [44, 91],
      });
      let ico3 = L.icon({
        iconUrl: require("../../../assets/images/icon/icon3.png"),
        iconSize: [44, 91],
      });
      let ico4 = L.icon({
        iconUrl: require("../../../assets/images/icon/icon4.png"),
        iconSize: [45, 95],
      });
      let ico5 = L.icon({
        iconUrl: require("../../../assets/images/icon/icon5.png"),
        iconSize: [52, 81],
      });
      if (this.actionMap == 1) {
        obj.forEach((item,index)=>{
          let marker = L.marker(
            {
              lng: item.longitude,
              lat: item.latitude,
            },
            { icon: this.getIcons(item.userName,ico1) }
          )
            .bindPopup(
              `
            <div class="person-popup">
              <div class="person-title">
                <div class="title">人员信息</div>
                <div class="mask" id='monitoring${index}'></div>
              </div>
              <div class="person-main">
                <div class="person-info">
                  <div class="dot"></div>
                  <div class="name">李飞</div>
                  <div class="position">执法1队队员</div>
                </div>
                <div class="btns">
                  <div id='personClick${index}'>行程轨迹</div>
                  <div>附近队员</div>
                  <div>位置分享</div>
                  <div>任务派发</div>
                </div>
              </div>
            </div>
            `,
              {
                className: "popup-pc-person",
              }
            )
            .openPopup();
          marker.addTo(this.mapEvent.mapEvent1);
          this.markerClick(marker, index, item);
        })
      } else if (this.actionMap == 2) {

      } else if (this.actionMap == 3) {

      } else if (this.actionMap == 4) {

      } else if (this.actionMap == 5) {

      }
      point.features.map((item, index) => {
        // if (this.actionMap == 1) {
        //   if (item.properties.name == "执法人员") {
        //     let marker = L.marker(
        //       {
        //         lng: item.geometry.coordinates[0],
        //         lat: item.geometry.coordinates[1],
        //       },
        //       { icon: ico1 }
        //     )
        //       .bindPopup(
        //         `
        //       <div class="person-popup">
        //         <div class="person-title">
        //           <div class="title">人员信息</div>
        //           <div class="mask" id='monitoring${index}'></div>
        //         </div>
        //         <div class="person-main">
        //           <div class="person-info">
        //             <div class="dot"></div>
        //             <div class="name">李飞</div>
        //             <div class="position">执法1队队员</div>
        //           </div>
        //           <div class="btns">
        //             <div id='personClick${index}'>行程轨迹</div>
        //             <div>附近队员</div>
        //             <div>位置分享</div>
        //             <div>任务派发</div>
        //           </div>
        //         </div>
        //       </div>
        //       `,
        //         {
        //           className: "popup-pc-person",
        //         }
        //       )
        //       .openPopup();
        //     marker.addTo(this.mapEvent.mapEvent1);
        //     this.markerClick(marker, index);
        //   }
        // } else 
        if (this.actionMap == 2) {
          let marker;
          if (item.properties.name == "普通事件") {
            marker = L.marker(
              {
                lng: item.geometry.coordinates[0],
                lat: item.geometry.coordinates[1],
              },
              { icon: ico2 }
            )
              .bindPopup(
                `
              <div class="event-popup">
                <div class="event-title">
                  <div class="title">事件信息</div>
                  <div class="mask" id='monitoring${index}'></div>
                </div>
                <div class="event-main">
                  <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">事件名称：</div>
                    <div class="position">XXX小区乱堆杂物</div>
                  </div>
                  <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">事件类别：</div>
                    <div class="position">暴露垃圾</div>
                  </div>
                  <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">事件地址：</div>
                    <div class="position">XX街道XX小区</div>
                  </div>
                  <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">描述：</div>
                    <div class="position">XXXXXXXXXXXXXX</div>
                  </div>
                  <div class="btn" id="zhipai${index}">
                    指派
                  </div>
                </div>
              </div>
              `,
                {
                  className: "popup-pc-common",
                }
              )
              .openPopup();
            marker.addTo(this.mapEvent.mapEvent1);
            this.markerClick(marker, index);
          } else if (item.properties.name == "重点事件") {
            marker = L.marker(
              {
                lng: item.geometry.coordinates[0],
                lat: item.geometry.coordinates[1],
              },
              { icon: ico3 }
            )
              .bindPopup(
                `
              <div class="event-popup">
                <div class="event-title">
                  <div class="title">事件信息</div>
                  <div class="mask" id='monitoring${index}'></div>
                </div>
                <div class="event-main">
                  <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">事件名称：</div>
                    <div class="position">XXX小区乱堆杂物</div>
                  </div>
                  <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">事件类别：</div>
                    <div class="position">暴露垃圾</div>
                  </div>
                  <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">事件地址：</div>
                    <div class="position">XX街道XX小区</div>
                  </div>
                  <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">描述：</div>
                    <div class="position">XXXXXXXXXXXXXX</div>
                  </div>
                  <div class="btn" id="zhipai${index}">
                    指派
                  </div>
                </div>
              </div>
              `,
                {
                  className: "popup-pc-emphasis",
                }
              )
              .openPopup();
            marker.addTo(this.mapEvent.mapEvent1);
            this.markerClick(marker, index);
          }
        } else if (this.actionMap == 3) {
          if (item.properties.name == "执法车辆") {
            let marker = L.marker(
              {
                lng: item.geometry.coordinates[0],
                lat: item.geometry.coordinates[1],
              },
              { icon: ico4 }
            )
              .bindPopup(
                `
              <div class="car-popup">
                <div class="car-title">
                  <div class="title">车辆信息</div>
                  <div class="mask" id='monitoring${index}'></div>
                </div>
                <div class="car-main">
                  <div class="car-info">
                    <div class="dot"></div>
                    <div class="name">执法一队1号车</div>
                    <div class="position">苏A568974</div>
                  </div>
                  <div class="btn" id="carinfo${index}">行程轨迹</div>
                </div>
              </div>
              `,
                {
                  className: "popup-pc-car",
                }
              )
              .openPopup();
            marker.addTo(this.mapEvent.mapEvent1);
            this.markerClick(marker, index);
          }
        } else if (this.actionMap == 4) {
          if (item.properties.name == "监控视频") {
            let marker = L.marker(
              {
                lng: item.geometry.coordinates[0],
                lat: item.geometry.coordinates[1],
              },
              { icon: ico5 }
            )
              .bindPopup(
                `
              <div class="monitoring-popup">
                <div class="monitoring-title">
                  <div class="title">监控视频</div>
                  <div class="mask" id='monitoring${index}'></div>
                </div>
                <div class="monitoring">
                  <div class="bg">
                    <img src="@/assets/images/popup/screenshot20230817.png" alt="">
                  </div>
                  <div class="btns">
                    <div class="btn" id="monitoringInfo${index}">上墙</div>
                    <div class="btn">转发</div>
                  </div>
                </div>
              </div>
              `,
                {
                  className: "popup-pc-monitoring",
                }
              )
              .openPopup();
            marker.addTo(this.mapEvent.mapEvent1);
            this.markerClick(marker, index);
          }
        } else if (this.actionMap == 5) {
          if (item.properties.name == "沿街商铺分布") {
            let marker = L.marker(
              {
                lng: item.geometry.coordinates[0],
                lat: item.geometry.coordinates[1],
              },
              { icon: ico2 }
            )
              .bindPopup(
                `
              <div class="event-popup">
                <div class="event-title">
                  <div class="title">主体基本信息</div>
                  <div class="mask" id='monitoring${index}'></div>
                </div>
                <div class="event-main">
                <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">商铺名称：</div>
                    <div class="position">xxx商铺</div>
                  </div>
                  <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">商铺类型：</div>
                    <div class="position">餐饮店</div>
                  </div>
                  <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">所在地址：</div>
                    <div class="position">XX街道XX小区</div>
                  </div>
                  <div class="event-info">
                    <div class="dot"></div>
                    <div class="name">描述：</div>
                    <div class="position">xxxxxxxxxxxxxxxxxxxxxxxx</div>
                  </div>
                
                  <div class="btn" id="shopInfo">
                    查看载体详情
                  </div>
                </div>
              </div>
              `,
                {
                  className: "popup-pc-common",
                }
              )
              .openPopup();
            marker.addTo(this.mapEvent.mapEvent1);
            this.markerClick(marker, index);
          }
        }
      });
    },
    markerClick(marker, index, item) {
      marker.on("click", (e) => {
        this.$nextTick(() => {
          document
            .querySelector("#monitoring" + index)
            .addEventListener("click", function () {
              //通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
              marker.closePopup();
            });
          if (this.actionMap == 1) {
            document
              .querySelector("#personClick" + index)
              .addEventListener("click", () => {
                this.$refs.personageTrack.open("person",item);
              });
          } else if (this.actionMap == 2) {
            document
              .querySelector("#zhipai" + index)
              .addEventListener("click", () => {
                this.$refs.crewAssign.open();
              });
            // document.querySelector('#zhipai2' + index).addEventListener("click",()=>{
            //   this.$refs.crewAssign.open();
            // })
          } else if (this.actionMap == 3) {
            document
              .querySelector("#carinfo" + index)
              .addEventListener("click", () => {
                this.$refs.personageTrack.open("car");
              });
          } else if (this.actionMap == 4) {
            document
              .querySelector("#monitoringInfo" + index)
              .addEventListener("click", () => {
                this.$refs.videoWall.open();
              });
          } else if (this.actionMap == 5) {
            document
              .querySelector("#shopInfo")
              .addEventListener("click", () => {
                this.$refs.shop.open();
              });
          }
        });
      });
    },
    addLayer2() {
      this.mapLayers.mapLayer2.clearLayers();
      let geojson = L.geoJSON(
        detachment1,
        {
          pane: "mapLayer2",
          style: function (feature) {
            return {
              color: "#00C5EC",
              weight: 1,
              fillColor: "rgba(255,0,0,0.38)",
              fillOpacity: 1,
            };
          },
          onEachFeature: (feature, layer) => {
            // console.log(feature.properties.name);
            let polygon = L.polygon(layer._latlngs, {
              text: feature.properties.name,
              textStyle: {
                strokeStyle: "#ffffff", //描边颜色
                fillStyle: "#00000", //文字颜色
                // eslint-disable-next-line quotes
                font: "18px 'PuHuiTi-Medium'",
                lineWidth: 1, //描边粗细
                offsetX: -36, //-字号*4个字/2
                offsetY: 9, //字号/2
              },
            });
            polygon.addTo(this.mapLayers.mapLayer2);
          },
        },
        { className: "jack-s2" }
      ).addTo(this.mapLayers.mapLayer2);
      this.mapLayer2 = geojson.getBounds();
    },
    addLayer3() {
      this.mapLayers.mapLayer3.clearLayers();
      let geojson = L.geoJSON(
        detachment2,
        {
          pane: "mapLayer3",
          style: function (feature) {
            return {
              color: "#00C5EC",
              weight: 1,
              fillColor: "rgba(255,0,0,0.38)",
              fillOpacity: 1,
            };
          },
        },
        { className: "jack-s3" }
      ).addTo(this.mapLayers.mapLayer3);
      this.mapLayer3 = geojson.getBounds();
    },
    addLayer4() {
      this.mapLayers.mapLayer4.clearLayers();
      let geojson = L.geoJSON(
        detachment3,
        {
          pane: "mapLayer4",
          style: function (feature) {
            return {
              color: "#00C5EC",
              weight: 1,
              fillColor: "rgba(255,0,0,0.38)",
              fillOpacity: 1,
            };
          },
        },
        { className: "jack-s4" }
      ).addTo(this.mapLayers.mapLayer4);
      // 获取json文件的中心位置
      this.mapLayer4 = geojson.getBounds();
    },
    addLayer5() {
      this.mapLayers.mapLayer5.clearLayers();
      let geojson = L.geoJSON(
        detachment4,
        {
          pane: "mapLayer5",
          style: function (feature) {
            return {
              color: "rgba(255,0,0,0.38)",
              weight: 1,
              fillColor: "rgba(255,0,0,0.38)",
              fillOpacity: 1,
            };
          },
        },
        { className: "jack-s5" }
      ).addTo(this.mapLayers.mapLayer5);
      // 获取json文件的中心位置
      this.mapLayer5 = geojson.getBounds();
    },
    // 重点区域
    addLayer6() {
      // this.mapLayers.mapLayer5.clearLayers();
      regionalsettings({ pageNum: 1, pageSize: 100 }).then(res=>{
        // console.log(res,'重点区域');
        this.quyuData = res.rows;
        res.rows.forEach(element => {
          let shapeStr = JSON.parse(element.shapeStr)
          let geojson = L.geoJSON(
            shapeStr.features[0],
            {
              pane: "mapLayer6",
              style: function (feature) {
                return {
                  color: "rgba(255,0,0,0.38)",
                  weight: 1,
                  fillColor: "rgba(255,0,0,0.38)",
                  fillOpacity: 1,
                };
              },
            },
            { className: "jack-s6" }
          ).addTo(this.mapLayers.mapLayer6);
    
          let myIcon1 = L.divIcon({
            className: "region-name1",
            html: element.name,
            iconSize: [120, 68],
          });
          L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
            pane: "mapLayer4",
            icon: myIcon1,
          }).addTo(this.mapLayers.mapLayer6);
        });
      })
      // this.mapLayer5 = geojson.getBounds()
    },
    // 重点路段
    addLayer7() {
      // this.mapLayers.mapLayer7.clearLayers();
      roadsetting({ pageNum: 1, pageSize: 100 }).then(res=>{
        // console.log(res,'重点路段');
        this.luduanData = res.rows;
        res.rows.forEach(element=>{
          let shapeStr = JSON.parse(element.shapeStr)
          let geojson = L.geoJSON(
            shapeStr.features[0],
            {
              pane: "mapLayer7",
              style: function (feature) {
                return {
                  color: "#46FF77",
                  // weight: 0,
                  // fillColor: "rgba(70,255,119,0.38)",
                  // fillOpacity: 1,
                };
              },
            },
            { className: "jack-s7" }
          ).addTo(this.mapLayers.mapLayer7);
          // 获取json文件的中心位置
          // this.mapLayer5 = geojson.getBounds()
          // let bounds = geojson.getBounds();
          // let latlng = bounds.getCenter();
    
          let myIcon1 = L.divIcon({
            className: "region-name2",
            html: element.name,
            iconSize: [120, 68],
          });
          L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
            pane: "mapLayer4",
            icon: myIcon1,
          }).addTo(this.mapLayers.mapLayer7);
        })
      })
    },
    actionBtn(id) {
      this.action = id;
      if(id == 1) {
        this.globalMap.removeLayer(this.satelliteMap);
        this.globalMap.removeLayer(this.satelliteNoteMap);
        this.globalMap.addLayer(this.electronicMap);
      } else {
        this.globalMap.removeLayer(this.electronicMap);
        this.globalMap.addLayer(this.satelliteMap);
        this.globalMap.addLayer(this.satelliteNoteMap);
      }
      // console.log(id)
      // this.$emit('actionBtn',id);
      // if(id == 1){
      //   this.$refs.personageTrack.open();
      // } else {
      //   this.$refs.crewAssign.open();
      // }
    },
    // 输入框的搜索框点击事件
    search() {},
    // 创建任务的点击事件
    createdTask() {},
    // 地图扎点的点击事件
    positioning() {
      // this.$refs.videoWall.open();
    },
    // 切换地图事件
    changeMap(id) {
      this.actionMap = id;
      if(id == 1) {
        this.getTem();
      } else {
        this.addMark();
      }
      // switch (id) {
      //   case 1:
      //     this.addMark("执法人员");
      //     break;
      //   case 2:
      //     this.addMark("普通事件");
      //     break;
      //   case 3:
      //     this.addMark("执法车辆");
      //     break;
      //   case 4:
      //     this.addMark("监控视频");
      //     break;
      //   case 5:
      //     this.addMark("沿街商铺分布");
      //     break;
      //   default:
      //     return;
      // }
    },
    leftAnimation() {
      setTimeout(() => {
        this.leftAnimationData = !this.leftAnimationData;
      }, 200);
      this.$emit("leftAnimationAction");
    },
    rightAnimation() {
      setTimeout(() => {
        this.rightAnimationData = !this.rightAnimationData;
      }, 200);
      this.$emit("rightAnimationAction");
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
  },
};
</script>
<style lang="scss" scoped>
.map-main {
  width: 100%;
  height: 100%;
  position: relative;
  .left-animationMap-enter-active,
  .left-animationMap-leave-active {
    transition: all 1s;
  }
  .left-animationMap-enter,
  .left-animationMap-leave-to {
    /* 进入的初始状态和离开的最终状态 */
    opacity: 0;
    transform: translateX(-510px);
  }

  .right-animationMap-enter-active,
  .right-animationMap-leave-active {
    transition: all 1s;
  }
  .right-animationMap-enter,
  .right-animationMap-leave-to {
    /* 进入的初始状态和离开的最终状态 */
    opacity: 0;
    transform: translateX(510px);
  }

  .left-bg {
    position: absolute;
    left: 20px;
    top: 0;
    width: 11px;
    height: 95%;
    padding: 20px 0 0 0;
    z-index: 600;
    .bgt {
      width: 100%;
      height: 100%;
      background-image: url("../../../assets/images/broadside-bg.png");
      background-size: 100% 100%;
    }
  }
  .right-bg {
    position: absolute;
    top: 0;
    right: 20px;
    width: 11px;
    height: 95%;
    padding: 20px 0;
    z-index: 600;
    .bgt {
      width: 100%;
      height: 100%;
      background-image: url("../../../assets/images/broadside2-bg.png");
      background-size: 100% 100%;
    }
  }
  .bottom-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 20px;
    z-index: 600;
    .bgt {
      width: 100%;
      height: 100%;
      background-image: url("../../../assets/images/bottom-bg.png");
      background-size: 100% 100%;
    }
  }
  .map-left {
    position: absolute;
    left: 47px;
    top: 10px;
    width: 460px;
    height: 95%;
    z-index: 600;
    box-sizing: border-box;
    // background: rgba(216,216,216,0.05);
  }
  .left-image {
    z-index: 600;
    position: absolute;
    left: 527px;
    bottom: 50%;
    width: 40px;
    cursor: pointer;
  }
  .left-image2 {
    z-index: 600;
    position: absolute;
    left: 67px;
    bottom: 50%;
    width: 40px;
    cursor: pointer;
  }
  .right-image {
    z-index: 600;
    position: absolute;
    right: 527px;
    bottom: 50%;
    width: 40px;
    cursor: pointer;
  }
  .right-image2 {
    z-index: 600;
    position: absolute;
    right: 67px;
    bottom: 50%;
    width: 40px;
    cursor: pointer;
  }
  .map-right {
    position: absolute;
    right: 47px;
    top: 10px;
    width: 460px;
    height: 95%;
    z-index: 600;
    // margin: 10px 17px 0 10px;
    // padding: 20px 0;
    box-sizing: border-box;
  }
  .middle-top-left {
    z-index: 600;
    position: absolute;
    left: 537px;
    top: 10px;
    display: flex;
    .input-keyword {
      ::v-deep .el-input {
        background-image: url("../../../assets/images/bgtongyong.png");
        background-size: 100% 100%;
        .el-input__inner {
          background-color: transparent;
          width: 222px;
          height: 38px;
          color: #fff;
          border: none;
        }
        .el-input__inner::placeholder {
          /* 在这里添加你想要修改的 placeholder 样式 */
          font-size: 14px;
          font-family: "Source Han Sans CN-Regular";
          font-weight: 400;
          color: #d3eef2;
          line-height: 20px;
        }
      }
      ::v-deep .el-input__suffix {
        line-height: 44px;
        color: #d3eef2;
        right: 10px;
        cursor: pointer;
        .el-icon-search:before {
          font-size: 24px;
          color: #d3eef2;
        }
      }
    }
    .laser-positioning,
    .creation-task {
      // height: 38px;
      width: 130px;
      margin-left: 8px;
      background-image: url("../../../assets/images/bgtongyong.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 9px 13px;
      cursor: pointer;
      span {
        font-size: 14px;
        font-family: "Source Han Sans CN-Regular";
        font-weight: 400;
        color: #d3eef2;
        line-height: 20px;
        margin-right: 12px;
      }
      img {
        width: 20px;
      }
    }
  }
  .middle-top-left2 {
    left: 67px;
  }
  .middle-bottom-left {
    // 490
    position: absolute;
    left: 537px;
    bottom: 40px;
    // width: 200px;
    z-index: 600;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    .list {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .leftbg {
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("../../../assets/images/iconbg2.png");
        background-size: 100% 100%;
        width: 36px;
        height: 36px;
        cursor: pointer;
        img {
          width: 20px;
        }
      }
      .action-map {
        background-image: url("../../../assets/images/iconbg1.png");
      }
      .rightbg {
        padding-left: 6px;
        margin-left: 2px;
        background-image: url("../../../assets/images/right-icon.png");
        width: 115px;
        height: 36px;
        display: flex;
        align-items: center;
        span {
          font-size: 16px;
          font-family: "Source Han Sans CN-Bold";
          font-weight: 700;
          color: #ffffff;
          line-height: 26px;
          text-shadow: 0px 0px 5px #0077ff;
        }
      }
    }
  }
  .middle-bottom-left2 {
    left: 67px;
  }
  .middle-bottom-right {
    position: absolute;
    bottom: 40px;
    right: 537px;
    z-index: 600;
    .btn-action {
      display: flex;
      span {
        width: 142px;
        height: 40px;
        flex: 1;
        display: inline-block;
        text-align: center;
        background-image: url("../../../assets/images/changeBtn2.png");
        background-size: 100% 100%;
        padding: 10px 33px;
        font-size: 16px;
        font-family: "Source Han Sans CN-Regular";
        font-weight: 400;
        line-height: 20px;
        color: #d3eef2;
        cursor: pointer;
        // background: transparent;
        // box-shadow: inset 0px 0px 6px 0px #00C2FF;
        // border-radius: 2px 2px 2px 2px;
        // opacity: 1;
        // border: 1px solid rgba(181,207,255,0.5);
        &:nth-child(1) {
          margin-right: 10px;
        }
      }
      .action {
        color: #fff;
        background-image: url("../../../assets/images/changeBtn1.png.png");
        background-size: 100% 100%;
      }
    }
  }
  .middle-bottom-right2 {
    right: 67px;
  }

  .showMap {
    width: 100%;
    height: 100%;
    background-color: #00192e;
  }
}
</style>