环境依赖
"echarts": "^5.4.3",
"echarts-gl": "^2.0.9"
城市边界信息
DataV.GeoAtlas地理小工具系列
这个需求第一方案想到的是使用高德地图JS API中”区域掩模“加上”立面体“实现，最后没有采用高德地图实现的原因是，高德地图无法实现透明天空，角度变换时，天空颜色无法去掉，不纠结天空的可以采用，省时省力并且自定义空间很大，最终采用echarts来实现。
echarts方案中遇到两个问题 1、geo3D配合scatter3D，geo3D的regionHeight过高，会盖住scatter3D，解决方案是降低regionHeight值，5以内貌似没有问题，另一个是降低itemStyle的透明度，opacity设置低透明度
2、geo3D配合scatter3D，scatter3D的坐标标注位置有偏差，感觉位置不准，幸亏项目需求是根据每个区域进行标注，并不需要根据坐标标注。
最后采用的两个map3D叠加实现，底层map3D用于展示城市面板，上层map3D用于展示标注。
import * as echarts from "echarts";
// 引入城市边界信息
import Linyi from '@/api/linyi.json'
// 引入echarts-gl，用于实现echarts 3D功能
import 'echarts-gl'
// 注册自定义城市边界信息
echarts.registerMap('Linyi', Linyi);
// 标注点背景图
import scatter3dPoint from "@/assets/images/point.png"
// 图表实例
let chart = echarts.init(document.querySelector('.chart'));
// map3D视角控制参数
let viewControl = {
beta: 35,
alpha: 45,
distance: 120,
// zoomSensitivity: 0, // 是否允许放大
// rotateSensitivity: 0,// 是否允许旋转
};
// 标注点数据
// 这里的name需要和城市边界信息中的name对应才能显示出来，因为没有坐标信息，name是唯一可以对应起来的
let pointData = [
{name: '兰山区', value: 10},
{name: '河东区', value: 20}
]
let label = {
show: true,
formatter(params) {
if (params.value) {
return `{radiusBg|${params.value}}`
} else {
return null;
}
},
rich: {
radiusBg: {
color: "#fff",
align: 'center',
width: 50,
height: 50,
fontSize: 22,
},
},
textStyle: {
width: 50,
height: 64,
backgroundColor: {
image: scatter3dPoint
}
}
};
chart.setOption({
series: [
{
zlevel: 10,
viewControl,
map: 'Linyi',
type: "map3D",
regionHeight: 10,
label: {
show: true,
color: '#fff',
fontWeight: 'bold',
fontSize: 14,
textShadowBlur: 2,
textShadowOffsetY: 2,
textShadowColor: 'rgba(0, 0, 0, 0.5)'
},
itemStyle: {
opacity: 1,
borderWidth: 2,
color: '#428BF4',
borderColor: '#61CFF8',
},
emphasis: {
label: {
show: true,
textStyle: {
color: '#fff'
}
},
itemStyle: {
color: '#007EE8',
borderWidth: 10,
borderColor: '#6BECF5'
}
},
light: {
ambient: {
color: '#fff',
intensity: 0.4
}
},
},
{
zlevel: 20,
viewControl,
map: 'Linyi',
type: "map3D",
regionHeight: 10,
itemStyle: {
color: 'transparent'
},
emphasis: {
itemStyle: {
color: 'transparent'
}
},
data: pointData.map(v => {
v.label = label;
v.emphasis = {
label
}
return v
})
}
]
});
好文链接
您阅读本篇文章共花了：
发表评论