有没有办法在反应中使用 leaflet.heat ？

Question

我正在尝试在reactJS中使用leaflet.heat。我已经制作了传单库来与反应挂钩一起使用，但不幸的是我无法在反应中使用传单.heat。我导入模块如下：

import "../libraries/HeatLayer";

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

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

注意：我不想使用诸如react-leaflet或react-leaflet-heatmap之类的组件。

Answer 1

• leaflet.heat通过 npm安装：npm i leaflet.heat
• 导入库：import "leaflet.heat";
• 创建地图组件并使用效果加载地图并实例化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>;
}

演示