vue3 使用echarts map绘制3D中国地图，实现点位涟漪和飞线图效果_echarts map3d

一、获取地图json数据

在echarts的github资源文件里下载china-new.json

二、绘制3D地图

使用geo即可把下载的json地图数据渲染出来，要实现3D效果就需要渲染多层，根据不同的样式和颜色进行层级区分，一般实现3~5层，渲染3层就可以实现地图的3D效果，想要更加立体可渲染多几层。

geo: [ { map: \'china\', aspectScale: 1, zoom: 1.2, layoutCenter: [\'50%\', \'50%\'], layoutSize: \'100%\', show: true, roam: false, label: { show: false, // 各个省市县的名字 color: \'#fff\', }, itemStyle: { // 每块的样式 areaColor: { type: \'linear\', x: 1200, y: 0, x2: 0, y2: 0, colorStops: [ // 设置地图的渐变颜色  { offset: 0, color: \'rgba(3,27,78,0.75)\', // color: \'rgba(0,63,142,.2)\'  },  { offset: 1, color: \'rgba(58,149,253,0.75)\', // color: \'rgba(0,63,142,.82)\'  }, ], global: true, // 缺省为 false }, // borderColor: \'#c0f3fb\', borderColor: \'rgba(192,243,251,0.5)\', borderWidth: 0.8, }, emphasis: { itemStyle: { show: false, color: \'#fff\', areaColor: \'rgba(0,254,233,0.6)\', }, label: { show: true, color: \'#fff\', }, } }, // 重影 { type: \'map\', map: \'china\', zlevel: -1, aspectScale: 1, zoom: 1.2, layoutCenter: [\'50%\', \'51%\'], layoutSize: \'100%\', roam: false, silent: true, itemStyle: { borderWidth: 1, borderColor: \'rgba(58,149,253,0.8)\', shadowColor: \'rgba(172, 122, 255,0.5)\', shadowOffsetY: 5, shadowBlur: 15, areaColor: \'rgba(5,21,35,0.1)\', } }, { type: \'map\', map: \'china\', zlevel: -2, aspectScale: 1, zoom: 1.2, layoutCenter: [\'50%\', \'52%\'], layoutSize: \'100%\', roam: false, silent: true, itemStyle: { borderWidth: 5, borderColor: \'rgba(5,9,57,0.8)\', shadowColor: \'rgba(29, 111, 165,0.8)\', shadowOffsetY: 15, shadowBlur: 10, areaColor: \'rgba(5,21,35,0.1)\', } }, ]

三、地图打点，实现涟漪效果

在series中实现打点功能，与geo同级。

series: [ { type: \'effectScatter\', coordinateSystem: \'geo\', data: data.value, symbolSize: 14, zlevel: 1, rippleEffect: { // period: 2.5, //波纹秒数 brushType: \'fill\', //stroke(涟漪)和fill(扩散)，两种效果 scale: 4 //波纹范围 }, itemStyle: { normal: { color: \'#ff435a\', borderColor: \'#FFF\', borderWidth: \'2\' }, }, label: { show: true, color: \"#FFF\", formatter(value) { return value.name }, position: \'top\', shadowBlur: 10, padding: [0, 0, 6, 0], shadowColor: \'rgba(0, 0, 0, 1)\', shadowOffsetX: 5, shadowOffsetY: 5, fontSize: 14, }, } ],

四、隐藏右下角小地图

实现3D效果后，右下角的小地图也会跟着实现3D效果，多层重叠会让文字或图形被覆盖，在保证地图完整显示的前提下，可对某些层进行相关的隐藏处理。

隐藏前的效果：

regions: [ { name: \"南海诸岛\", show: false, itemStyle: {  // 隐藏地图  normal: { opacity: 0, // 为 0 时不绘制该图形  } }, label: {  show: false // 隐藏文字 } } ]

隐藏部分层后的效果：

五、实现飞线图效果

在series中添加并对飞线的展现效果进行配置，添加filterLines方法对飞线数据进行处理。

// 格式化点位飞线数据function filterLines(filterData) { let dataLines = [] let center = data.value[0].value // 终点位置的经纬度 filterData.forEach((v) => { let lonLat = [v.value[0], v.value[1]] dataLines.push({ coords: [lonLat, center], }) }) return dataLines}series: [ { type: \'lines\', // 飞线图 zlevel: 2, effect: { show: true, period: 3, //箭头指向速度，值越小速度越快 trailLength: 0.03, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: \'arrow\', //箭头图标 symbolSize: 6, //图标大小 }, lineStyle: { color: \'#EE5652\', width: 1, //尾迹线条宽度 opacity: 1, //尾迹线条透明度 curveness: 0.3, //尾迹线条曲直度 }, data: filterLines(data.value), symbol: [\'none\', \'circle\'], //飞线起点终点点位样式 symbolSize: 10, // 飞线起点终点点位大小 }]

六、完整代码

<template> <div ref=\"mapChart\" style=\"height:100%\" /></template><script setup>import * as echarts from \'echarts\'import { onMounted } from \'vue\'import china_json from \"@/assets/dataView/china-new.json\";const mapChart = ref(null)const data = ref([ {name: \'北京\', value: [116.413387,39.911588]}, {name: \'广州市\', value: [113.2644, 23.1291]}, {name: \'成都市\', value: [104.0657, 30.6598]}, {name: \'苏州市\', value: [120.6195, 31.2995]}, {name: \'北京市\', value: [116.404, 39.9042]}, {name: \'连云港市\', value: [119.1676, 34.5934]}, {name: \'南京市\', value: [118.7674, 32.0415]}, {name: \'杭州市\', value: [120.1535, 30.2874]}, {name: \'乌鲁木齐市\', value: [87.6168, 43.7928]}, {name: \'拉萨市\', value: [91.11, 29.97]}, {name: \'西安市\', value: [108.953, 34.2779]}, {name: \'南宁市\', value: [108.32006, 22.82402]},])onMounted(() => { getList()})// 格式化点位飞线数据function filterLines(filterData) { let dataLines = [] let center = data.value[0].value // 飞线图终点的地位经纬度 filterData.forEach((v) => { let lonLat = [v.value[0], v.value[1]] dataLines.push({ coords: [lonLat, center], // 高版本的飞线数据组 }) }) return dataLines}function getList() { echarts.registerMap(\'china\', china_json ) const mapChartIntance = echarts.init(mapChart.value, \"macarons\") mapChartIntance.setOption({ series: [ { type: \'lines\', // 飞线图 zlevel: 2, effect: { show: true, period: 3, //箭头指向速度，值越小速度越快 trailLength: 0.03, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: \'arrow\', //箭头图标 symbolSize: 6, //图标大小 }, lineStyle: { color: \'#EE5652\', width: 1, //尾迹线条宽度 opacity: 1, //尾迹线条透明度 curveness: 0.3, //尾迹线条曲直度 }, data: filterLines(data.value), symbol: [\'none\', \'circle\'], //飞线起点终点点位样式 symbolSize: 10, // 飞线起点终点点位大小 }, { type: \'effectScatter\', coordinateSystem: \'geo\', data: data.value, symbolSize: 14, zlevel: 1, rippleEffect: { // period: 2.5, //波纹秒数 brushType: \'fill\', //stroke(涟漪)和fill(扩散)，两种效果 scale: 4 //波纹范围 }, itemStyle: { normal: { color: \'#ff435a\', borderColor: \'#FFF\', borderWidth: \'2\' }, }, label: { show: true, color: \"#FFF\", formatter(value) { return value.name }, position: \'top\', shadowBlur: 10, padding: [0, 0, 6, 0], shadowColor: \'rgba(0, 0, 0, 1)\', shadowOffsetX: 5, shadowOffsetY: 5, fontSize: 14, }, } ], geo: [ { map: \'china\', aspectScale: 1, zoom: 1.2, layoutCenter: [\'50%\', \'50%\'], layoutSize: \'100%\', show: true, roam: false, label: { show: false, // 各个省市县的名字 color: \'#fff\', }, itemStyle: { // 每块的样式 areaColor: { type: \'linear\', x: 1200, y: 0, x2: 0, y2: 0, colorStops: [ // 设置地图的渐变颜色  { offset: 0, color: \'rgba(3,27,78,0.75)\', // color: \'rgba(0,63,142,.2)\'  },  { offset: 1, color: \'rgba(58,149,253,0.75)\', // color: \'rgba(0,63,142,.82)\'  }, ], global: true, // 缺省为 false }, // borderColor: \'#c0f3fb\', borderColor: \'rgba(192,243,251,0.5)\', borderWidth: 0.8, }, emphasis: { itemStyle: { show: false, color: \'#fff\', areaColor: \'rgba(0,254,233,0.6)\', }, label: { show: true, color: \'#fff\', }, } // regions: [ // { // name: \"南海诸岛\", // show: false, // itemStyle: { // // 隐藏地图 // normal: { // opacity: 0, // 为 0 时不绘制该图形 // } // }, // label: { // show: false // 隐藏文字 // } // } // ] }, // 重影 { type: \'map\', map: \'china\', zlevel: -1, aspectScale: 1, zoom: 1.2, layoutCenter: [\'50%\', \'51%\'], layoutSize: \'100%\', roam: false, silent: true, itemStyle: { borderWidth: 1, borderColor: \'rgba(58,149,253,0.8)\', shadowColor: \'rgba(172, 122, 255,0.5)\', shadowOffsetY: 5, shadowBlur: 15, areaColor: \'rgba(5,21,35,0.1)\', }, regions: [ { name: \"南海诸岛\", show: false, itemStyle: {  // 隐藏地图  normal: { opacity: 0, // 为 0 时不绘制该图形  } }, label: {  show: false // 隐藏文字 } } ] }, { type: \'map\', map: \'china\', zlevel: -2, aspectScale: 1, zoom: 1.2, layoutCenter: [\'50%\', \'52%\'], layoutSize: \'100%\', roam: false, silent: true, itemStyle: { borderWidth: 5, borderColor: \'rgba(5,9,57,0.8)\', shadowColor: \'rgba(29, 111, 165,0.8)\', shadowOffsetY: 15, shadowBlur: 10, areaColor: \'rgba(5,21,35,0.1)\', }, regions: [ { name: \"南海诸岛\", show: false, itemStyle: {  // 隐藏地图  normal: { opacity: 0, // 为 0 时不绘制该图形  } }, label: {  show: false // 隐藏文字 } } ] }, // { // type: \'map\', // map: \'china\', // zlevel: -2, // aspectScale: 1, // zoom: 1.2, // layoutCenter: [\'50%\', \'52%\'], // layoutSize: \'100%\', // roam: false, // silent: true, // itemStyle: { // borderWidth: 1, // borderColor: \'rgba(58,149,253,0.6)\', // shadowColor: \'rgba(65, 214, 255,0.6)\', // shadowOffsetY: 5, // shadowBlur: 15, // areaColor: \'rgba(5,21,35,0.1)\', // }, // regions: [ // { // name: \"南海诸岛\", // show: false, // itemStyle: { // // 隐藏地图 // normal: { // opacity: 0, // 为 0 时不绘制该图形 // } // }, // label: { // show: false // 隐藏文字 // } // } // ] // }, // { // type: \'map\', // map: \'china\', // zlevel: -3, // aspectScale: 1, // zoom: 1.2, // layoutCenter: [\'50%\', \'53%\'], // layoutSize: \'100%\', // roam: false, // silent: true, // itemStyle: { // borderWidth: 1, // borderColor: \'rgba(58,149,253,0.4)\', // shadowColor: \'rgba(29, 111, 165,1)\', // shadowOffsetY: 15, // shadowBlur: 10, // areaColor: \'rgba(5,21,35,0.1)\', // }, // regions: [ // { // name: \"南海诸岛\", // show: false, // itemStyle: { // // 隐藏地图 // normal: { // opacity: 0, // 为 0 时不绘制该图形 // } // }, // label: { // show: false // 隐藏文字 // } // } // ] // }, // { // type: \'map\', // map: \'china\', // zlevel: -4, // aspectScale: 1, // zoom: 1.2, // layoutCenter: [\'50%\', \'54%\'], // layoutSize: \'100%\', // roam: false, // silent: true, // itemStyle: { // borderWidth: 5, // borderColor: \'rgba(5,9,57,0.8)\', // shadowColor: \'rgba(29, 111, 165,0.8)\', // shadowOffsetY: 15, // shadowBlur: 10, // areaColor: \'rgba(5,21,35,0.1)\', // }, // regions: [ // { // name: \"南海诸岛\", // show: false, // itemStyle: { // // 隐藏地图 // normal: { // opacity: 0, // 为 0 时不绘制该图形 // } // }, // label: { // show: false // 隐藏文字 // } // } // ] // }, ], }) window.addEventListener(\"resize\", () => { mapChartIntance.resize(); })}</script>