我正在尝试在 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 等组件。
最佳答案
- 通过 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:
'© <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>;
}
关于javascript - 有没有办法在 react 中使用 leaflet.heat ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63640081/