使用echarts和echarts-gl绘制3D地图，下面是一个demo演示，echarts版本4.6.0，echarts-gl版本1.1.2，demo启动前先自行安装，至于背景嘛，大家就自行放个背景图啦.
index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map Demo</title>
<link rel="stylesheet" href="./style/index.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./lib/echarts.min.js"></script>
<script src="./lib/echarts-gl.min.js"></script>
</head>
<body>
<div id="map"></div>
<script src="./js/opt.js"></script>
<script src="./js/drawMap.js"></script>
<script>
window.addEventListener("resize", () => {
myChart.resize()
})
</script>
</body>
</html>
css代码
html,body,#map{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
drawMap.js
let myChart = echarts.init(document.getElementById('map'));
const mapUrl = "你的geoJSON数据地址" // geoJSON文件：https://download.csdn.net/download/m0_56377024/20566859
$.getJSON(mapUrl, function (mapData) {
let mapColor = []
if (mapData) {
mapData.features.forEach(item => {
mapColor.push({
name: item.properties.name,
itemStyle: {
color: getColor(),
opacity: 1,
borderWidth: 0.4,
borderColor: '#5F9EA0'
}
})
})
echarts.registerMap('hangzhou', mapData)
// 重置各区域颜色
option.series[0].data = mapColor
myChart.setOption(option)
}
})
// 地图区域的点击事件
myChart.on('click', (params) => {
const { name } = params
alert(name)
})
opt.js
const option = {
title: { // 标题
top: '5%',
text: '杭州市3D地图',
subtext: '',
x: 'center',
textStyle: {
color: '#000'
}
},
tooltip: { // 提示框
trigger: 'item',
formatter: function (params) {
return params.name;
}
},
series: [{
type: 'map3D', // 系列类型
name: 'map3D', // 系列名称
map: 'hangzhou', // 地图类型。
label: { // 标签的相关设置
show: true, // (地图上的城市名称)是否显示标签
textStyle: { // 标签的字体样式
color: '#000', // 地图初始化区域字体颜色
fontSize: 14, // 字体大小
opacity: 1,
backgroundColor: 'rgba(100,203,101,0)' // 字体背景色
},
},
itemStyle: {
// 三维地理坐标系组件中三维图形的视觉属性(颜色，透明度，描边等)。
color: 'rgba(95,158,160,0.5)', // 地图板块的颜色
opacity: 1, // 图形的不透明度
borderWidth: 0.5, //图形描边的宽度
borderColor: '#000' // 图形描边的颜色
},
emphasis: {
// 鼠标 hover 高亮时图形和标签的样式
label: {
show: true,
textStyle: {
color: '#fff', // 高亮时标签颜色变为 白色
fontSize: 20, // 高亮时标签字体 变大
}
},
itemStyle: {
areaColor: '#66ffff', // 高亮时地图板块颜色改变
}
},
groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
show: false, // 是否显示地面。[ default: false ]
color: '#aaa' // 地面颜色。[ default: '#aaa' ]
},
light: {
// 光照相关的设置。在 shading 为 'color' 的时候无效
main: {
// 场景主光源的设置
color: '#fff', //主光源的颜色。
intensity: 1.2, //主光源的强度。
shadow: true, //主光源是否投射阴影,默认关闭
shadowQuality: 'high', // 阴影的质量('low', 'medium', 'high', 'ultra')
alpha: 55, // 主光源绕 x 轴旋转的角度
beta: 10 // 主光源绕 y 轴旋转的角度
},
ambient: {
// 全局的环境光设置。
color: '#fff', // 环境光的颜色
intensity: 0.5 // 环境光的强度
}
},
viewControl: {
// 用于鼠标的旋转，缩放等视角控制。
projection: 'perspective', // 投影方式(透视投影'perspective'，正交投影'orthographic')
damping: 0, // 鼠标进行旋转的延时率
rotateSensitivity: 1, // 旋转操作的灵敏度
zoomSensitivity: 1, // 缩放操作的灵敏度
panSensitivity: 1, // 平移操作的灵敏度
panMouseButton: 'left', // 平移操作使用的鼠标按键('left' ,'middle' ,'right')
rotateMouseButton: 'left', // 旋转操作使用的鼠标按键
distance: 130, // 默认视角距离主体的距离
minDistance: 20, // 最小距离
maxDistance: 400, // 最大距离
alpha: 40, // 视角绕 x 轴，即上下旋转的角度
beta: 15, // 视角绕 y 轴，即左右旋转的角度
minAlpha: -360, // 上下旋转的最小 alpha 值
maxAlpha: 360, // 上下旋转的最大 alpha 值
minBeta: -360, // 左右旋转的最小 beta 值
maxBeta: 360, // 左右旋转的最大 beta 值
center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转
animation: true, // 是否开启动画
animationDurationUpdate: 1000, // 过渡动画的时长。
animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果
},
// 可对单个地图区域进行设置
data: []
}]
};
// 生成随机色
function getColor() {
let color = []
for (let i = 0; i < 3; i++) {
color.push(Math.floor(Math.random() * 256))
}
return `rgb(${color.join(',')})`
}