代码之家 › 专栏 › 技术社区 › Ruchita Herlekar

highcharts中的mapView.fitToBounds()方法不起作用

react-highcharts bubble-chart zooming highcharts typescript

Ruchita Herlekar · 技术社区 · 1 年前

我创建了一个气泡图,底部是一张地理地图,上面的点以气泡的形式表示。这些点具有经纬度信息,在这些信息的帮助下,它们被渲染到地图上。我正在使用highcharts库在打字项目中做同样的事情。我的要求是,加载地图时,应放大存在气泡的区域。剩余的空白地图不需要显示。

我尝试使用mapView.fitToBounds()方法,但放大不起作用。参考: https://api.highcharts.com/class-reference/Highcharts.MapView#fitToBounds

由于我有纬度和经度信息,我需要先将其转换为像素值,因为mapView.fitToBounds()需要像素值作为输入。我尝试使用mapView.lonLatToPixels()方法进行同样的操作。参考: https://api.highcharts.com/class-reference/Highcharts.MapView#lonLatToProjectedUnits

我尝试在图表实例上调用这些方法,但它对输出没有任何影响。我希望每当加载地图时,由最小和最大纬度和经度值定义的区域都会被放大。我需要在我的项目设置中使用上述方法。你能告诉我我在使用它们时缺少了什么吗?

代码沙盒链接: https://codesandbox.io/p/sandbox/bubblemapdemo-fm5vqw?file=%2Fsrc%2FBubbleMapViewer.tsx%3A188%2C30-188%2C52

0 回复 | 直到 1 年前

jedrzejruta 9 月前

这个 mapView.fitToBounds() 该方法使用投影值,而不是您所描述的像素值。您可以使用以下命令将地理坐标转换为投影平面值 lonLatToProjectedUnits() 转换。

const chartComponent = useRef(null);
const [options] = useState({
chart: {
  map: usMap,
},
mapNavigation: {
  enabled: true,
  buttonOptions: {
    alignTo: "spacingBox",
  },
},
series: [
  {
    name: "US",
    dataLabels: {
      enabled: true,
      format: "{point.properties.hc-a2}",
    },
  },
  {
    name: "map bubble",
    type: "mapbubble",
    color: "rgb(206, 0, 0, 0.7)",
    maxSize: "10%",
    data: [
      {
        geometry: {
          coordinates: [-121.2597459908211, 47.03439487299908],
          type: "Point",
        },
        z: 1,
      },
      {
        geometry: {
          coordinates: [-102.04591594861265, 42.72721793991439],
          type: "Point",
        },
        z: 5,
      },
    ],
  },
],
});

useEffect(() => {
if (chartComponent && chartComponent.current) {
  const mapView = chartComponent.current.chart.mapView;
  const points = chartComponent.current.chart.series[1].points;

  const min = mapView.lonLatToProjectedUnits({
    lon: points[1].geometry.coordinates[0],
    lat: points[1].geometry.coordinates[1],
  });
  const max = mapView.lonLatToProjectedUnits({
    lon: points[0].geometry.coordinates[0],
    lat: points[0].geometry.coordinates[1],
  });

  mapView.fitToBounds({
    x1: min.x,
    x2: max.x,
    y1: min.y,
    y2: max.y
  }, '10%')
}
}, [chartComponent]);

return (
  <HighchartsReact
    highcharts={Highcharts}
    constructorType={"mapChart"}
    options={options}
    ref={chartComponent}
  />
);

演示: https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-mjq55k?file=%2Fdemo.jsx%3A47%2C13