plainheart / echarts-extension-amap

🚩 An AMap (https://lbs.amap.com) extension for Apache ECharts (https://github.com/apache/echarts)
https://github.com/plainheart/echarts-extension-amap
MIT License
251 stars 83 forks source link

当我在用鼠标滚轮缩小或者放大地图时,并不会从我鼠标的地方放大或者缩小,而是整体向上移动 #5

Closed 530209190 closed 3 years ago

530209190 commented 4 years ago

高德地图版本2.0 如用1.4.15 无此问题 刚初始化加载完毕 image 使用鼠标滚轮缩小后 image 继续缩小。 image

530209190 commented 4 years ago

就单单使用了鼠标滚轮。 鼠标并没有移动。 但是我在使用您提供的示例时,并没有出现此问题

plainheart commented 4 years ago

@530209190 你现在用的插件版本是最新的吗?如果是我稍后测试下。感谢反馈!

plainheart commented 4 years ago

如果可以,最好麻烦你贴出一下可复现的代码示例。

530209190 commented 4 years ago
 "echarts": "^4.7.0",
    "echarts-extension-amap": "^1.1.1",
530209190 commented 4 years ago

代码github上传不了= = 我发你邮箱了。。。

plainheart commented 4 years ago

@530209190 好的 收到 确定原因了会再回复你。

plainheart commented 4 years ago

已经使用了与你所发的示例相近的代码(除了未使用Vue.js),但很遗憾没能复现。 鼠标滚轮缩放 向上移动 很大可能是center没设置好 难道是被哪里修改了?毕竟有使用Vue。

var option = {
  title: {
    text: '地图测试',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  amap: {
    center: [104.114129, 37.550339],
    zoom: 3,
    roam: true
  },
  series: [{
    type: 'effectScatter',
    coordinateSystem: 'amap',
    data: convertData(data),
    encode: {
      value: 2
    },
    markPoint: {
      symbolSize: 2
    },
    showEffectOn: 'render',
    rippleEffect: {
      brushType: 'stroke'
    },
    hoverAnimation: true,
    label: {
      formatter: '{b}',
      position: 'right',
      show: true
    },
    itemStyle: {
      color: 'yellowgreen',
      shadowBlur: 10,
      shadowColor: '#333'
    },
    zlevel: 1
  }]
};
// initialize echart
var chart = echarts.init(document.getElementById("echarts-amap"));
chart.setOption(option);
// get amap instance
var amap = chart.getModel().getComponent("amap").getAMap();
amap.on('zoomend', function (ev) {
  const zoom = amap.getZoom()
  // 此处 是缩放等级小于某一等级会显示标签名字,否则不显示。
  if (zoom >= 10) {
    if (!option.series[0].label.show) {
      const center = amap.getCenter();
      option.series[0].label.show = true;
      option.amap.zoom = zoom;
      option.amap.center = [center.lng, center.lat];
      chart.setOption(option);
    }
  } else {
    if (option.series[0].label.show) {
      const center = amap.getCenter();
      option.series[0].label.show = false;
      option.amap.zoom = zoom;
      option.amap.center = [center.lng, center.lat];
      chart.setOption(option);
    }
  }
});
530209190 commented 4 years ago

我觉得应该是与vue有关,因为截图上我使用了您提供的example代码,也出现同样的问题。

530209190 commented 4 years ago

谢谢您,

plainheart commented 4 years ago

好的 其实也不一定 我会再跟踪下 issue先不用关

plainheart commented 4 years ago

现在能确认不是Vue所导致的问题 似乎是由于容器的overflow: hidden引起的

html, body, #echarts-amap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

如果我们去掉overflow: hidden则不会出现这个问题,我给的示例中正好没有加,所以没能复现。 本质原因还得继续寻找,如果你对这个有什么想法可以提出来讨论下。

plainheart commented 4 years ago

暂时加了一个hack,判断高德地图API是2.0版本的时候,给echarts容器DOM元素的overflow强制设置为auto了,临时可以解决问题。 在CustomLayer上,2.0新版API较之于1.4.15版本有所不同,创建的DOM结构也有所不同,不知道这些跟overflow有什么具体的关系,反正加了这个hack后暂时不会出现你说的这个问题了,稍后我发一版新的(1.2.1),到时麻烦你再升级下试试。

530209190 commented 4 years ago

升级了,已经没问题了,谢谢啦。

plainheart commented 3 years ago

经测试,当前的高德地图似乎已不存在此问题,插件的新版本 1.7.0 也已去除 hack 代码,故暂且关闭。