vue3 实现echarts 3D 地图

目录

一、环境准备

1. 安装依赖

2. 准备地图数据

二、Vue3 组件实现

1. 基础组件结构

2. 地图数据请求方法

三、关键配置说明

四、常见问题解决

---

在 Vue3 中实现 ECharts 3D 地图，核心是结合echarts和echarts-gl（ECharts 的 3D 扩展库），通过注册地图数据、配置 3D 视角和样式来实现。以下是详细步骤和代码示例：

一、环境准备

1. 安装依赖

需要安装echarts（核心库）和echarts-gl（3D 支持库）：

npm install echarts echarts-gl --save
# 或 yarn
yarn add echarts echarts-gl

2. 准备地图数据

ECharts 3D 地图需要基于GeoJSON 格式的地图数据（如国家、省份、城市的边界坐标）。

• 数据来源：可从 ECharts 官方地图数据 或 阿里云 DataV 地图选择器 下载（需注意数据版权）。
• 示例：本文以 “中国地图” 为例，假设已下载china.json（GeoJSON 格式），并放在public/map/目录下。

二、Vue3 组件实现

1. 基础组件结构

创建一个ECharts3DMap.vue组件，包含地图容器、初始化逻辑和 3D 配置：

<template><!-- 地图容器：必须设置宽高 --><div ref="mapRef" class="map-container"></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl' // 引入3D支持
import { getMapData } from './mapData' // 封装的地图数据请求方法// 地图容器DOM
const mapRef = ref(null)
// ECharts实例
let chartInstance = null// 初始化地图
const initMap = async () => {// 1. 获取地图GeoJSON数据（从public目录加载）const mapGeoJson = await getMapData()// 2. 初始化ECharts实例chartInstance = echarts.init(mapRef.value)// 3. 注册地图数据（mapName需与后续配置中的geo3D.map一致）echarts.registerMap('china', mapGeoJson)// 4. 配置3D地图参数const option = {// 3D地图核心配置geo3D: {map: 'china', // 对应注册的地图名称roam: true, // 允许鼠标缩放、平移altitude: 50, // 地图高度（3D效果强度）// 视角配置（相机位置）viewControl: {distance: 120, // 相机与地图的距离（数值越小越近）alpha: 30, // 仰角（0-90度，越大越俯视）beta: 40, // 方位角（0-360度，控制旋转）projection: 'perspective' // 透视投影（3D效果更真实）},// 地图表面样式itemStyle: {color: '#0066CC', // 基础颜色borderColor: '#fff', // 边界颜色borderWidth: 1 // 边界宽度},// 高亮样式（鼠标hover时）emphasis: {itemStyle: {color: '#FF6600' // 高亮颜色},label: {show: true, // 显示省份名称color: '#fff', // 文字颜色fontSize: 12}},// 光照配置（增强3D立体感）light: {main: {intensity: 1.2, // 主光源强度shadow: true, // 开启阴影shadowQuality: 'high', // 阴影质量direction: [10, 20, 30] // 光源方向（x,y,z轴）},ambient: {intensity: 0.5 // 环境光强度}}},// 可选：添加数据点（如城市标记）series: [{type: 'scatter3D', // 3D散点图coordinateSystem: 'geo3D', // 关联3D地图坐标系data: [{ name: '北京', value: [116.4074, 39.9042, 100] }, // [经度, 纬度, 高度]{ name: '上海', value: [121.4737, 31.2304, 80] },{ name: '广州', value: [113.2644, 23.1291, 60] }],symbolSize: 10, // 点大小itemStyle: {color: '#FF0000' // 点颜色},label: {show: true, // 显示点名称formatter: params => params.name}}]}// 5. 设置配置项渲染地图chartInstance.setOption(option)
}// 监听窗口大小，自适应地图
const handleResize = () => {chartInstance?.resize()
}// 组件挂载时初始化
onMounted(() => {initMap()window.addEventListener('resize', handleResize)
})// 组件卸载时销毁实例
onUnmounted(() => {window.removeEventListener('resize', handleResize)chartInstance?.dispose()
})
</script><style scoped>
.map-container {width: 100%;height: 800px; /* 必须设置高度，否则地图不显示 */
}
</style>

2. 地图数据请求方法

创建mapData.js封装地图数据请求（从 public 目录加载本地 GeoJSON）：

// mapData.js
export const getMapData = async () => {const response = await fetch('/map/china.json') // public/map/china.jsonif (!response.ok) {throw new Error('地图数据加载失败')}return response.json()
}

三、关键配置说明

1. geo3D 核心属性

   • map：关联已注册的地图名称（需与registerMap的第一个参数一致）。
   • roam：开启后支持鼠标拖拽（平移）、滚轮（缩放）、右键旋转。
   • viewControl：控制 3D 视角，distance越小越贴近地图，alpha控制俯视角度，beta控制旋转方向。
   • light：通过光源设置增强 3D 立体感，main为主光源，ambient为环境光。

2. 数据可视化扩展

   • 可通过series添加 3D 散点图（scatter3D）、热力图（heatmap3D）等，关联geo3D坐标系实现数据叠加。
   • 如需显示省份 / 城市名称，在geo3D.emphasis.label.show中开启，或通过series.label自定义。

3. 响应式处理

   • 监听窗口 resize 事件，调用chartInstance.resize()实现地图自适应。
   • 若地图数据需动态更新，修改option后重新调用setOption(option)即可。

四、常见问题解决

1. 地图不显示

   • 检查容器是否设置宽高（必须非 0）。
   • 确认地图数据路径正确（public 目录下的文件需用绝对路径/map/xxx.json）。
   • 检查echarts-gl是否正确引入（未引入会导致geo3D无效）。

2. 3D 效果不明显

   • 调整geo3D.altitude（增大高度）、viewControl.distance（减小距离）、light光源参数增强立体感。

3. 地图数据错误

   • 确保 GeoJSON 格式正确（可通过 GeoJSON 验证工具 检查）。
   • 若需展示省级 / 市级地图，替换对应 GeoJSON 数据（如jiangsu.json），并修改registerMap的名称。

注意：如果报错可能是版本问题，echarts和echarts-gl能实现3D 且匹配的版本为：

"echarts":"^5.2.0"
"echarts-gl":"^2.0.8"

安装指定版本，匹配的是:

npm install echarts5.2.0 --save
npm install echarts-gl@2.0.8 --save

通过以上步骤，即可在 Vue3 中实现具有 3D 效果的交互式地图，可根据需求进一步优化样式和数据展示。