vue+echarts+3D地图 制作大屏
基于3d地图做的一些效果，首先看下效果图
准备工作：下载echarts 和3d地图需要用到的依赖包，版本随意就行
下载依赖之后，在页面引入，引入网上下载的地图json文件
用户不直接操作地图，因为是大屏，只做展示使用，右边列表有两种模式，如果列表数据没有撑开盒子，每3秒轮播高亮，高亮到那个地区，地图上就高亮那一块区域，且显示对应的tooltip(这里没有使用echarts中的tooltip,因为高亮地图的时候，2d地图可以主动触发tooltip出现，但是3d里面不支持，所以这个弹框是我自己写的，因为项目中只有3个地区的数据，只用写3个弹框就行，如果梅个区域都有数据，不建议使用这种方式)
第二种展示方式就是，如果右边列表数据过多，就会无限滚动，当高亮哪一个区域的时候，就高亮某一个地图区域
重点主要将如何在vue中使用3d地图，如果有对两边联动效果如何做的小伙伴感兴趣，给我私信吧
在data()中定义渲染3d地图的options:
data(){
let _this = this
return {
option: {
tooltip: {
show: false,//地图自带的tooltip,在这里我设置为false,并没有使用，可以放开看下效果
triggerOn: 'mousemove',//鼠标hover地图区域时出现
trigger: 'item',
transitionDuration: 1,//延时一秒出现
formatter: function(params){
//返回的是dom结构，你可以在这里写好样式，也可以使用下面的配置项去设置样式
return `
${params.name}边缘云设置总量
${354645}
台
`
},
//这里就是设置地图自带的弹框样式
borderColor: '#419bf9',
borderWidth: 1,
padding: [0, 15],
// backgroundColor: '#0a1d54',
backgroundColor: 'rgba(0,2,89,0.8)',
borderRadius: 0,
textStyle: { color:'#fff'},
// hoverAnimation:true
},
series: [
{
//你引入的地图文件的json文件的名称
name: 'china',
type: 'map3D',//我们需要使用3d地图
// type: 'map',
map: 'china', //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
regionHeight: 3, //模型的高度
boxWidth: 85, //三维地图在三维场景中的宽度
boxDepth: 73, //三维地图在三维场景中的深度
top: '-15%',
itemStyle: {
normal: {
//静态模式下显示的默认样式
borderColor: '#3f82e5',
borderWidth: 2,
color: '#0a55ea',
opacity: 0.4
}, //阴影效果
emphasis: {
// color:'#3f82e5',
color: '#0a55ea',
// opacity:1,
label:{
show:false
}
}
},
viewControl: {
alpha: 45, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
beta: 10,
rotateSensitivity:0,
zoomSensitivity:0,
//用于鼠标的旋转，缩放等视角控制。
autoRotate: false, //是否开启视角绕物体的自动旋转查看
distance: 90 //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
},
data:[],
// hoverAnimation:true,
}]
},
}
},在页面中写一个盒子，用来装你的地图，你可以这么写
//因为我的需要适配屏幕，宽高你可以结合实际需要来定在mounted生命周期函数中，去渲染地图
mounted() {
this.initEcharts()
// 禁用滚动条
document.body.parentNode.style.overflow="hidden";
}, initEcharts() {
//echarts初始化出来后要全局变量接受一下，以后修改echarts的时候就去setoptions
this.myChart = echarts.init(this.$refs.myEchart)
echarts.use([TooltipComponent, VisualMapComponent, GeoComponent,EffectScatterChart])
echarts.registerMap('china', china)
this.myChart.setOption(this.option)
console.log('渲染后得options===',this.myChart.setOption(this.option))
//echarts自适应
window.onresize = this.myChart.resize
//在渲染完毕之后，你可以结合实际需要，给地图绑定事件，我帮事件是因为我原先要做tooltip的鼠标跟随，虽然能够实现，但是有坑，无法解决，所以就放弃了，改成自己写的弹框，头铁的老哥可以自己试下
//绑定市区点击事件
// this.myChart.on("click",(params)=>{
// this.mapClick(params)
// })
// this.myChart.on("mouseover",(params)=>{
// this.mapover(params)
// })
// this.myChart.on("mouseout",(params)=>{
// this.mapMouseout(params)
// })
// this.myChart.on("mousemove",(params)=>{
// this.mapMousemove(params)
// })
// this.myChart.on("globalout",(params)=>{
// this.mapGlobalout(params)
// })
},代码走到此处，那么你的地图就能够成功的渲染出来了，那么如何做地图的高亮呢？
其实代码很简单，将你要高亮的地区区域名称得到，然后设置样式就可以实现高亮，这个应该不难的，但是因为我的列表是滚动的，当时就没有想到好的办法,如何得到我当前是哪个地区的数据，所以给列表加了一个高亮的样式，然后通过获取高亮样式，来判断列表当前滚动到哪一个区域，得到区域后，使用以下方法就可以实现地图高亮了
// 高亮右侧地图
handleProvinceChange(val){
let _this = this
// // 高亮当前选中的省份
let data = [{
name:val,
itemStyle:{
color:'#7CFFFB',
opacity:1,
label:{
show:false
}
}
}]
_this.option.series[0].data = data
if(_this.myChart){
_this.myChart.setOption(this.option);
}
},地图已经高亮，那么对应的弹框是不是也应该出现，来看我写的自定义弹框，设置了三个变量来控制显隐，当滚到对应区域的时候，就让这个弹框出现，其他隐藏，弊端就是这个定位的位置是写死的，如果要求适配各种大屏，那么需要写几套样式，比较复杂。
样式如下：
.tool__tip-map {
position:absolute;
z-index:999;
font-size:16px;
color:#fff;
width: 206px;
height: 80px;
border: 1px solid #419bf9;
box-sizing: border-box;
padding: 12px 25px;
// background: rgba(0,2,89,0.8);
background: rgba(10,29,84,0.8);
// background: #0a1d54;
//牵引线就是两个伪元素实现的，只写了关键样式，其他的细微样式自己调
&::after {
content: "";
width: 100px;
height: 2px;
background: #02C6E5;
position: absolute;
left: -120px;
top: 50%;
transform: translateY(-50%);
}
&::before{
content: "";
width: 2px;
height: 117px;
background: #02C6E5;
position: absolute;
left: -140px;
top: 36px;
transform:rotateZ(20deg);
}
}如果你没有列表，单纯的想通过点击地区区域出现tooltip，那么你绑定点击事件，完全是可以实现的，而且效果很赞，这里我的代码就不贴了
如果你没有列表，鼠标跟随出现tooltip,你也可以绑定地图事件，但是弊端就是，在地图划过任何区域都是可以的，但是当你离开画布，那么最后一个你离开的tooltip不会消失
还有个小技术的点是：
这个蓝色的线是根据边框轨迹滑动的，看起来比较高大上，如果你想做，看我的另外一篇博客吧利用径向渐变做酷炫的按钮闪光效果_亦双城的双子娴的博客-CSDN博客
