eCharts 3 - 放大地理地图onclick

时间:2017-11-29 23:08:49

标签: javascript echarts

是否有人知道如何点击某个国家/地区,然后让它放大2D地理世界地图中的国家/地区?

我正在使用eCharts 3中提供的世界2D地图。所以我的选项看起来像这样:

geo: {
      name: '2D Global Map',
      type: 'map',
      map: 'world',
      roam: true,
      label: {
          emphasis: {
              show: false
          }
      },
...

这是我到目前为止所拥有的。当我点击它时,只是直接缩放到4而不是我点击的位置。

myChart.on('click', function (params) {
  myChart.setOption({
    geo: {
        zoom: 4
      }
  });
});
    myChart.setOption(option);

我试图找到放大x和y偏移的方法,但这不起作用。

我还试图像这样首先将地图居中,但你需要在数组中将地图置于中心位置的纬度和经度。地图使用JSON作为坐标,我可以看到它们,但我不能让它们进入数组。

myChart.on('click', function (params) {
  myChart.setOption({
    geo: {
        center: [(need to get lat/long of where clicked)],
        zoom: 4
      }
  });
});
    myChart.setOption(option);

有关如何做到这一点的任何想法?

1 个答案:

答案 0 :(得分:0)

万一其他人遇到同样的问题,我能够以这种方式解决它:

myChart.on('click', function(params) {
            if (params.data) {
                myChart.setOption({
                    geo: {
                        center: params.data.value,
                        zoom: 6
                    }
                });
              } else {
                myChart.setOption({
                    geo: {
                        center: [0,0],
                        zoom: 1
                    }
                });
              }
            myChart.setOption(option);
        });

它并没有完全解决我希望能够放大任何国家/地区的问题,但它确实解决了我可以放大国家内部数据点的问题。

如果其他人有关于如何进行国家/地区部分的建议,请告知我们。