Как разместить карту тепла в ngx-листовке?

Question

Я хотел бы поместить карту тепла на карту листовки ngx (с использованием угловых углов), как показано на следующем рисунке.

Как этого добиться?

Here is the demo примера.

Answer 1

Установить буклет, ngx-буклет, @ types / leaflet

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

Импортировать leaflet.css в angular.json

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

Установить Leaflet.heat и импортировать его в комп.ts, импортируйте географические данные, которые будут использоваться из активов

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);
}

Демо