echarts 绘制3D中国地图

原创

已于 2025-09-17 16:19:16 修改 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #3d #swift

于 2025-07-15 11:25:31 首次发布

一、项目背景

本项目基于 ECharts 和 ECharts-GL 实现了一个3D中国地图的可视化页面，支持地图区域高亮、涟漪散点、动态飞线等效果，适用于地理数据展示、流向分析等场景。

二、效果图

3D中国地图，带有地形贴图和立体边界。
主要城市以涟漪散点高亮显示。
城市间流向以动态飞线展示，直观表现数据流动。

三、实现过程

1. 技术选型

ECharts：强大的数据可视化库，支持丰富的图表类型和地理可视化。
ECharts-GL：ECharts 的 3D 扩展，支持三维地图、三维柱状图等高级可视化效果。
Vue.js：前端主流框架，负责页面结构和生命周期管理。

2. 地图数据准备

使用了 china.json 作为中国地图的 GeoJSON 数据源，放置于 src/utils/china.json。
贴图采用了 map.svg，增强地图的地形感和美观度。
点击这里获取中国地图json

3. 主要实现步骤

（1）依赖版本选择与安装

 "echarts": "^5.6.0",
 "echarts-gl": "^2.0.9",

（2）地图注册与初始化

在 mounted 钩子中，注册中国地图并初始化 ECharts 实例：

import * as echarts from 'echarts'
import "echarts-gl";
import geoJson from '@/utils/china.json'

mounted() {
   
   
	//点击散点城市坐标位置
    const chinaData = [
        {
   
    name: '北京市', value: [116.405285, 39.904989] },
        {
   
    name: '成都', value: [104.0657, 30.6598] },
        {
   
    name: '上海', value: [121.4737, 31.2304] },
        {
   
    name: '拉萨', value: [91.11, 29.97] }
    ];
    const myChart = echarts.init(document.getElementById('mapContainer'));
    this.initChart('china', chinaData, myChart)
}

（3）3D地图与贴图

使用 geo3D 配置项实现三维地图。
通过 colorMaterial.detailTexture 属性，将2D地图渲染为纹理贴图，贴在3D地图表面，提升真实感。

因3d地图无法实现飞线效果，故此采用3d和2d贴合实现，散点效果

geo3D: {
   
   
    map: 'china',
    regionHeight: 2.1,
    shading: 'color',
    colorMaterial: {
   
   
        detailTexture: mapBg, // 纹理贴图
        textureTiling: 1
    },
    // ... 视角、边界等配置
}

（4）下层地图与分层效果

通过 series 添加 map3D 类型，设置不同的 regionHeight，实现地图分层立体感。

（5）2D地图贴图生成

LoadMapping 方法生成2D地图配置，主要用于生成纹理贴图。
贴图采用 SVG 图像，提升地图的美观度和辨识度。

itemStyle: {
   
   
    areaColor: {
   
   
        type: 'pattern',
        image: require('../assets/images/map.svg'),
        repeat: 'no-repeat',
    },
}

（6）涟漪散点与飞线

使用 effectScatter 实现城市位置的涟漪散点动画。
使用 lines 实现城市之间的动态飞线，模拟流向效果。

{
   
   
    type: `effectScatter`,
    coordinateSystem: `geo`,
    rippleEffect: {
   
    period: 5, scale: 4, brushType: 'fill' },
    itemStyle: {
   
    normal: