Version
5.3.3
Link to Minimal Reproduction
No response
Steps to Reproduce
globe的配置：
{
globe: {
atmosphere: {
show: false,
},
globeRadius: 100,
globeOuterRadius: 200,
baseTexture: gisBg, // 地球表面覆盖的图片
light: {
ambient: {
intensity: 0.8,
},
main: {
intensity: 0,
},
},
zlevel: -100,
viewControl: {
autoRotate: true, // 是否开启视角绕物体的自动旋转查看
autoRotateSpeed: 10, //物体自转的速度,单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
autoRotateAfterStill: 2, // 在鼠标静止操作后恢复自动旋转的时间间隔,默认 3s
rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏.设置为0后无法旋转。[1, 0]只能横向旋转.[0, 1]只能纵向旋转
maxDistance: 165,
minDistance: 165,
alpha: 17,
beta: 120,
distance: 0,
},
},
series: // scatter的series
}
scatter的series：
{
name: 'scatter3D',
type: 'scatter3D',
symbol: 'pin',
coordinateSystem: 'globe',
symbolSize: 60, // 点位大小
zlevel: 100,
itemStyle: {
borderWidth: 2, // 边框宽度
borderColor: '#fff',
},
label: {
show: true,
position: 'top', // 字体位置。top、left、right、bottom
formatter: '{b}', // 具体显示的值
color: '#fff', // 字体颜色
borderWidth: 0, // 字体边框宽度
fontSize: 18, // 字体大小
fontWeight: 700, // 字体加粗
},
data: [{
id: item.id,
name: labelText,
value: [item.longitude, item.latitude, 0],
itemStyle: {
color: getPointColor(item.sinkRate, avg), // 各个点位的颜色设置
opacity: 1, // 透明度
},
}]
}
Current Behavior
Expected Behavior
旋转过程中无遮挡
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response
3条答案
按热度按时间isr3a4wc1#
@AlwaysMing It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED
TITLE
[Bug] When drawing scatter on the globe, the label will be blocked
BODY
Version
5.3.3
Link to Minimal Reproduction
No response
Steps to Reproduce
globe configuration:
{
Globe: {
atmosphere: {
show: false,
},
globeRadius: 100,
globeOuterRadius: 200,
baseTexture: gisBg, // Image overlaid on the earth's surface
light: {
ambient: {
intensity: 0.8,
},
main: {
intensity: 0,
},
},
zlevel: -100,
viewControl: {
autoRotate: true, // Whether to enable the automatic rotation of the viewing angle around the object
autoRotateSpeed: 10, //The speed of the object's rotation, the unit is angle/second, the default is 10, that is, it takes 36 seconds to make a circle.
autoRotateAfterStill: 2, // The time interval for resuming auto-rotation after the mouse is stationary, the default is 3s
rotateSensitivity: 2, // The sensitivity of the rotation operation, the larger the value, the more sensitive it is. After setting it to 0, it cannot be rotated. [1, 0] can only rotate horizontally. [0, 1] can only rotate vertically
maxDistance: 165,
minDistance: 165,
alpha: 17,
beta: 120,
distance: 0,
},
},
series: // scatter's series
}
scatter's series:
{
name: 'scatter3D',
type: 'scatter3D',
symbol: 'pin',
coordinateSystem: 'globe',
symbolSize: 60, // point size
zlevel: 100,
itemStyle: {
borderWidth: 2, // border width
borderColor: '#fff',
},
label: {
show: true,
position: 'top', // font position. top, left, right, bottom
formatter: '{b}', // specific displayed value
color: '#fff', // font color
borderWidth: 0, // font border width
fontSize: 18, // font size
fontWeight: 700, // bold font
},
data: [{
id: item.id,
name: labelText,
value: [item.longitude, item.latitude, 0],
itemStyle: {
color: getPointColor(item.sinkRate, avg), // color settings for each point
opacity: 1, // transparency
},
}]
}
Current Behavior
Expected Behavior
No occlusion during rotation
Environment
Any additional comments?
No response
w7t8yxp52#
Well, this is by design. Those 3D points and labels cannot permanently display over the globe. When the globe is rotated they will start to partially hide until they completely disappear behind it.
OTOH, one could make a [FEATURE Request] to have scatter3D points (with altitude=0) and their labels "painted" on Earth's surface.
Similar to this:
6g8kf2rb3#
Thank you for your idea, but i don't really know how to set its altitude in the scatter3D? I have set its third value to 0, but it seems not work:
I read the doc [https://echarts.apache.org/en/option-gl.html#series-scatter3D.data], but still don't know how to set its altitude: