echart 3d 地图 加贴图
2024年11月22日<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>ECharts</title>
<!– 引入刚刚下载的 ECharts 文件 –>
<script src=”https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js”></script>
</head>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<body>
<!– 为 ECharts 准备一个定义了宽高的 DOM –>
<div style=”width: 100%;height: 100vh;”>
<div id=”main” style=”width: 100%;height:100%;position: relative;”></div>
</div>
<script type=”text/javascript”>
const position = [
{
pos: [
{
name: “A类型”,
value: [120.17005132, 30.23464188, 0] // value的数据里面包含经纬度和这个类型的数量
},
{
name: “A类型”,
value: [120.18146552, 30.21745688, 0]
},
],
},
{
pos: [
{
name: “B类型”,
value: [120.17429151, 30.23666438, 0]
},
{
name: “B类型”,
value: [120.18643404, 30.22371008, 0]
},
],
},
]
const myChart = echarts.init(document.getElementById(‘main’));
async function getData() {
let res = await fetch(‘https://geo.datav.aliyun.com/areas_v3/bound/330100.json’)
return res.json()
}
getData().then(result => {
echarts.registerMap(“hangzhou”, result);
init()
})
// 基于准备好的dom，初始化echarts实例
function init() {
// 指定图表的配置项和数据
const option = {
geo3D: {
map: “hangzhou”,
boxHeight: 15,
regionHeight: 5,
top: -40,
itemStyle: {
color: “#fff”,
opacity: 1,
borderWidth: 3,
borderColor: “#50e6fd”,
},
viewControl: {
alpha: 50, // 上下旋转的角度
beta: -2, // 左右旋转的角度
rotateSensitivity: 3, // 旋转操作的灵敏度
panSensitivity: 3,
panMouseButton: ‘right’,
distance: 125,
minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
maxAlpha: 120, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
animation: false, // 是否开启动画。[ default: true ]
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
animationEasingUpdate: “cubicInOut” // 过渡动画的缓动效果。[ default: cubicInOut ]
},
emphasis: {
label: {
show: false
},
itemStyle: {
color: “#fff”
}
},
label: {
show: false
},
environment: ‘./img/industrial_sunset_02_2k.hdr’,
shading: “realistic”,
realisticMaterial: {
detailTexture: ‘./1.jpg’,
},
postEffect: {
enable: true
},
// shading 为color 时无效
light: {
//光照阴影
main: {
color: “#fff”, //光照颜色
intensity: 1, //光照强度
shadowQuality: ‘high’, //阴影亮度
shadow: true, //是否显示阴影
shadowQuality: “medium”, //阴影质量 ultra //阴影亮度
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.7
}
}
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
function setSeries(data) {
const dataArr = [];
data.forEach(item => {
dataArr.push(
{
type: “scatter3D”,
coordinateSystem: “geo3D”,
label: {
show: true,
position: “top”,
distance: -20,
formatter(params) {
return ” “;
},
color: “transparent”,
padding: [15, 20],
backgroundColor: {
image: item.image
}
},
itemStyle: { color: “transparent” },
symbol: “”,
symbolSize: 30,
symbolRotate: 0,
z: 999,
data: item.pos
}
)
});
return dataArr
}
</script>
</body>
</html>
