echarts 3D地球 增加遮罩层

实现 ECharts 3D 地球可视化中的遮罩层
为了在ECharts的3D地球可视化中加入遮罩层效果，可以利用geo3D组件以及自定义系列来创建遮罩。通过设置特定区域的颜色透明度和其他样式属性，能够达到视觉上的遮挡或突出显示某些部分的目的。
下面是一个简单的例子展示如何向3D地球图表添加半透明圆形遮罩：
option = {
backgroundColor: '#000',

globe: {
baseTexture: '/path/to/earth.jpg', // 替换为实际路径
heightTexture: '/path/to/elevation.png', // 高程贴图的实际路径
shading: 'realistic',
realisticMaterial: {
roughness: 0.9,
metalness: 0
},

postEffect: true,
light: {
main: {
intensity: 1.2,
shadow: true
}
},
viewControl: {}
},

series : [
{
type: 'scatter3D',
coordinateSystem: 'globe',
symbolSize: function (val) {return val[2] * 5;},
data: [[-0.7, 0.4, 1], [-0.6, -0.5, 2]],// 示例数据点

itemStyle: {
color: '#fff'
}
},
// 添加遮罩层配置
{
name:'Mask Layer',// 层名称
type: 'custom',
renderItem: function(params, api){
var coordSys = params.coordSys;

return {
type: 'circle',
shape: {
cx: (coordSys.longitudeToX(-80)+coordSys.longitudeToX(80))/2,// 中心经度转换成屏幕坐标后的平均位置
cy: (coordSys.latitudeToY(-40)+coordSys.latitudeToY(40))/2 ,// 同理纬度计算中心y轴坐标
r: Math.min(coordSys.width, coordSys.height)/4 // 半径大小可以根据需求调整
},
style:{
fill: 'rgba(255, 255, 255, .2)', // 设置颜色和透明度
stroke: '#ffffff' // 边框线条颜色
}
};
},
zlevel: 1 // 调整zlevel使得遮罩位于其他元素之上
}]
};
登录后复制
此代码片段展示了如何构建一个基本的地图并叠加了一个白色的圆圈作为遮罩[^1]。需要注意的是这里的经纬度范围（如-80到80）应该依据具体的应用场景做适当修改；同样地，“r”的值也应根据实际情况灵活设定以适应不同的视窗尺寸。