使用 ECharts-GL 实现世界级、国家级、省市级 3D 地图

一. 前言

在数据可视化领域，二维地图早已司空见惯，它以直观的方式呈现数据关系，帮助我们理解复杂的信息。然而，在追求更优（高大上）用户体验的今天，传统的二维展示方式已经不满足客户的体验需求，同时平面图表也难以充分展现地理信息的丰富维度和空间关系。于是，三维数据可视化越来越受到广大用户的青睐。

ECharts-GL，作为 ECharts 家族的一员，更是专为三维数据可视化而生，它不仅继承了 ECharts 的易用性和高性能，还引入了 WebGL 技术，为用户提供了一个强大且直观的工具，用于创建令人惊叹的 3D 地图和数据可视化作品。

本篇文章，你将学习到如何利用 ECharts-GL 构建沉浸式的 3D 地图体验。并学习如何配置和定制地图的部分细节，包括地形、光照、视角以及纹理的三维表示。

二. 准备 geoJson 数据

首先，我们需要准备多层级的地图数据，比如世界、国家、省份、城市等各级别的地理数据，以及每个区域对应的数据指标，这些数据通常是以 JSON 格式提供的地理信息数据。同时，确保数据格式符合 ECharts 的要求，可以参考官方文档了解各种地图类型的数据格式。

我们可以在一些其他网站获取最新的 geoJson，比如：通过阿里云 DataV 数据可视化平台下载最新的 json 数据文件，以保证目前所有市区的数据都是最新的。

如下图所示，选择数据版本后，点击页面上的下载按钮后即可以下载 json 文件:

三、实现过程：

1、安装echarts和echarts-gl插件：

npm i echarts@5.2.0 -S
npm i echarts-gl@2.0.8 -S

2、在Vue组件中引入echarts和echarts-gl：

  import * as echarts from "echarts";
  import "echarts-gl";

3、创建一个div容器用于显示地图：

<template>
    <div ref="mapRef" class="echarts"></div>
</template>

4、在Vue3组件的mounted生命周期中初始化echarts并绘制地图：

<script setup>
  import { ref, reactive, onMounted } from "vue";
  import * as echarts from "echarts";
  import "echarts-gl";
  import geoJson from "@/assets/csx.json";
  
  const mapRef = ref(null);
  let map = ref();
  
  onMounted(() => {
    const myChart = echarts.init(mapRef.value);
    echarts.registerMap("china", geoJson);
  
    // 图表配置项
    const option = {
      series: [
        {
          type: "map3D",
          map: "china",
          roam: true,
          boxWidth: 55,
          itemStyle: {
            color: "#286ECA", // 地图板块的颜色
            opacity: 1, // 图形的不透明度 [ default: 1 ]
            borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域
            borderColor: "#286ECA", // 图形描边的颜色。[ default: #333 ]
          },
          li