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

【问题标题】：How to put a heatmap in ngx-leaflet?如何在 ngx-leaflet 中放置热图？
【发布时间】：2019-02-25 02:34:47
【问题描述】：

我想在 ngx-leaflet 地图上放置一张热图（使用角度），如下图所示。

我怎样才能做到这一点？

这里是示例的demo。

【问题讨论】：

bsd-2 许可证禁止我在我的情况下使用它。

标签： angular typescript leaflet heatmap ngx-leaflet

【解决方案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"]

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

Demo

【讨论】：

这也是必要的：npm install leaflet.heat。谢谢。
更不用说...npm i @types/leaflet.heat