[Bug] geo3D中无法监听到 georoam事件

swanghao commented 7 months ago

Version

5.5.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?gl=1&code=LYTwwgFghgTgLgOgM4QPYHcAyqoBMCWAdgOYAUAlANwBQAJAsQKZykBKA8uwCoD6ACgEEuACQAEAalEByAPS4ocKDKhIkzGU1QzhAaQQArJKkJSANKIBmAV0IBjOPmOjSmgFJHC5UQG9qo0aCQsIgQ-LiM2HhEZFR-ooy20PBICDCMxPhIcIwwALJQAA6kUrpmom4esf6BSYhqcOwFDsakcf6kqE2OhKIAvD5t_qIOcAA2jABcA0Mzw4wAHnBTUnydCAAijIRI-HAgorqiAEwADACMZ1KD_gC-pteiAG6ZVlCj-QVTvrNDwERTAA4Tid7j9qlB5lMAKzA4GgsHZRZTADaJXwxAgZSk2HQUgAuvCfmk3g5gJNhjArIxCbNbG9bFZRlAAEbjKZwSnUh7-NQwfCMJAASUI4UhohB3NERFYUBI5O-YP8tlQo1QMBRUlG6IgcCQAGsQKyqViQIxRqrceYpGrZUw0rh8ZKbg87tQHnBUCqHJ9pgi-cQ7ctdoxgGZJRY1cAFNl1dJvLYbqISVcfq6fuMmCKvq6HpoAMzrL6SmQyeLAArQHZIUToNV66tEcqMVAF8xqcb2Uy2LW2PWiXCoUSEVBwYsyFAYKYWN5qcz-EuiZXAMmEOCiVBWNce0QT9DmZmb0ShcIBQoFyVRn0lHRhxUwHDAdmcmkzABe40eZqmZzzL6GTOZL8fB3NB0CnGdGFENMwRDCsVEyItFX8YNgAAZT2NlfSQxcVTVZZTXNDAUyQ51FWgn4UPQkBMIVRUS2ZNVwhgAB1MI4AgKYTgQKE_xmTooFsXYQE4hBzlEBd8HLNVFFXABCJ1ePE8czQSbJcFyVBwifKklNEfQrCyJM5iyMcUCiEhliZYBAPgW9ZhzH5eX5JAUUlbx51LD0vXwApzG7fBeyTEUpWyNCMMYBBYMrTJ-0HYc11rGA9UlfxCCgMllkvOzFT2ApySkS8C2ysFL2WUpzAXJcVzXDct0HY9GBS0R30YT9RmhRT_Ci-CXKwpDKPCxDsKGZVVVjKQCItYrsP4wS9m_Jrbia8iwXkRRXOG4C0oy6RAFo5QB_SMALmUykeN4qSmU4TihAB2BA8wAFigzqhnc7b8sAPztABW5E6zvJM4oXu67bvugEnsWrb0vywAcOWO8xTtGc7RDzM4ADYARRhAzjBzbXsh5ZAHVlWGnl-qYUYATjJo4EBR7HhtxnapEATptADQdQAv0x-hHyXu-6TnuqEEHusnaew-n8sAR9tABYbQB19Q5xGebRsnqcelbFVF5ZAF05QBM_MAOfVZfJPNrpRqFFeu0GVbBNXpEAEbzAHJNQBNuT1qY-bOIEEDJ67haQy2pEAIcjAA0NR3RChKFTnuhAjhp82fm9wBXEMAJXTA6OM4yeBN3PdVoc8ekQBhYPewPBZd8PI-e_xvcAex1AAvUwOoQBAEzgQAFlZLiGGcAYUVAHRzfOzlN0Ssaj2ZvcAdGUifhxGjnH27KfTi3M4Zm3ABX1ROXa4smzeb73AEybQAGV0Dsnu6psmm_B739sAQljA7zPM0en6PZ_ywBuz0AbJ1A6BDHV6gpqCSat6PiG7CpDAFsDkbwgq4FEMxAUMYTDLAOrDcGABRFQUDlgw2mmCQUSAmQil6lIJ-aCfhSB0BgVUTgwBCSkBrHW-DZiEPQFAfAoguA7BIBQ6Q8dqEzFoTYRhxhiCsN9gHZuAA5aSHFpDDw4UMKQqF6GiB0DYPhywz6SP8NI6AjCiD8O3io6QqFoDAFEHoqwDDVj8MljLZuqFaoQByIQAmcDNpSC4LI0xywF46KcUgKkPRmKyn4bnDxXBvGiFyDYfhlcPG-J6EEfA_CvqRN4Yw2RqFNHLFtg7ZuUgACaUArCMJ2AYjSLDlgs3ZpkrJwTsDFOkB3YiZFnrtlUowdSmlyQcipM9IgWRZSCQshSDpTUAJAVokhXc2kuSbURHAKiNFwZKlwuNVkAk9RlBLAAYgsJsnR_gIyrggdqJY0gGKjAdM3HZxhpn4FfH9I4ZzRDMmWcQe8NhcBgAWcsGAxAHmkBBEcX8FxTAnHIHUkiy1OmhRmfKcGs0hLfmbgxGATFWK4HYiJHi4NupVj_sNUaeFpBPMYFsEFZEwVNTMgQPpmp0o2TgJIrUGJDkjMVFGf4fVsK4vGhsrZdyiDZG2LC8UDc7nksnP0iZm0QJ4AwAARVeFqea0gbEHO2UmUYcEnYSglfc5gUBvwnHBv3GY1L-SrmxdhXlWwdgKq4lCA1y0FJulVk1XK-UkB0jgDGIqz03rLAKKgXlSBJHKkYkQBQjBUIgCyCGZY-Z1iSKQCAayKpfUKA4iWXIogzggjzCcUQAhji_NzSCEEWMYSmBzXmgtphTjikBaYLGKdy25ulaIRtKNc1lpTqIFtWbTDtszdm3Nr542JuOSk65KJubmG5l_c1ELBrAQ5csI0jAygwoVX3Z6LU2rfgBU1TFCE2VggGtRKFWql3SHtMSsEpESLPTWrq0QyJwbIguGHM4od_rmHHuHAEEc8xk3MFm2dw1X1nDDuPXmX7jhUyOH-lGAHv3jzxJ_J0DwUMzBuOQOIsQsM0BqMEBALQpD-V7GUUgBQvC9AAHy-hLPgCwzgCjIByM5LgIA8q9F6AAIjddGHIBZuPYfmdsFUEVVRkCkAUVc0hxDMYfcKUUuHYjUAI_AIjhBiiaHvOlcjlG-i0YVPRxjFGWN8gFOxzjPG-MeoE-sITcRlSifGJFGA94YAUeU5QIAA

Steps to Reproduce

myChart.showLoading(); $.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('HK', geoJson); myChart.setOption( (option = { title: { text: 'Pop.Density HK 2011' }, visualMap: { min: 800, max: 50000, text: ['High', 'Low'], realtime: true, calculable: true, seriesIndex: 0, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } },

  tooltip: {
    trigger: 'item',
    formatter: '{c} alt'
  },
  legend: {},

  geo3D: {
    // emphasis works in geo3D, select,click do not
    //show: false,   // comment out to show, but hide map3D
    map: 'HK',
    roam: true,
    zlevel: 13,
    label: { show: false },
    emphasis: {
      itemStyle: {
        color: 'yellow'
      }
    },
    itemStyle: {
      //borderWidth: 0.5,
      opacity: 0.01 // important!
    },
    //selectedMode: true // just a test
    //shading: 'lambert',
  },

  series: [
    {  // tooltip, click and itemStyle.emphasis do not work
      name: 'map',
      type: 'map3D',
      map: 'HK', // comment out to hide
      zlevel: 5,
      emphasis: {
        itemStyle: {
          color: 'yellow',
          opacity: 1
        }
      },
      data: [
        { name: '中西区', value: 20057.34 },
        { name: '湾仔', value: 15477.48 },
        { name: '东区', value: 31686.1 },
        { name: '南区', value: 6992.6 },
        { name: '油尖旺', value: 44045.49 },
        { name: '深水埗', value: 40689.64 },
        { name: '九龙城', value: 37659.78 },
        { name: '黄大仙', value: 45180.97 },
        { name: '观塘', value: 55204.26 },
        { name: '葵青', value: 21900.9 },
        { name: '荃湾', value: 4918.26 },
        { name: '屯门', value: 5881.84 },
        { name: '元朗', value: 4178.01 },
        { name: '北区', value: 2227.92 },
        { name: '大埔', value: 2180.98 },
        { name: '沙田', value: 9172.94 },
        { name: '西贡', value: 3368 },
        { name: '离岛', value: 806.98 }
      ],
      nameMap: {
        'Central and Western': '中西区',
        Eastern: '东区',
        Islands: '离岛',
        'Kowloon City': '九龙城',
        'Kwai Tsing': '葵青',
        'Kwun Tong': '观塘',
        North: '北区',
        'Sai Kung': '西贡',
        'Sha Tin': '沙田',
        'Sham Shui Po': '深水埗',
        Southern: '南区',
        'Tai Po': '大埔',
        'Tsuen Wan': '荃湾',
        'Tuen Mun': '屯门',
        'Wan Chai': '湾仔',
        'Wong Tai Sin': '黄大仙',
        'Yau Tsim Mong': '油尖旺',
        'Yuen Long': '元朗'
      },
      selectedMode: true,
      instancing: true,
      label: {
        show: true,
        textStyle: {
          color: 'black', //#fff',
          fontWeight: 'bold',
          fontSize: 12,
          backgroundColor: 'rgba(0,23,11,0)'
        }
      },
      itemStyle: {
        opacity: 1,
        borderWidth: 0.5,
        emphasis: {
          color: 'green'
        }
      },
      shading: 'lambert',
      light: {
        main: {
          color: '#fff',
          intensity: 0.8,
          shadow: true,
          shadowQuality: 'height',
          alpha: 40,
          beta: 10
        },
        ambient: {
          intensity: 0.5
        }
      }
    },

    {
      type: 'scatter3D',
      name: 'points',
      coordinateSystem: 'geo3D',
      symbol: 'path://M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z',
      symbolSize: [44, 44],
      itemStyle: { color: 'blue', opacity: 1 },
      zlevel: 111,
      emphasis: {
        itemStyle: {
          color: 'red'
        }
      },
      data: [
        [114.120415, 22.282639, 10],
        [114.220415, 22.282639, 222]
      ]
    }
  ]
})

); }); myChart.on('click', (p) => { //if (p.seriesType=="scatter3D") console.log('pnt '+p.dataIndex); });

myChart.on('georoam', (p) => { //if (p.seriesType=="scatter3D") console.error(p); });

Current Behavior

1、geo3D中无法监听到 georoam事件 2、scatter3D中data点位数量必须要2个或2个以上才能触发click点击事件，当只有一个的时候无法触发click事件

Expected Behavior

1、希望能够再geo3D中监听到 georoam事件 2、scatter3D中data点位数量为什么必须要2个或2个以上才能触发click点击事件 3、鼠标滚轮滚动，能够实时获取到地图放大缩小的zoom值

Environment

- OS:windows 11
- Browser: chrome  122.0.6261.129
- Framework: Vue@2

Any additional comments?

No response

echarts-bot[bot] commented 7 months ago

@swanghao 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] Geo3D cannot listen to georoam events

helgasoft commented 7 months ago

not-a-bug, georoam is just not an event defined in echarts-gl, it is for 2D maps only.

apache / echarts