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

原创已于 2024-11-07 15:29:52 修改 · 4.3k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #3d #前端 #vue.js

于 2024-11-06 15:58:24 首次发布

Vue3.0 同时被 2 个专栏收录

14 篇文章

订阅专栏

Echarts

2 篇文章

订阅专栏

在这里插入图片描述

一、获取地图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>