Vue2 + Echarts实现3D地图下钻

地图下钻"/>

Vue2 + Echarts实现3D地图下钻

一、npm安装组件：

    "echarts": "5.4.0","echarts-gl": "^2.0.9","element-china-area-data": "^5.0.2",

二、Vue页面

<template><div class="Map3D" id="Map3D" ref="Map3D" @click="toBack"></div>
</template><script>
import LongNanJson from '../../../public/static/city/longnan.json';
import axios from 'axios';
import {TextToCode} from "element-china-area-data";
import 'echarts-gl'export default {data() {return {chartMap: {},option: null,};},props: {},created() {},mounted() {this.$nextTick(() => {this.initMap();});window.addEventListener('resize', this.resize)},beforeDestroy() {if (!this.chartMap) {return}this.chartMap.dispose()this.chartMap = nullwindow.removeEventListener('resize', this.resize)},methods: {// 初始化地图initMap() {this.chartMap = this.$echarts.init(document.querySelector('.Map3D'));this.chartMap = this.$echarts.init(this.$refs.Map3D);this.$echarts.registerMap('LongNan', LongNanJson)this.option = {series: [{type: 'map3D',name: '地图',selectedMode: 'single', // 地图高亮单选regionHeight: 5, // 地图高度map: 'LongNan',viewControl: {distance: 120, // 地图视角 控制初始大小alpha: 50,// 倾斜角度rotateSensitivity: [1, 1]},label: {show: true, // 是否显示名字color: '#fff', // 文字颜色fontSize: 18, // 文字大小fontWeight: 'bold', // 文字大小},itemStyle: {color: '#224a7b', // 地图背景颜色borderWidth: 1,   // 分界线widthborderColor: '#207fce', // 分界线颜色opacity: 0.72},emphasis: {label: {show: true, // 是否显示高亮textStyle: {color: 'yellow' // 高亮文字颜色}},itemStyle: {color: '#007ee8', // 地图高亮颜色borderColor: '#6becf5'// 分界线颜色}},light: {main: {color: '#fff',intensity: 1,shadow: true,shadowQuality: 'high',alpha: 25, //beta: 20},ambient: {color: '#fff',intensity: 0.6}}}]};this.chartMap.setOption(this.option)this.chartMap.on('click', (param) => {event.stopPropagation() // 阻止冒泡if (param.name) {const areaCode = TextToCode['甘肃省']['陇南市'][param.name].code;this.getCountyOption(areaCode)}});},// 显示各区县地图getCountyOption(areaCode) {axios.get('static/county/' + areaCode + '.json').then((result) => {this.$echarts.registerMap(areaCode, result.data)this.option.series[0].map = areaCodethis.chartMap.setOption(this.option, true);});},// 点击页面, 返回显示中国地图toBack() {this.$echarts.registerMap('LongNan', LongNanJson)this.option.series[0].map = 'LongNan'this.chartMap.setOption(this.option, true);},resize() {this.chartMap.resize()},},
};
</script><style lang="scss" scoped>
.Map3D {width: 100%;height: 100%;
}
</style>