[Bug] 3D地图lines与地名位置错乱 #17463
Description
Version
4.8.0
Link to Minimal Reproduction
No response
Steps to Reproduce
let geoCoordMap = {
"area1": [116.549772, 39.864385],
"area2": [ 117.511929,40.406521],
};
var alirl= [[[121.15, 31.89],[109.781327, 39.608266]],
[[120.38, 37.35],[122.207216, 29.985295]],
[[123.97, 47.33],[120.13, 33.38]],
[[118.87, 42.28],[120.33, 36.07]],
[[121.52, 36.89], [117.93, 40.97]],
[[102.188043, 38.520089], [122.1, 37.5]],
[[118.58, 24.93],[101.718637, 26.582347]],
[[120.53, 36.86],[121.48, 31.22]],
[[119.46, 35.42],[122.05, 37.2]],
[[119.97, 35.88],[116.1, 24.55]],
[[121.05, 32.08],[112.02, 22.93]],
[[91.11, 29.97],[118.1, 24.46]]
]
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
// console.log(res)
return res;
};
option = {
title: {
text: '测试bar3D、scatter3D、geo3D',
x: 'left',
top: "10",
textStyle: {
color: '#000',
fontSize: 14
}
},
tooltip: {
show: true,
// formatter:(params)=>{
// let data = "测试1:"+params.name + "
"+"值:"+ params.value[2]+"
"+"地理坐标:[" + params.value[0]+","+params.value[1] +"]";
// return data;
// },
},
visualMap: [{
type: 'continuous',
seriesIndex: 0,
text: ['bar3D'],
calculable: true,
max: 300,
inRange: {
color: ['#9ff32b','#9ff32b']//柱图配色
}
}, {
type: 'continuous',
seriesIndex: 1,
text: ['scatter3D'],
left: 'right',
max: 100,
calculable: true,
inRange: {
color: ['#000', 'blue', 'purple']//气泡配色
}
}],
geo3D: {
map: 'china',
roam: true,
itemStyle: {
areaColor: '#374151',// 地图配色
opacity: 1,
borderWidth: 0.4,
borderColor: '#9ff32b'// 地图边配色
},
label: {
show: true,
textStyle: {
color: '#fff', //地图初始化区域字体颜色
fontSize: 8,
opacity: 1,
backgroundColor: 'rgba(0,23,11,0)'
},
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
itemStyle: {
areaColor: '#7db41b',// 鼠标移入地图配色
},
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 3,
backgroundColor: 'rgba(0,0,0,1)'//鼠标移入文字加背景
}
}
},
//shading: 'lambert',
light: { //光照阴影
main: {
color: '#fff', //光照颜色
intensity: 1.2, //光照强度
//shadowQuality: 'high', //阴影亮度
shadow: true, //是否显示阴影
alpha:55,
beta:10
},
ambient: {
intensity: 0.3
}
}
},
series: [
//柱状图
{
name: 'bar3D',
type: "bar3D",
coordinateSystem: 'geo3D',
barSize: 0.5, //柱子粗细
shading: 'lambert',
opacity: 1,
bevelSize:0.5,
label: {
show: false,
formatter: '{b}'
},
data: convertData(
[{
name: "area2",
value: (Math.random() * 300).toFixed(2)
},{
name: "area1",
value: (Math.random() * 300).toFixed(2)
}, {
name: "",
value: 0.00001
},
]
)
},
{
name: 'scatter3D',
type: "scatter3D",
coordinateSystem: 'geo3D',
symbol: 'pin',
symbolSize: 30,
opacity: 1,
label: {
show: false,
formatter: '{b}'
},
itemStyle: {
borderWidth: 0.5,
borderColor: '#fff'//气泡边的颜色
},
data: convertData([{
name: "阳泉",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "莱州",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "湖州",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "汕头",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "昆山",
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: "张家口",
value: ((Math.random() * 100) + 50).toFixed(2)
}])
},
//画线
{
type: 'lines3D',
coordinateSystem: 'geo3D',
effect: {
show: true,
trailWidth: 5,
trailOpacity: 0.5,
trailLength: 0.2,
constantSpeed: 5
},
blendMode: 'lighter',
lineStyle: { //航线的视图效果
color: '#9ae5fc',
width: 1,
opacity: 0.6
},
data:alirl
}
]
};
Current Behavior
用自定义坐标时候lines与地名会下沉上浮偏离原有位置
Expected Behavior
应该与地图贴合
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response