上一篇分享了一个伪3D的地图，这次我们搞一个真实的3D地图。
效果图如下：
要实现这种效果，首先得引入两个不同的依赖：
echarts-liquidfill和echarts-gl，引入很简单：
npm install echarts-gl
npm install echarts-liquidfill
引入后开始我们的编码工作：
template 部分：
<template>
<div id="map3D" style="width: auto;height: 730px;"></div>
</template>
js部分：
import * as echarts from "echarts";
import "echarts-liquidfill";
import 'echarts-gl';
import BaoJi from "../static/json/baoji.json"
export default {
name: "map_1",
mounted() {
// this.map()
this.Map()
},
methods: {
map() {
const myChart = echarts.init(document.getElementById('map'));
let option = null;
const data1 = [
{
name: '陈仓区', value: 45},
{
name: '金台区', value: 0},
{
name: '凤翔区', value: 63 },
{
name: '岐山县', value: 16 },
{
name: '陇县', value: 69 },
{
name: '千阳县', value: 36 },
{
name: '麟游县', value: 46 },
{
name: '扶风县', value: 51 },
{
name: '渭滨区', value: 68 },
{
name: '凤县', value: 42 },
{
name: '太白县', value: 12 },
{
name: '眉县', value: 60 },
];
echarts.registerMap('baoji', BaoJi);
option = {
visualMap: {
show: false,
min: 0,
max: 100,
inRange: {
color: ['#66a6fa','#0E1E40'],
},
},
tooltip: {
borderWidth: '1',
borderColor: 'rgba(255,255,255,0.3)',
formatter: '{b0}: {c0}', //地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）
textStyle: {
fontSize: '16px', color: '#4d89f8', fontFamily: 'Arial' },
show: false,
},
title: {
show: true,
x: 'center',
y: 'top',
text: '宝鸡市行政区域图',
textStyle: {
color: '#2980b9',
fontSize: 18,
},
},
series: [
{
type: 'map',
map: 'baoji',
zoom: 1.5, // 默认显示级别
layoutCenter: ['50%', '50%'], // 定义地图中心在屏幕中的位置
layoutSize: '100%', // 相对于屏幕宽高的百分比
data: data1,
roam: 'scale', // 缩放'scale'或者平移'move'
aspectScale: 1.5, // scale 地图的长宽比
itemStyle: {
normal: {
// 静态的时候展示样式
areaColor: '#013C62',
shadowColor: '#013C62',
shadowBlur: 20,
shadowOffsetX: -5,
shadowOffsetY: 15,
},
emphasis: {
areaColor: "#f58220" //选中区域的背景色
},
},
label: {
normal: {
//静态的时候展示样式
show: true, //是否显示地图省份得名称
// formatter: '{c0}\n{b0}',
textStyle: {
color: '#dedee7', // 区域文字 颜色
fontSize: 15,
fontFamily: 'Arial',
},
},
emphasis: {
//动态展示的样式
color: '#faf4f4', //选中区域的字体颜色
show: true,
textStyle:{
fontSize: 18,
fontFamily: 'Arial',
}
},
},
// 选中状态下的多边形和标签样式
select: {
itemStyle: {
areaColor: "#f58220" //选中区域的背景色
},
label: {
show: true,
color: '#308cd9',
},
},
}
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
Map(){
const myCharts = echarts.init(document.getElementById('map3D'))
myCharts.showLoading();
echarts.registerMap('map3D', BaoJi);
// 隐藏动画加载效果。
myCharts.hideLoading();
myCharts.setOption({
geo3D: [{
map: 'map3D',
roam: true, //开启缩放
shading: 'realistic',
label: {
show: true, //是否显示市
color: '#faf4f4',
fontSize: 16, //文字大小
fontFamily: '微软雅黑',
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
},
regions: [
{
name: '渭滨区',
// 官方文档regionHeight无效，需配置height属性
height: 8,
itemStyle:{
opacity: 1, // 透明度
borderColor: "#207fce", //分界线颜色
areaColor: '#244779',
color: '#244779',
borderWidth: 0.65, //分界线宽度
},
},
{
name: '金台区',
height: 6,
itemStyle:{
opacity: 1, // 透明度
areaColor: '#2884db',
color: '#2884db',
borderColor: '#222222',
borderWidth: 1,
borderType: 'solid',
},
},
{
name: '凤县',
height: 3,
itemStyle:{
opacity: 1, // 透明度
areaColor: '#2884db',
color: '#2884db',
borderColor: '#222222',
borderWidth: 1,
borderType: 'solid',
},
},
{
name: '扶风县',
height: 4,
itemStyle:{
opacity: 1, // 透明度
borderWidth: 0.6, //分界线宽度
borderColor: "#207fce", //分界线颜色
areaColor: '#244779',
color: '#244779'
},
},
{
name: '太白县',
height: 5,
itemStyle:{
opacity: 1, // 透明度
borderWidth: 0.6, //分界线宽度
borderColor: "#207fce", //分界线颜色
areaColor: '#244779',
color: '#244779'
},
},
{
name: '岐山县',
height: 6,
itemStyle:{
opacity: 1, // 透明度
areaColor: '#2884db',
color: '#2884db',
borderColor: '#222222',
borderWidth: 1,
borderType: 'solid',
},
},
{
name: '眉县',
height: 7,
itemStyle:{
opacity: 1, // 透明度
areaColor: '#2884db',
color: '#2884db',
borderColor: '#222222',
borderWidth: 1,
borderType: 'solid',
},
},
{
name: '凤翔区',
height: 8,
itemStyle:{
opacity: 1, // 透明度
borderWidth: 0.6, //分界线宽度
borderColor: "#207fce", //分界线颜色
areaColor: '#244779',
color: '#244779'
},
},
{
name: '千阳县',
height: 9,
itemStyle:{
opacity: 1, // 透明度
areaColor: '#2884db',
color: '#2884db',
borderColor: '#222222',
borderWidth: 1,
borderType: 'solid',
},
},
{
name: '陇县',
height: 10,
itemStyle:{
opacity: 1, // 透明度
areaColor: '#2884db',
color: '#2884db',
borderColor: '#222222',
borderWidth: 1,
borderType: 'solid',
},
},
{
name: '麟游县',
height: 11,
itemStyle:{
opacity: 1, // 透明度
borderWidth: 0.6, //分界线宽度
borderColor: "#207fce", //分界线颜色
areaColor: '#244779',
color: '#244779'
},
},
{
name: '陈仓区',
height: 5,
itemStyle:{
opacity: 1, // 透明度
borderWidth: 0.6, //分界线宽度
borderColor: "#207fce", //分界线颜色
areaColor: '#244779',
color: '#244779'
},
}
]
}],
series:[{
boxDepth: 120, //地图倾斜度
regionHeight: 3, //地图厚度
roam: 'scale', // 缩放'scale'或者平移'move'
// 真实感材质相关配置 shading: 'realistic'时有效
realisticMaterial: {
detailTexture: '#fff', // 纹理贴图
textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
metalness: 0, // 0材质是非金属 ，1金属
},
type: 'bar3D',
coordinateSystem: 'geo3D',
barSize: 0.1,
minHeight: 1,
silent: true,
itemStyle: {
color: 'orange',
opacity: 0.9,
},
}]
})
//自适应大小
window.onresize = () => {
myCharts.resize()
}
},
}
按照步骤来就可以实现和效果图相同的效果，同理，也可以将宝鸡市换成其他城市，但注意的是：改变城市后，对应的regions也要做出改变，负责会报错或变得奇奇怪怪。
