| vue+echarts+3D地图 制作大屏 | 您所在的位置：网站首页 › 22-08-39C是哪个地区 › vue+echarts+3D地图 制作大屏 |
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博客
|
【本文地址】