如何在 ngx-leaflet 中放置热图?
How to put a heatmap in ngx-leaflet?
我想在 ngx-leaflet 地图上放置一个热图(使用 angular),如下图所示。
我怎样才能做到这一点?
这里是例子的demo。
安装传单,ngx-传单,@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);
}
我想在 ngx-leaflet 地图上放置一个热图(使用 angular),如下图所示。
我怎样才能做到这一点?
这里是例子的demo。
安装传单,ngx-传单,@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);
}