RudongPC/src/views/Map/Map_Zhongdianrenyuan/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-geojson :geo="roadline1" :polygon-options="polygonOptions" :draggable="draggable"
          @click="JSONclick2" />

        <el-amap-geojson :geo="roadline2" :polygon-options="polygonOptions" :draggable="draggable"
          @click="JSONclick3" /> -->
        <!-- <el-amap-geojson :geo="roadpoint" :polygon-options="polygonOptions" :draggable="draggable" @click="JSONclick" />
        <el-amap-geojson :geo="roadpoint2" :polygon-options="polygonOptions" :draggable="draggable"
          @click="JSONclick" /> -->
        <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="">
            <el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist" strokeColor="greenyellow" :zIndex="500"
            :strokeDasharray="[10,10]" strokeStyle="dashed" />
          </div>
        </el-amap-marker>

        <el-amap-marker v-for="(marker, index) in markers2" :title="marker.name" :key="marker.id + 5"
          :position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="radio == 3 || radio == 1">
          <div class="markerStyles">
            <!-- <div v-if="marker.name" class="marker-Text">{{ marker.name }}</div> -->
            <img :src="marker.imgSrc" alt="">
            <el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist" strokeColor="red" :zIndex="500"
            :strokeDasharray="[10,10]" strokeStyle="dashed"
            />
          </div>
        </el-amap-marker>
      </el-amap>
    </div>
    <!-- 图层展示 -->
    <div>
      <ZhanshiTubiao showType="重点人员" @markersradio="markersradio"></ZhanshiTubiao>
    </div>
    <leftrightEcahts></leftrightEcahts>
    <righttEcahts></righttEcahts>
    <Mapdialog ref="Mapdialog"></Mapdialog>
  </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 Mapdialog from "@/views/components/Mapdialog/index.vue"

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

export default {
  name: "map-view",
  components: { ZhanshiTubiao, leftrightEcahts, righttEcahts, Mapdialog },
  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,
      // 面图层样式
      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/zhongdianren2.png"),
          pathlist: [[121.183697866903292, 32.460227941215508],[121.173697866903292, 32.430227941215508],]
        },
        {
          position: [121.235712627230569, 32.447218823220901],
          id: 2,
          name: "本地重点人员",
          content: '<i class="el-icon-user-solid bendiren"></i>',
          imgSrc: require("@/assets/images/icon/zhongdianren2.png"),
          pathlist: [[121.235712627230569, 32.447218823220901],[ 121.245712627230569, 32.427218823220901 ],]
        },
        {
          position: [121.318413448767714, 32.411908360092688],
          id: 3,
          name: "本地重点人员",
          content: '<i class="el-icon-user-solid bendiren"></i>',
          imgSrc: require("@/assets/images/icon/zhongdianren2.png")
          ,
          pathlist: [[121.318413448767714, 32.411908360092688],[ 121.328413448767714, 32.421908360092688],]
        },
        {
          position: [121.359751265879749, 32.38683020264299],
          id: 4,
          name: "本地重点人员",
          content: '<i class="el-icon-user-solid bendiren"></i>',
          imgSrc: require("@/assets/images/icon/zhongdianren2.png")
          ,
          pathlist: [[121.359751265879749, 32.38683020264299],[ 121.349751265879749, 32.36683020264299],]
        },
      ],
      markers2: [
        {
          position: [121.24012643512161, 32.392859294457729],
          id: 1,
          name: "外地重点人员",
          content: '<i class="el-icon-user-solid waidi"></i>',
          imgSrc: require("@/assets/images/icon/zhongdianren.png"),
          pathlist: [[121.227349622803477, 32.389607014959076],[121.24012643512161, 32.392859294457729],]
        },
        {
          position: [121.316090391982954, 32.406100718130809 ],
          id: 2,
          name: "外地重点人员",
          content: '<i class="el-icon-user-solid waidi"></i>',
          imgSrc: require("@/assets/images/icon/zhongdianren.png"),
          pathlist: [[121.252903247437729, 32.397970019384182],[ 121.316090391982954, 32.406100718130809 ],]
        },
        {
          position: [121.295647492277155, 32.404939189738435],
          id: 3,
          name: "外地重点人员",
          content: '<i class="el-icon-user-solid waidi"></i>',
          imgSrc: require("@/assets/images/icon/zhongdianren.png"),
          pathlist: [[121.295647492277155, 32.404939189738435],[ 121.316090391982954, 32.426100718130809 ],]
        },
        {
          position: [121.3418763222937, 32.418412919089988],
          id: 4,
          name: "外地重点人员",
          content: '<i class="el-icon-user-solid waidi"></i>',
          imgSrc: require("@/assets/images/icon/zhongdianren.png")
          ,
          pathlist: [[121.3418763222937, 32.418412919089988],[ 121.326090391982954, 32.406100718130809 ],]
        },
      ],
      // 选项
      radio: 1


    }

  },
  mounted() {
  },
  unmounted() {
  },
  methods: {
    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);
      this.$refs.Mapdialog.open("person")

    },
    // 切换人员
    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 .marker-Text {
  width: 100px;
}
</style>