vue+echarts+3D地图 制作大屏

基于3d地图做的一些效果,首先看下效果图

vue+echarts+3D地图 制作大屏_第1张图片​​​​​​​

准备工作:下载echarts 和3d地图需要用到的依赖包,版本随意就行

​​​​​​​

下载依赖之后,在页面引入,引入网上下载的地图json文件

用户不直接操作地图,因为是大屏,只做展示使用,右边列表有两种模式,如果列表数据没有撑开盒子,每3秒轮播高亮,高亮到那个地区,地图上就高亮那一块区域,且显示对应的tooltip(这里没有使用echarts中的tooltip,因为高亮地图的时候,2d地图可以主动触发tooltip出现,但是3d里面不支持,所以这个弹框是我自己写的,因为项目中只有3个地区的数据,只用写3个弹框就行,如果梅个区域都有数据,不建议使用这种方式)

第二种展示方式就是,如果右边列表数据过多,就会无限滚动,当高亮哪一个区域的时候,就高亮某一个地图区域

vue+echarts+3D地图 制作大屏_第2张图片​​​​​​​

 

重点主要将如何在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);
            }
        },

地图已经高亮,那么对应的弹框是不是也应该出现,来看我写的自定义弹框,设置了三个变量来控制显隐,当滚到对应区域的时候,就让这个弹框出现,其他隐藏,弊端就是这个定位的位置是写死的,如果要求适配各种大屏,那么需要写几套样式,比较复杂。

vue+echarts+3D地图 制作大屏_第3张图片

样式如下:

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

vue+echarts+3D地图 制作大屏_第4张图片

你可能感兴趣的:(echarts,vue.js,3d)