今天我将基于上一个博客讲到的Echarts地图的相关知识，来实现一个三维地图的效果，我将通过两种方式来实现，一种是伪3D效果的中国地图效果，为什么说是伪3D效果呢，跟着做完你就明白了；一种是真正的三维效果中国地图；下面先看下最终的效果图
目录
- 创建项目
- 引入并注册地图
- 伪3D效果的中国地图
- 3D效果的中国地图
创建项目
首先创建项目，我这个项目是基于Vue3+Vite+Echarts5开发的，所以你需要先搭建好项目环境，具体创建vue3项目的步骤，我这里就不啰嗦了，还不知道怎么创建的，赶紧百度学习下吧。当然，你也可以基于HTML+CSS+JavaScript的原生环境创建项目，因为我这篇文章不涉及与后台的交互，所以，你用HTML+CSS+JavaScript的方式也是可以实现的，当然了，引入Echarts的方式就需要你借助 script 标签直接通过 CDN 来使用了。
- 项目创建完成后，需要先安装Echarts
npm install echarts --save
- 准备地图数据
下载地图数据，并将其放到src目录下的assets文件夹 - 新建MapChart3D.vue组件
在components文件夹新建MapChart3D.vue组件，所有有关地图的代码逻辑都放到这个组件下 - 新建一个div，作为Echarts地图的容器
<template>
<div ref="chart" style="width: 100%;height: 100vh;"></div>
</template>
- 引入vue的组合式API
import { ref, onMounted } from 'vue'
const chart = ref(null)
引入并注册地图
接下来我们使用import方式导入Echarts组件库和json格式的地图文件
import * as echarts from 'echarts'
import cmap from '../assets/china.json'
使用echarts.registerMap()方法注册地图
echarts.registerMap("china", cmap)
在vue的onMounted中调用 echarts.init方法将div组件作为容器绑定到Echarts实例
onMounted(async () => {
const myChart = echarts.init(chart.value)
})
这样，我们就将前面的准备工作完成了，下面就是对Echarts地图配置项的配置操作了。
伪3D效果的中国地图
要配置Echarts的地图组件，其实非常简单，我们前面一个博客也讲过了，只需要将series系列中的配置对象的type属性设置为map，然后将map配置属性配置为我们前面注册的地图china，就可以了，配置完成后，通过myChart.setOption方法将配置项传入。
const option = {
series: [{
type: 'map',
map: 'china'
}]
};
myChart.setOption(option)
这样配置以后，我们得到的只是一个简单的灰色地图，如下图
下面我们来慢慢优化
- 首先，我想实现具有科技感的背景，所以，我们给Echarts添加一个背景色，选择科技蓝作为背景
const option = {
//设置背景颜色
backgroundColor: '#020933',
series: [{
type: 'map',
map: 'china'
}]
};
myChart.setOption(option)
配置完成后效果如下
2. 灰色的地图太难看了，我们来调整下，我们给series添加itemStyle配置项，在里面添加边线颜色。边线宽度和填充颜色
const option = {
//设置背景颜色
backgroundColor: '#020933',
series: [{
type: 'map',
map: 'china',
itemStyle: {
borderColor: '#2ab8ff',
borderWidth: 1.5,
areaColor: '#12235c',
},
}]
};
myChart.setOption(option)
修改后，刷新浏览器看下效果，这样就比较nice了。
3. 整体颜色我们已经调整好了，但是我们发现，地图上面没有各个省市的名字，下面我们通过配置series中的label配置项来显示文字，我们将label中的show设置为true，颜色color设置为白色
const option = {
//设置背景颜色
backgroundColor: '#020933',
series: [{
type: 'map',
map: 'china',
itemStyle: {
borderColor: '#2ab8ff',
borderWidth: 1.5,
areaColor: '#12235c',
},
label: {
show: true,
color: '#fff'
},
}]
};
myChart.setOption(option)
4. 现在我们已经实现了一个平面的二维地图，那我们如何来实现地图的三维效果呢？没错，你猜对了，我现在要在重新添加一个地图，让它稍微与上面的地图有一定的偏移量，这样就在视觉上形成了三维效果了，所以我在开始说是实现的伪3D效果，如果我们想要实现真正的三维地图，可以用Threejs将其拉伸为三维地图，这里就不多讲了，有兴趣的小伙伴可以看我关于Threejs相关的博客。
在Echarts中还提供了geo配置项，这个配置项用于配置地理坐标系组件。通过配置里面的map属性，指定我们前面引入的china，
geo: {
map: 'china',
},
上面配置添加以后，我们发现页面没有任何效果，这是因为我们两个地图现在是重叠在一起的，我们需要对它们的位置进行偏移，使其产生层次感。我们给geo配置项添加itemStyle属性，设置其区域颜色、阴影颜色，同时设置Y轴阴影的偏移量
geo: {
map: 'china',
itemStyle: {
areaColor: '#013C62',//地区颜色
shadowColor: '#182f68',//阴影颜色
shadowOffsetX: 0,//阴影偏移量
shadowOffsetY: 15, //阴影偏移量
}
},
设置完成后，刷新浏览器，看下效果，我们发现已经有了一点点三维的味道了
5. 到这里，我们地图的三维效果已经呈现出来了，只是有一个细节我们还要处理下，就是地图右下角的南海诸岛是一个方框框起来的，这样我们两个图层叠加后，就显得比较的假，所以，我们需要对它进行处理。
6. 我们上一个博客曾经介绍过，echarts.registerMap()方法有一个可选参数，我们可以通过它来处理上面的问题，代码如下：
```bash
echarts.registerMap("china", cmap, {
'南海诸岛': {
left: 114,
top: 10,
width: 0,
height: 0,
}
})
刷新浏览器，看下效果，这就比较完美了
3D效果的中国地图
要实现三维地图效果，我们需要引入Echarts提供的echarts-gl库，在代码中引入它
import 'echarts-gl'; // 引入 echarts-gl 库
然后在option配置项中配置geo3D，代码如下
const option = {
backgroundColor: '#020933',
geo3D: {
map: 'china', // 设置地图类型为 map，并指定地图数据源
itemStyle: {
color: '#12235c',
opacity: 0.8,
borderWidth: 1,
borderColor: '#2ab8ff',
},
},
}
上面代码中，我们在geo3D中配置map属性，设置地图类型为 map，并指定地图数据源。
itemStyle配置地图样式
刷新浏览器看效果
好了，关于Echarts地图三维效果的呈现就聊到这里，有问题的小伙伴评论区留言
