RudongPC/src/views/Map/Map_Dikong/index.vue

<template>
  <div class="Map_Zhongdianrenyuan_box">
    <div class="Map_Zhongdianrenyuan_box_map" id="Map_Zhongdianrenyuan_box_map">
      <el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="center" :zoom="zoom"
        :zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)" @init="init"
        :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
        <el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
          @click="JSONclick" />

        <el-amap-ellipse :center="circleCenter" :radius="radius" :visible="true" :editable="false" :draggable="false"
          @click="ellipseclick" :zIndex="8000" :fillOpacity="0" strokeStyle="dashed" strokeColor="red"/>


        <el-amap-ellipse :center="circleCenterTow" :radius="radius" :visible="true" :editable="false" :draggable="false"
          @click="ellipseclick" :zIndex="8000":fillOpacity="0" strokeStyle="dashed" strokeColor="red"/>
        <!-- 点 -->
        <el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
          :position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="radio == 2 || radio == 1">
          <div class="markerStyles">
            <!-- <div v-if="marker.name" class="marker-Text">{{ marker.name }}</div> -->
            <img :src="marker.imgSrc" alt="">
          </div>
        </el-amap-marker>

        <!-- 飞机 -->
        <el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[0, 0]" :closeWhenClickMap="true"
          :position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">
          <div class="person-popup person-popupShow">
            <div class="person-title">
              <div class="title">无人机信息</div>
              <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
            </div>
            <div class="person-main">
              <div class="person-info">
                <div class="info-left">
                  <div class="dot"></div>
                  <div class="name">设备编号：</div>
                </div>
                <div class="position">{{ "131654656" }}</div>
              </div>
              <div class="person-info">
                <div class="info-left">
                  <div class="dot"></div>
                  <div class="name">当前位置：</div>
                </div>
                <div class="position">{{ "长沙镇XX街XX号" }}</div>
              </div>
              <div class="person-info">
                <div class="info-left">
                  <div class="dot"></div>
                  <div class="name">飞行任务：</div>
                </div>
                <div class="position">{{ "XXXXXXXXXXXXXX" }}</div>
              </div>
              <div class="btns">
                <div @click="guojilook(1)">查看轨迹</div>
                <div @click="guojilook(2)">历史任务</div>
                <!-- <div @click="watchClick">强制观摩</div>
                <div @click="taskClick">任务派发</div> -->
              </div>
            </div>
          </div>
        </el-amap-info-window>

        <el-amap-info-window v-if="personInfoTow.visible" anchor="bottom-center" :offset="[0, 0]"
          :closeWhenClickMap="true" :position="personInfoTow.position" :visible.sync="personInfoTow.visible"
          :zIndex="900">
          <div class="person-popup person-popupmini">
            <div class="person-title">
              <div class="title">无人机巡查事件</div>
              <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
            </div>
            <div class="person-main">
              <div class="person-info">
                <div class="info-left">
                  <div class="dot"></div>
                  <div class="name">事件地点：</div>
                </div>
                <div class="position">{{ "长沙镇XX街XX号" }}</div>
              </div>
              <div class="person-info">
                <div class="info-left">
                  <div class="dot"></div>
                  <div class="name">发生时间：</div>
                </div>
                <div class="position">{{ "2024.09.01 15:00:00" }}</div>
              </div>
              <div class="person-info">
                <div class="info-left">
                  <div class="dot"></div>
                  <div class="name">事件照片：</div>
                </div>
                <div class="position">
                  <img src="@/assets/images/jiankong.jpg" alt="">
                </div>
              </div>
              <div class="person-info">
                <div class="info-left">
                  <div class="dot"></div>
                  <div class="name">是否处理：</div>
                </div>
                <div class="position">{{ "已处理" }}</div>
              </div>
              <div class="person-info">
                <div class="info-left">
                  <div class="dot"></div>
                  <div class="name">处理时间：</div>
                </div>
                <div class="position">{{ "2024.09.01 15:20:00" }}</div>
              </div>

            </div>
          </div>
        </el-amap-info-window>

      </el-amap>
    </div>
    <!-- 图层展示 -->
    <div>
      <ZhanshiTubiao showType="地空协同" @markersradio="markersradio"></ZhanshiTubiao>
    </div>
    <leftrightEcahts></leftrightEcahts>
    <righttEcahts></righttEcahts>
    <MapWrenjidialog ref="MapWrenjidialog"></MapWrenjidialog>
    <MapWrenjiLishidialog ref="MapWrenjiLishidialog"></MapWrenjiLishidialog>
  </div>
</template>

<script>
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
// 线路
import roadline1 from "@/assets/mapjson/Chaangshazhen/road-line.geojson"
// 
import roadline2 from "@/assets/mapjson/Chaangshazhen/road-line2.geojson"
// 点
import roadpoint from "@/assets/mapjson/Chaangshazhen/road-point.geojson"
// 点
import roadpoint2 from "@/assets/mapjson/Chaangshazhen/road-point2.geojson"

// 人员分布图标
import ZhanshiTubiao from "@/views/components/ZhanshiTubiao/index.vue"
import MapWrenjidialog from "@/views/components/MapWrenjidialog/index.vue"
import MapWrenjiLishidialog from "@/views/components/MapWrenjiLishidialog/index.vue"

// 左右两边图
import leftrightEcahts from "@/views/Map/Map_Dikong/leftrightEcahts/index.vue"
import righttEcahts from "@/views/Map/Map_Dikong/righttEcahts/index.vue"

export default {
  name: "map-view",
  components: { ZhanshiTubiao, leftrightEcahts, righttEcahts, MapWrenjidialog, MapWrenjiLishidialog },
  data() {
    return {
      zoom: 11.8,
      zooms: [3, 20],
      center: [121.298563, 32.451807],
      map: null,
      draggable: false,
      visible: true,
      changshazhen: changshazhen,
      roadline1: roadline1,
      roadline2: roadline2,
      roadpoint: roadpoint,
      roadpoint2: roadpoint2,
      circleCenter: [121.211641, 32.4569487],
      circleCenterTow: [121.338284, 32.388852],
      radius: [1800, 700],
      // 面图层样式
      polygonOptions: {
        strokeColor: '#00C5EC',
        fillColor: '#00AEFF'
      },
      // 线图层样式
      polyline: {
        path: roadline1,
        editable: false,
        visible: true,
        draggable: false
      },
      // 人员点
      markers: [
        {
          position: [121.183697866903292, 32.460227941215508],
          id: 1,
          name: "飞机",
          content: '<i class="el-icon-user-solid bendiren"></i>',
          imgSrc: require("@/assets/images/icon/weurneji.png")
        },
        {
          position: [121.235712627230569, 32.447218823220901],
          id: 2,
          name: "对讲",
          content: '<i class="el-icon-user-solid bendiren"></i>',
          imgSrc: require("@/assets/images/icon/xuncha.png")
        },
        {
          position: [121.318413448767714, 32.411908360092688],
          id: 3,
          name: "飞机",
          content: '<i class="el-icon-user-solid bendiren"></i>',
          imgSrc: require("@/assets/images/icon/weurneji.png")
        },
        {
          position: [121.359751265879749, 32.38683020264299],
          id: 4,
          name: "对讲",
          content: '<i class="el-icon-user-solid bendiren"></i>',
          imgSrc: require("@/assets/images/icon/xuncha.png")
        },
      ],

      // 选项
      radio: 1,
      personInfo: {
        position: [],
        info: {},
        visible: false,
      },
      personInfoTow: {
        position: [],
        info: {},
        visible: false,
      }


    }

  },
  mounted() {
  },
  unmounted() {
  },
  methods: {
    ellipseclick() {

    },
    getMap() {
      // bmap vue component
      console.log('$refs: ', this.$refs.map.$$getInstance())
    },
    init(map) {
      this.map = map;
      // o.setMapStyle('amap://styles/darkblue')
      map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
      console.log(this.map.getCenter())
      console.log(this.$refs.map.$$getInstance())
    },
    // 地图点击事件
    click() {
      alert('click map')
    },
    // 面图层样式
    JSONclick: (e) => {
      console.log('click event: ', e);
    },
    JSONclick2: (e) => {
      console.log('click event2: ', e);
    },
    JSONclick3: (e) => {
      console.log('click event3: ', e);
    },
    //mark点
    clickArrayMarker(e) {
      console.log(e);
      if (e.name == "飞机") {
        this.personInfo.visible = true
        this.personInfo.position = e.position
        this.personInfo.info = e.info
      }
      if (e.name == "对讲") {
        this.personInfoTow.visible = true
        this.personInfoTow.position = e.position
        this.personInfoTow.info = e.info
      }

    },
    guojilook(type) {
      if (type == 1) {
        this.$refs.MapWrenjidialog.open("person")

      }
      if (type == 2) {
        this.$refs.MapWrenjiLishidialog.open("person")

      }
    },
    markersClosePopup() {
      this.personInfo.visible = false;
      this.personInfoTow.visible = false;

    },
    // 切换人员
    markersradio(type) {
      console.log(type);

      this.radio = type
    }

  },
};
</script>
<style scoped lang='scss'>
.Map_Zhongdianrenyuan_box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;

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

}

::v-deep {
  .bendiren {
    color: greenyellow;
    font-size: 26px;
  }

  .waidi {
    color: goldenrod;
    font-size: 26px;
  }
}

::v-deep .person-popupmini {
  min-height: 270px;

  .position {
    img {
      width: 150px
    }
  }

}
</style>