直接上代码
<telement>
<div id="myChart" ref="ele" v-model="city"></div>
</telement>
js部分
import china from '../../../node_modules/echarts/map/js/china'
import './map.js'//该文件导入34个省份数据，在下不会导入整个文件夹下所有文件，试过好多次，总是报错，内容格式如下：
require('../../../node_modules/echarts/map/js/province/anhui')
require('../../../node_modules/echarts/map/js/province/aomen')
等等
然后是重点，data中
city: '',//用于地图下钻
iscity:true,//判断师傅为省级地图
然后是省份数据
geoCoordMap: {
黑龙江: [127.9688, 45.368],
内蒙古: [110.3467, 41.4899],
吉林: [125.8154, 44.2584],
北京市: [116.4551, 40.2539],
辽宁: [123.1238, 42.1216],
河北: [114.4995, 38.1006],
天津: [117.4219, 39.4189],
山西: [112.3352, 37.9413],
陕西: [109.1162, 34.2004],
甘肃: [103.5901, 36.3043],
宁夏: [106.3586, 38.1775],
青海: [101.4038, 36.8207],
新疆: [87.9236, 43.5883],
西藏: [91.11, 29.97],
四川: [103.9526, 30.7617],
重庆: [108.384366, 30.439702],
山东: [117.1582, 36.8701],
河南: [113.4668, 34.6234],
江苏: [118.8062, 31.9208],
安徽: [117.29, 32.0581],
湖北: [114.3896, 30.6628],
浙江: [119.5313, 29.8773],
福建: [119.4543, 25.9222],
江西: [116.0046, 28.6633],
湖南: [113.0823, 28.2568],
贵州: [106.6992, 26.7682],
云南: [102.9199, 25.4663],
广东: [113.12244, 23.009505],
广西: [108.479, 23.1152],
海南: [110.3893, 19.8516],
上海: [121.4648, 31.2891],
},
chinaDatas: [
[{ name: '河北', value: 300 }],
[{ name: '天津', value: 300 }],
[{ name: '山西', value: 300 }],
[{ name: '陕西', value: 300 }],
[{ name: '甘肃', value: 300 }],
[{ name: '宁夏', value: 300 }],
[{ name: '青海', value: 300 }],
[{ name: '新疆', value: 300 }],
[{ name: '西藏', value: 300 }],
[{ name: '四川', value: 300 }],
[{ name: '重庆', value: 300 }],
[{ name: '山东', value: 300 }],
[{ name: '河南', value: 300 }],
[{ name: '上海', value: 1300 }],
],//懂得都懂
shanxidatas: [[{ name: '太原', value: [112.3352, 37.9413, 20] }]],//省份内数据，没调用封装的方法
然后就是monted里面:
this.mapinit()
this.drawChart()
然后就是写js方法了
convertData(data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = this.geoCoordMap[data[i][0].name]
if (geoCoord) {
res.push({
name: data[i][0].name,
value: geoCoord.concat(data[i][0].value),
})
}
}
return res
},//这个方法就是对省份数据进行处理，应该都能看懂吧，不解释了
LoadMapping(name, data) {
var chartOption = {
geo: {
show: true,
map: name,
width: 1024,
top: 0,
label: {
position: 'top',
distance: 5,
normal: {
show: true,
textStyle: {
color: '#fff',
},
},
emphasis: {
textStyle: {
color: '#fff',
},
},
},
itemStyle: {
normal: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: '#26579F', // 0% 处的颜色
},
{
offset: 1,
color: '#46B5C7', // 100% 处的颜色
},
],
},
},
},
emphasis: {
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 13,
backgroundColor: 'rgba(0,23,11,1)',
},
},
itemStyle: {
areaColor: '#f00', // 高亮时地图板块颜色改变
},
},
},
series: [
{
type: `effectScatter`,
coordinateSystem: `geo`,
showEffectOn: 'render',
zlevel: 1,
rippleEffect: {
period: 5,
scale: 4,
brushType: 'fill',
},
hoverAnimation: true,
// label: {
// normal: {
// formatter: '{b}',
// position: 'bottom',
// offset: [15, 0],
// color: '#fff',
// show: true,
// fontSize: 16,
// },
// },
itemStyle: {
normal: {
color: '#1DE9B6',
shadowBlur: 10,
shadowColor: '#333',
},
},
symbolSize: 16,
data: this.convertData(this.chinaDatas),
},
{
type: 'scatter',
geoIndex: 0,
coordinateSystem: 'geo',
hoverAnimation: false,
symbolSize: 78,
symbol: 'image://' + require('../../assets/homepage/hdpi/yu.png'), // require引入图片路径
label: {
show: true,
color: '#00e5ff',
offset: [0, 0],
fontSize: 15,
},
data: [
{
name: '阳泉',
value: [113.57, 37.85],
},
{
name: '湖州',
value: [120.1, 30.86],
},
],
zlevel: 3,
},
],
}
return chartOption
},//该方法为二维地图封装，作为3d地图的纹理贴图使用，不是原创，参考某位大佬
LoadMapping3d(name, data) {
const canvas = document.createElement(`canvas`)
var mapBg = echarts.init(canvas, null, {
width: 1024,
height: 1024,
})
const chartOption = this.LoadMapping(name, data)
mapBg.setOption(chartOption)
var option = {
geo3D: {
data: data,
map: name,
zlevel:1,
shading: 'color',
colorMaterial: {
detailTexture: mapBg, // 纹理贴图
textureTiling: 1, // 默认为1，也就是拉伸填满。大于 1 的时候，数字表示纹理平铺重复的次数
},
top: -50,
tooltip: 'axis', //提示框设置
emphasis: {
//当鼠标放上去 地区区域是否显示名称
label: {
show: true,
formatter: (params) => {
this.city = params.name
return this.city
},
},
},
},
}
return option
},//三维地图封装，其中二维地图作为纹理贴图使用
mapinit() {
var data = this.convertData(this.chinaDatas) //数据处理
let myChart3 = echarts.init(document.getElementById('myChart'))//获取节点
const chartOption3d = this.LoadMapping3d('china', data)
myChart3.setOption(chartOption3d) //绘制中国地图
myChart3.getZr().on('click', (params) => {
if (this.$refs.ele.childNodes[0].style.cursor == 'pointer') {
if (this.city && this.iscity==true) {
console.log(this.city);
this.iscity=false;
const chartOption3d = this.LoadMapping3d(this.city, this.shanxidatas)
myChart3.setOption(chartOption3d)
}else{
this.iscity=true;
const chartOption3d = this.LoadMapping3d('china', data)
myChart3.setOption(chartOption3d)
}
}
})
},//后面为省份地图下钻，其中点击事件不好用，获取不到，然后查阅资料，用getZr（）方法，但只能获取到横纵坐标，起码可以点击了，然后就是获取省份名称，实现下钻，获取方法为在鼠标划过时，return出省份名称，然后绑定ref，通过判断是否点击到ref节点，然后判断是否获取到城市，然后看是否可以下钻，也就是状态，下钻后改变状态，改变option中城市传值，然后重新渲染地图， 再次点击时，不可继续下钻，绘制中国地图，
地图加动画的话涟漪效果，加图片用到了自定义scatter，格式一定要对，
symbol: 'image://' + require('../../assets/homepage/hdpi/yu.png')，否则不生效，
总之，在echartsgl中加动画没想到好的办法，就在三位地图上加二维地图，这也是参考别人的，第一次发文章，不会使用，附上参考文章地址吧，使用echartgl构建3D中国地图_zhuantou000的博客-CSDN博客_echarts-gl地图