echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] 3D地图lines与地名位置错乱

Open SwainHo opened this issue 3 years ago • 1 comments

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 avatar Aug 02 '22 14:08 SwainHo

@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

echarts-bot[bot] avatar Aug 02 '22 14:08 echarts-bot[bot]

Minimal Reproduction code is incomplete.

helgasoft avatar Sep 28 '23 19:09 helgasoft