echart3D地图

1、3d地图公共组件

<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script>
// 引入默认主题
import tdTheme from "./theme.json";
import resizeMixins from "@/utils/resizeMixins";
import nanchangshi from "@/common/geojson/360000/南昌市.json";
export default {
  name: "EchartGL",
  mixins: [resizeMixins],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "2.5rem",
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      areaName: "",
      chart: null,
      mapJson: {},
      showNameFlag: false,
      areaCode:"360100000000",
    };
  },
  watch: {
    options: {
      handler(options) {
        if (Object.keys(options).length > 0) {
          // 设置true清空echart缓存
          this.chart.setOption(options, true);
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.init3DMap();
    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
  },
  methods: {
    async init3DMap() {
      this.chart = this.$echarts.init(this.$el, "tdTheme");
      this.registerMap(this.areaCode);
      this.chart.setOption(this.options, true);
      this.chart.on("click", (e) => {
      //地图下钻在这里加，把事件发送出去
        if (e.seriesName == "pop") {
          this.$emit("toDetail", e.data.id);
        }
      });
      //.getZr()
      this.chart.on("mouseover", (params) => {
        const pointInPixel = [params.offsetX, params.offsetY];
        console.log(params);
      });
    },

    //注册地图
    registerMap(areaCode) {
      if (areaCode == "360100000000") {
        this.areaName = "南昌市";
        this.$echarts.registerMap("mapName", nanchangshi);
      } 
      this.chart.clear();
      this.chart.setOption(this.options, true);
    },
    //接口获取地图数据并处理，目前采用直接引入的方式
    deelMapJson(mapJson) {
      let arr = mapJson ? mapJson.features : [];
      if (arr.length) {
        arr.forEach((element) => {
          element.geometry.coordinates = [eval(element.geometry.coordinates)];
          element.properties.center = eval(element.properties.center);
          element.properties.centroid = eval(element.properties.centroid);
        });
      }
      return mapJson;
    },
  },
};
</script>
<style lang="less">
.map-3d {
  &.tooltip-common {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 7rem;
    height: auto;
    background-size: 100% 100%;
    z-index: 9999;
    background: #001612;
    box-shadow: inset 0px 0px 20px 0px rgba(0, 204, 232, 0.9);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #00a3ff;
    padding: 0.3rem;

    .tooltip-common-title {
      padding: 0.1rem 0.3rem;
      font-weight: 700;
      font-style: normal;
      font-size: 0.5rem;
      color: #fff;
      letter-spacing: 0.05rem;
      font-family: SourceHanSansCN-Regular;
      background: #386c6e;
      border-radius: 10px 10px 10px 10px;
      // background: url("../../assets/images/fxtrData/title-bg.png");
      // background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
    }

    .tooltip-common-icon {
      width: 0.5rem;
      height: 0.7rem;
      margin-right: 0.3rem;
    }

    .tooltip-common-con {
      text-align: left;
      padding: 0 0 0.2rem 0.3rem;
    }

    .tooltip-common-name {
      font-size: 0.4rem;
      color: #fff;
      text-align: left;
    }

    .tooltip-common-num {
      font-size: 0.7rem;
      font-weight: bold;
      font-family: "reducto_condensed_ssiCn";
      color: #0ff;
      text-align: left;
    }
  }
}
</style>

2、引入index.js

import Vue from 'vue'
// 引入echarts并注册全局组件
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.use(echarts);
// 引入echarts-gl
import 'echarts-gl';

import vueEchartsGL from '../echarts/map_3d.vue'

// 3DMap-Echarts-GL专用组件
Vue.component('vue-echarts-gl', vueEchartsGL);

export default {
  vueEchartsGL
};

3、全局引入main.js

//引入Echarts
import "./components/echarts/index";
import echarts from "echarts";
import china from "echarts/map/json/china.json";
echarts.registerMap("china", china);

4、页面中使用

      <vue-echarts-gl
        v-if="selectIndex == 2"
        ref="mymap"
        id="mymap"
        height="100%"
        width="100%"
        :options="mapOption"
        @mapClick="mapClick"
      ></vue-echarts-gl>
      
import { getMapRayOption } from "./chartOption";

 const resData = res.data || [];
        if (resData.length > 0) {
          for (var i = 0; i < resData.length; i++) {
            let arr = new Array(2);
            arr[0] = resData[i].longitude || "";
            arr[1] = resData[i].dimension || "";
            arr[2] = 20;
            this.pointData.push({
              codeNum: resData[i].codeNum,
              enName: resData[i].enName,
              accessNum: resData[i].accessNum,
              cityName: resData[i].cityName,
              cityCode: resData[i].cityCode,
              value: arr,
            });
          }
        }
        this.mapOption = getMapRayOption(this.pointData);
        this.mapOption.series[2] = {
          silent: false,
          seriesIndex: 2, //打点用
          tooltip: {
            show: false,
          },
          type: "scatter3D",
          coordinateSystem: "geo3D",
          symbol: "circle",
          symbolSize: 20,
          itemStyle: {
            color: "transparent",
          },
          label: {
            show: true,
            position: "top",
            distance: 20,
            formatter(params) {
              return (
                "\n" + params.data.enName + "：" + params.data.codeNum + "\n"
              );
            },
            textStyle: {
              color: "#fff",
              fontSize: transformFontSize(12),
              padding: [-8, 18],
              backgroundColor: "#A78200",
            },
          },
          data: this.pointData,
        };
        this.mapOption.series[3] = {
          silent: false,
          zlevel: 2,
          type: "scatter3D",
          coordinateSystem: "geo3D",
          symbol: "circle",
          symbolSize: 40,
          itemStyle: {
            color: "transparent",
          },
          label: {
            show: true,
            position: "center",
            distance: -30,
            formatter(params) {
              return " ";
            },
            textStyle: {
              color: "#fff",
              fontSize: transformFontSize(14),
              padding: [12, 10],
              backgroundColor: {
                image: point,
              },
            },
          },
          data: this.pointData,
        };