javascript - 有没有办法在 react 中使用 leaflet.heat ？

Question

我正在尝试在 reactJS 中使用 leaflet.heat。我已经制作了 leaflet 库来使用 react hooks 但不幸的是我不能在 react 中使用 leaflet.heat 。我像这样导入模块:

import "../libraries/HeatLayer";

HeatLayer.js 的代码是: https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/src/HeatLayer.js

当我运行 React 应用程序时，我没有收到任何错误，但没有显示传单热图

注意:我不想使用 react-leaflet 或 react-leaflet-heatmap 等组件。

Answer 1

• 通过 npm 安装 leaflet.heat : npm i leaflet.heat
• 导入库:import "leaflet.heat";
• 创建 map 组件并使用效果加载 map 并实例化L.heatLayer

这是一个来自库的 github 页面的示例，该页面是用 React 编写的，没有 react-leaflet 组件:

function Map() {
  useEffect(() => {
    var map = L.map("map").setView([-37.87, 175.475], 12);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    const points = addressPoints
      ? addressPoints.map((p) => {
          return [p[0], p[1]];
        })
      : [];

    L.heatLayer(points).addTo(map);
  }, []);

  return <div id="map" style={{ height: "100vh" }}></div>;
}

Demo