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 `<div style="position:absolute;left:10px;top:16px;width:8px;height:8px;background-color:#FD9A5A;"></div>
                        <div class="tips" style="padding:12px;">
                            <h1 style="font-size:16px;">${params.name}边缘云设置总量</h1>
                            <p style="font-size:16px;">
                                <span style="color:#03dbf3;font-size:30px;display:inline-block;padding:5px 0">${354645}</span>
                            台
                            </p>
                        </div>`
                    },
//这里就是设置地图自带的弹框样式
                    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,
                }]
            },
        }
    },

 在页面中写一个盒子，用来装你的地图，你可以这么写

<div id="map" ref="myEchart" :style="{width: this.winWidth() / 1.8 + ''px'',height: (this.winHeight()-89) / 0.95 + ''px''}"></div>
//因为我的需要适配屏幕，宽高你可以结合实际需要来定

在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博客