vue3 实现echarts 3D 地图

目录

一、环境准备

[1. 安装依赖](#1. 安装依赖)

[2. 准备地图数据](#2. 准备地图数据)

[二、Vue3 组件实现](#二、Vue3 组件实现)

[1. 基础组件结构](#1. 基础组件结构)

[2. 地图数据请求方法](#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.json
  if (!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 效果的交互式地图，可根据需求进一步优化样式和数据展示。