上一篇分享了一个伪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也要做出改变，负责会报错或变得奇奇怪怪。
