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-glv-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,};