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

Question

我想将热图放在 ngx-leaflet map 上(使用 Angular )，如下图所示。

我怎样才能做到这一点？

这是 demo的例子。

Answer 1

安装传单，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"]

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

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

监听 onMapReady 事件获取对 map 的引用并将热图添加到 map

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

Demo