简体   繁体   English

eCharts 3-在点击时放大地理地图

[英]eCharts 3 - zoom on geo map onclick

Does anyone know how to click on a country, then have it zoom in on that country/area in a 2D geo world map? 有谁知道如何单击一个国家,然后在2D地理世界地图中放大该国家/地区?

I am using the world 2D map that is provided in eCharts 3. So my options look like this: 我正在使用eCharts 3中提供的世界2D地图。因此,我的选择如下所示:

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

Here is what I have thus far. 到目前为止,这就是我所拥有的。 When I click it just zooms straight in to 4 rather than where I clicked. 当我单击时,它会直接放大到4而不是我单击的位置。

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

I have tried to find ways to zoom in on the x and y offsets, but that doesn't work. 我试图找到放大x和y偏移量的方法,但这不起作用。

I also tried to center the map first like this but you need the latitude and longitude of where to center the map inside the array. 我还尝试过首先像这样将地图居中,但是您需要在阵列中将地图居中的位置的纬度和经度。 The map uses JSON for the coordinates, and I can see them, but I can't get them to pull into the array. 该地图使用JSON作为坐标,我可以看到它们,但无法将它们拉入数组。

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

Any thoughts on ways to do this? 关于如何做到这一点的任何想法?

Just in case anyone else is having this same problem, I was able to solve it in this manner: 万一其他人遇到同样的问题,我也可以通过以下方式解决:

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);
        });

It doesn't fully solve the problem where I wanted to be able to zoom in on any country, but it does solve the problem in the fact that I can zoom into a data point inside a country. 它不能完全解决我希望能够放大任何国家/地区的问题,但是确实可以解决国家/地区中的数据点这一问题。

If anyone else has suggestions on how to do the country part please let me know. 如果有人对如何处理国家/地区提出建议,请告诉我。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM