echarts伪3D地图

<template>
  <div class="geoMap" ref="geoMap" v-loading="loading" element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"></div>
</template>

<script>
import echarts from 'echarts'
import axios from 'axios'

import yjs from '../../assets/imgs/atc/yjs.png'
import wjs from '../../assets/imgs/atc/wjs.png'
import djs from '../../assets/imgs/atc/djs.png'
import btzd from '../../assets/imgs/atc/btzd.png'
export default {
  data() {
    return {
      loading: false,
      point: window.points,
      yjs: [], //蓝色 已建设信控平台并接入到兵团总队
      djs: [], //灰色 没有建设信控平台
      wjs: [], //红色 已建设信控平台但没有接入兵团总队
    }
  },
  async mounted() {
    this.loading = true
    const res = await this.$inter.kjsjzs()
    this.loading = false
    let list = res.data.data.data
    for(let point of this.point){
      for(let li of list){
        if(li.departcode == point.acode){
          this.$set(point, "type", li.constructionStatus)
        }
      }
    }
    this.point.forEach(item => {
      if (item.type === "1") {
        this.yjs.push(item)
      } else if (item.type === "2") {
        this.wjs.push(item)
      } else {
        this.djs.push(item)
      }
    })

    let geojsonUrl = location.origin + "/static/geojson/xinjiang.json"
    let geojsondata = await axios.get(geojsonUrl)

    this.renderChart(geojsondata.data)
  },
  methods: {
    renderChart(geojsondata) {
      let geoArr = []
      let i = 0
      while (i < 10) {
        geoArr.push({
          show: true,
          map: "xinjiang",
          zoom: 1,
          roam: false,
          zlevel: 4,
          layoutCenter: [`${50 + 0 * i}%`, `${50 + 0.4 * i}%`],
          layoutSize: "90%",
          aspectScale: 0.8,
          itemStyle: {
            borderWidth: 1,
            borderColor: "rgba(255,255,255,0.2)",
            shadowColor: "rgba(69, 130, 195,0.5)",
            shadowOffsetY: 0,
            shadowBlur: 0,
            areaColor: "rgba(81, 149, 196,0.1)",
          },
          silent: true,
        })
        i++
      }
      let charts = echarts.init(this.$refs.geoMap)
      echarts.registerMap('xinjiang', geojsondata)
      let option = {
        geo: geoArr,
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend:{
          top:20,
          data:['已建设信控平台并接入到总队','已建设信控平台但没有接入总队','没有建设信控平台'],
          textStyle:{
            color:"#fff",
            fontSize:12,
            fontFamily:"tnum"
          },
          itemHeight:20,
          itemWidth:20,
        },
        series: [
          {
            type: "map",
            map: "xinjiang",
            zoom: 1,
            roam: false,
            aspectScale: 0.8,
            layoutCenter: ["50%", "50%"],
            layoutSize: "90%",
            selectedMode: false,
            tooltip: {
              axis: "item"
            },
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  color: "#fff",
                  fontSize: 10,
                  fontFamily: "heiti"
                },
                borderColor: "#2271ac",
                borderWidth: 1,
                borderType:"dashed",
                areaColor: "#5195c4",
              },
              emphasis: {
                label: {
                  show: false,
                  color: "#fff",
                  fontSize: 10,
                  fontFamily: "heiti"
                },
                borderColor: "#2271ac",
                borderWidth: 1,
                areaColor: "#5195c4",
              },
            },
            zlevel: 10,
          },
          {
            name: "已建设信控平台并接入到总队",
            type: "scatter",
            symbol: "image://" + yjs,
            coordinateSystem: "geo",
            // symbol: "pin",
            symbolSize: [20, 30],
            label: {
              normal: {
                formatter(v) {
                  return v.data.zt
                },
                show: true,
                textStyle: {
                  color: "#10DDF6",
                  fontSize: 10,
                  textShadowColor: "#10DDF6",
                  textShadowBlur: 2
                },
                position: 'top'
              },
            },
            itemStyle: {
              normal: {
                color: "#F62157", //标志颜色
              },
            },
            zlevel: 99,
            data: this.yjs,
          },
          {
            name: "已建设信控平台但没有接入总队",
            type: "scatter",
            symbol: "image://" + wjs,
            coordinateSystem: "geo",
            // symbol: "pin",
            symbolSize: [20, 30],
            label: {
              normal: {
                formatter(v) {
                  return v.data.zt
                },
                show: true,
                textStyle: {
                  color: "#E9483E",
                  fontSize: 10,
                  textShadowColor: "#E9483E",
                  textShadowBlur: 2
                },
                position: 'top'
              },
            },
            itemStyle: {
              normal: {
                color: "#F62157", //标志颜色
              },
            },
            zlevel: 99,
            data: this.wjs,
          },
          {
            name: "没有建设信控平台",
            type: "scatter",
            symbol: "image://" + djs,
            coordinateSystem: "geo",
            // symbol: "pin",
            symbolSize: [23, 30],
            label: {
              normal: {
                formatter(v) {
                  return v.data.zt
                },
                show: true,
                textStyle: {
                  color: "#BFBFBF",
                  fontSize: 10,
                  textShadowColor: "#BFBFBF",
                  textShadowBlur: 2
                },
                position: 'top'
              },
            },
            itemStyle: {
              normal: {
                color: "#F62157", //标志颜色
              },
            },
            zlevel: 99,
            data: this.djs,
          },
          {
            name: "总队",
            type: "scatter",
            symbol: "image://" + btzd,
            coordinateSystem: "geo",
            symbolSize: [60, 70],
            selectedMode: false,
            itemStyle: {
              normal: {
                color: "#F62157", //标志颜色
              },
            },
            zlevel: 98,
            data: [{
              value: [87.78067, 42.54798],
            }],
          },
        ],
      };

      charts.setOption(option);
      window.addEventListener("resize", () => {
        charts.resize()
      })
      charts.on("click", e => {
        if (e.seriesType == 'scatter' && e.data.acode) {
          this.$router.push({
            path:"detachmentCockpit",
            query:{
              departCode: e.data.acode
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.geoMap {
  position: absolute;
  bottom: 0;
  width: 36.875vw;
  height: 47.8704vh;
  background: url(../../assets/imgs/atc/MAP.png) no-repeat;
  background-size: 100% 100%;
}
</style>