[Bug] 3D地图lines与地名位置错乱
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
@SwainHo 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] 3D map lines are confused with the location of place names
Minimal Reproduction code is incomplete.