angular - 如何在 ngx-leaflet 中放置热力图？

我想在 ngx-leaflet 地图上（使用 Angular）添加热力图，就像下面的图片一样。

我如何才能实现那一点？

这是示例的演示。

答案＃1

安装 leaflet、ngx-leaflet、@types/leaflet

npm install leaflet
npm install leaflet.heat
npm install @asymmetrik/ngx-leaflet
npm install --save-dev @types/leaflet

在 angular.json 中导入 leaflet.css

  "styles": ["../node_modules/leaflet/dist/leaflet.css", "styles.css"]

安装 Leaflet.heat 并在 comp.ts 中导入它，从 assets 导入要使用的地理数据

import 'leaflet.heat/dist/leaflet-heat.js'
import { addressPoints } from '../assets/realworld.10000'

监听 onMapReady 事件，获取地图的引用并将热力图添加到地图上

onMapReady(map) {
    let newAddressPoints = addressPoints.map(function (p) { return [p[0], p[1]]; });
    const heat = L.heatLayer(newAddressPoints).addTo(map);
}

演示