Today I will realize the effect of a three-dimensional map based on the relevant knowledge of the Echarts map mentioned in the previous blog. I will achieve it in two ways. One is the Chinese map effect with a pseudo 3D effect. Why is it called a pseudo 3D effect? Well, you will understand after following along; one is a real three-dimensional effect map of China; let’s take a look at the final rendering
Table of contents
create project
First create a project. My project is developed based on Vue3+Vite+Echarts5, so you need to build the project environment first. The specific steps to create a vue3 project. let's go. Of course, you can also create projects based on the native environment of HTML+CSS+JavaScript, because my article does not involve interaction with the background, so you can also use HTML+CSS+JavaScript. Of course, introduce Echarts The method requires you to use the script tag directly through the CDN.
- After the project is created, you need to install Echarts first
npm install echarts --save
- Prepare map data
Download the map data and put it in the assets folder under the src directory - Create a new MapChart3D.vue component
Create a new MapChart3D.vue component in the components folder, and put all the code logic related to the map under this component - Create a new div as the container of the Echarts map
<template>
<div ref="chart" style="width: 100%;height: 100vh;"></div>
</template>
- Introducing Vue's combined API
import {
ref, onMounted } from 'vue'
const chart = ref(null)
Import and register the map
Next, we use the import method to import the Echarts component library and the map file in json format
import * as echarts from 'echarts'
import cmap from '../assets/china.json'
How to echarts.registerMap()register the map
echarts.registerMap("china", cmap)
Call the echarts.init method in vue's onMounted to bind the div component to the Echarts instance as a container
onMounted(async () => {
const myChart = echarts.init(chart.value)
})
In this way, we have completed the previous preparations, and the following is the configuration operation of the Echarts map configuration items.
China map with pseudo 3D effect
To configure the map component of Echarts, it is actually very simple. We also mentioned it in a previous blog. You only need to set the type attribute of the configuration object in the series series to map, and then configure the map configuration attribute to the map China we registered earlier. That's it. After the configuration is complete, pass in the configuration items through the myChart.setOption method.
const option = {
series: [{
type: 'map',
map: 'china'
}]
};
myChart.setOption(option)
After this configuration, what we get is just a simple gray map, as shown in the figure
below. Let's slowly optimize it.
- First of all, I want to achieve a background with a sense of technology, so we add a background color to Echarts and choose technology blue as the background
const option = {
//设置背景颜色
backgroundColor: '#020933',
series: [{
type: 'map',
map: 'china'
}]
};
myChart.setOption(option)
After the configuration is complete, the effect is as follows
2. The gray map is too ugly. Let's adjust it. We add the itemStyle configuration item to the series, and add the edge color in it. Border width and fill color
const option = {
//设置背景颜色
backgroundColor: '#020933',
series: [{
type: 'map',
map: 'china',
itemStyle: {
borderColor: '#2ab8ff',
borderWidth: 1.5,
areaColor: '#12235c',
},
}]
};
myChart.setOption(option)
After the modification, refresh the browser to see the effect, which is quite nice.
3. We have adjusted the overall color, but we found that there are no names of provinces and cities on the map. Next, we will display the text by configuring the label configuration item in the series. We will set the show in the label to true, and set the color to color for white
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. Now that we have realized a flat two-dimensional map, how do we realize the three-dimensional effect of the map? That's right, you guessed it right, I'm going to re-add a map now, so that it has a certain offset from the above map, so that a three-dimensional effect is formed visually, so I said at the beginning that it was realized Pseudo 3D effect, if we want to achieve a real 3D map, we can use Threejs to stretch it into a 3D map, I won’t talk about it here, interested friends can read my blog about Threejs.
The geo configuration item is also provided in Echarts, which is used to configure the geographic coordinate system component. Through the map attribute in the configuration, specify the china we introduced earlier,
geo: {
map: 'china',
},
After adding the above configuration, we found that the page has no effect. This is because our two maps are now overlapping, and we need to offset their positions to make them layered. We add the itemStyle attribute to the geo configuration item, set its area color, shadow color, and set the offset of the Y-axis shadow
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,
}
})
Refresh the browser and see the effect, this is more perfect
3D effect map of China
To realize the 3D map effect, we need to introduce the echarts-gl library provided by Echarts, and introduce it in the code
import 'echarts-gl'; // 引入 echarts-gl 库
Then configure geo3D in the option configuration item, the code is as follows
const option = {
backgroundColor: '#020933',
geo3D: {
map: 'china', // 设置地图类型为 map，并指定地图数据源
itemStyle: {
color: '#12235c',
opacity: 0.8,
borderWidth: 1,
borderColor: '#2ab8ff',
},
},
}
In the above code, we configure the map property in geo3D, set the map type to map, and specify the map data source.
itemStyle configures the map style.
This completes the map configuration. I don’t know why the picture is illegal, so I won’t upload it here. Let’s run the test yourself.
Well, this is the end of the chat about the presentation of the 3D effect of the Echarts map. If you have any questions, leave a message in the comment area