plainheart/echarts-extension-gmap

brush selection

Closed this issue · 1 comments

great library! can't get the traffic (and other Google layers) anywhere else.

Going deeper however, I found a problem - how to select(brush) series on the map without panning(roam). This has been fixed in ECharts geo maps somehow, see here. My guess is fixing it has to do with event.stopPropagation() and/or event.cancelBubble. When the selection(brush) is active, the mouse down/move event should not propagate further to the map.
Here is a demo

Thanks for the research. If you hope to get the instance of google map, you could use

var gmap = chart.getModel().getComponent('gmap').getGoogleMap();
// Add TrafficLayer to google map
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(gmap);

Going deeper however, I found a problem - how to select(brush) series on the map without panning(roam). This has been fixed in ECharts geo maps somehow, see here. My guess is fixing it has to do with event.stopPropagation() and/or event.cancelBubble. When the selection(brush) is active, the mouse down/move event should not propagate further to the map.

Seems so. I can't stop event propagation in this plugin and it can only be done in ECharts. Maybe it's better and easy enough to provide the roam option. Set it as false when brushing.

Just like this,

chart.on('globalCursorTaken', e => {
  console.log(e)
  const roam = !e.brushOption.brushType
  chart.setOption({
    gmap: {
      // this option will be provided in the next version
      // currently, you could use gmap.setOptions({ gestureHandling: roam ? 'auto' : 'none'});
      roam: roam 
    }
  })
})