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

<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-08-14 15:46:26
 * @LastEditors: JC9527
 * @LastEditTime: 2023-08-17 21:32:14
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-08-14 15:46:26
 * @LastEditors: JC9527
 * @LastEditTime: 2023-08-17 16:15:51
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-08-14 15:46:26
 * @LastEditors: JC9527
 * @LastEditTime: 2023-08-17 15:40:05
-->
<template>
  <div class="map-main">
    <div id="showMap" class="showMap"></div>
    <div class="left-bg">
      <div class="bgt"></div>
    </div>
    <div class="map-left">
      <map-left></map-left>
    </div>
    <img src="@/assets/images/action-left.png" alt="" class="left-image">
    <img src="@/assets/images/action-right.png" alt="" class="right-image">
    <div class="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">
      <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>
    <div class="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="map-right">
      <map-right></map-right>
    </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>
    <person-popup v-if="personPopup" v-on:personClose="personClose" v-on:getRoute="presoninfo" :point="mypoint"></person-popup>
    <event-popup v-if="eventPopup" v-on:eventClose="eventClose" v-on:zhipai="personzhipai" :point="mypoint"></event-popup>
    <car-popup v-if="carPopup" v-on:carClose="carClose" v-on:carinfo="carinfo" :point="mypoint"></car-popup>
    <monitoring-popup v-if="monitoringPopup" v-on:monitoringClose="monitoringClose" v-on:monitoringInfo="monitoringInfo" :point="mypoint"></monitoring-popup>
  </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 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 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 personPopup from "../../components/personPopup/index.vue"
import eventPopup from "../../components/eventPopup/index.vue"
import carPopup from "../../components/carPopup/index.vue"
import monitoringPopup from "../../components/monitoringPopup/index.vue"
export default {
  name: 'myMap',
  components:{mapLeft,mapRight,personageTrack,crewAssign,videoWall,personPopup,eventPopup,carPopup,monitoringPopup},
  data() {
    return {
      globalMap:null,
      basemap:null,
      townCenter: [31.863971, 118.835418],
      myZoom:12,
      mapLayers:{
        mapLayer1:null,
        mapLayer2:null,
        mapLayer3:null,
        mapLayer4:null,
        mapLayer5: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,                       // 切换执法人员/车辆/事件分类/监控视频控制的值
      personPopup:false,
      eventPopup:false,
      carPopup:false,
      monitoringPopup:false,
      mypoint:{},
    }
  },
  methods:{
    initMap(){
      this.globalMap = L.map('showMap', {
        center: this.townCenter, // 地图中心[纬度，经度]
        zoom: this.myZoom, // 地图层级
        zoomControl: false,
        attributionControl: false, // 右下角leaflet图标
        doubleClickZoom: false, // 双击放大
        scrollWheelZoom: true, // 滚轮放大
        dragging: true,
      })

      // 电子底图/百度
      this.basemap = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
        maxZoom: 18,
        minZoom: 5,
      })
      this.globalMap.addLayer(this.basemap);

      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('mapEvent1')
      this.globalMap.getPane('mapEvent1').style.zIndex = 503
      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.globalMap.on('zoomend', e => {
        let zoom = this.globalMap.getZoom()
        console.log('层级：', zoom)
      })
      // this.addLayer2();
      this.addLayer1();
      this.addMark("执法人员");
      // this.addLayer2();
      // this.addLayer3();
      // this.addLayer4();
      // this.addLayer5();
    },
    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)
    },
    addMark(name){
      this.mapEvent.mapEvent1.clearLayers()
      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],
      })
      point.features.map((item)=>{
        if(this.actionMap == 1) {
          if(item.properties.name == "执法人员"){
            let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico1})
            marker.addTo(this.mapEvent.mapEvent1)
            this.markerClick(marker)
          }
        } 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})
            marker.addTo(this.mapEvent.mapEvent1)
            this.markerClick(marker)
          } else if(item.properties.name == "重点事件"){
            marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico3})
            marker.addTo(this.mapEvent.mapEvent1)
            this.markerClick(marker)
          }
        } 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})
            marker.addTo(this.mapEvent.mapEvent1)
            this.markerClick(marker)
          }
        } 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})
            marker.addTo(this.mapEvent.mapEvent1)
            this.markerClick(marker)
          }
        }
        
      })
      // let geojson = L.geoJSON(cheshi,{
      //   onEachFeature: (feature, layer) => {
      //     console.log(feature)
      //     console.log(layer)
      //     let bounds = layer._latlng
      //     console.log(bounds)
      //     let marker 
      //     // let center = bounds.getCenter()
      //     if(feature.properties.name == "监控视频"){
      //       marker = L.marker(bounds,{icon:ico5})
      //     } else if(feature.properties.name == "执法人员") {
      //       marker = L.marker({lng:118.74576613991007,lat:31.8391346298732},{icon:ico1})
      //     } else if(feature.properties.name == "普通事件") {
      //       marker = L.marker(bounds,{icon:ico2})
      //     } else if(feature.properties.name == "重点事件") {
      //       marker = L.marker(bounds,{icon:ico3})
      //     } else if(feature.properties.name == "执法车辆") {
      //       marker = L.marker(bounds,{icon:ico4})
      //     }
      //     marker.addTo(this.mapEvent.mapEvent1)
      //   }
      // }).addTo(this.mapEvent.mapEvent1)
    },
    markerClick(marker){
      marker.on('click', e => {
        console.log(e);
        this.mypoint = e.containerPoint;
        if(this.actionMap == 1) {
          this.personPopup = true;
        } else if(this.actionMap == 2) {
          this.eventPopup = true;
        } else if(this.actionMap == 3) {
          this.carPopup = true
        } else if(this.actionMap == 4){
          this.monitoringPopup = true;
        }
      })
    },
    personClose(){
      this.personPopup = false;
    },
    eventClose(){
      this.eventPopup = false;
    },
    carClose(){
      this.carPopup = false;
    },
    monitoringClose(){
      this.monitoringPopup = false;
    },
    personzhipai(){
      this.$refs.crewAssign.open();
    },
    presoninfo(){
      this.$refs.personageTrack.open('person');
    },
    carinfo(){
      this.$refs.personageTrack.open('car');
    },
    monitoringInfo(){
      this.$refs.videoWall.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: '#00C5EC',
              weight: 1,
              fillColor: 'rgba(255,0,0,0.38)',
              fillOpacity: 1,
            }
          },
        },{ className: 'jack-s5' }
      ).addTo(this.mapLayers.mapLayer5)
      // 获取json文件的中心位置
      this.mapLayer5 = geojson.getBounds()
    },
    actionBtn(id){
      this.action = id;
      // 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;
      this.personPopup = false;
      this.eventPopup = false;
      this.carPopup = false;
      this.monitoringPopup = false;
      this.addMark()
      switch(id){
        case 1:
          this.addMark("执法人员")
          break;
        case 2:
          this.addMark("普通事件")
          break;
        case 3:
          this.addMark("执法车辆")
          break;
        case 4:
          this.addMark("监控视频")
          break;
        default:
          return;
      }
    },
  },
  mounted(){
    this.$nextTick(()=>{
      this.initMap()
    })
  }
}
</script>
<style lang="scss" scoped>

.map-main {
  width: 100%;
  height: 100%;
  position: relative;
  .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/broadside-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;
  }
  .right-image {
    z-index: 600;
    position: absolute;
    right: 527px;
    bottom: 50%;
    width: 40px;
    cursor: pointer;
  }
  .map-right {
    position: absolute;
    right: 47px;
    top: 10px;
    width: 460px;
    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: rgba(0,60,116,0.2);
        box-shadow: inset 0px 0px 6px 0px #00C2FF;
        border-radius: 2px;
        border: 1px solid rgba(181,207,255,0.5);
        .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, Source Han Sans CN;
          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;
      margin-left: 8px;
      background: rgba(0,60,116,0.6);
      box-shadow: inset 0px 0px 6px 0px #00C2FF;
      border-radius: 2px;
      border: 1px solid rgba(181,207,255,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 9px 13px;
      cursor: pointer;
      span {
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #D3EEF2;
        line-height: 20px;
        margin-right: 12px;
      }
      img {
        width: 20px;
      }
    }
  }
  .middle-bottom-left {
    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, Source Han Sans CN;
          font-weight: 700;
          color: #FFFFFF;
          line-height: 26px;
          text-shadow: 0px 0px 5px #0077FF;
        }
      }
    }
  }
  .middle-bottom-right {
    position: absolute;
    bottom: 40px;
    right: 537px;
    z-index: 600;
    .btn-action {
      display: flex;
      span {
        flex: 1;
        display: inline-block;
        text-align: center;
        padding: 10px 33px;
        font-size: 16px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        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-color: rgba(255,125,64,0.8);
        box-shadow: inset 0px 0px 13px 0px #F6B463;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid rgba(181,207,255,0.5);
      }
    }
  }
  

  .showMap {
    width: 100%;
    height: 100%;
  }
  
}

</style>