我正在Angular项目中使用带有@ asymmetrik / ngx-leaflet的heatmap.js库,以显示用户位置的热图。
我使用地图的边界创建一个多边形,并带它带来内部位置的汇总计数。我可以携带和显示数据,但是我希望半径随着缩放而相应地更改。
我已经将scaleRadius设置为true,但是它没有按我预期的那样工作:例如,如果我选择一个像1的半径,则放大时半径会变得太大。如果我变小 缩小时半径变小。因此,我做了一些测试并得出了这些值(我设置了最小缩放和最大缩放):
zoom radius
5 0.5
6 0.3
7 0.1
8 0.05
9 0.03
10 0.01
11 0.007
12 0.005
13 0.003
14 0.002
15 0.001
我想也许我可以使用传单“ zoomend”的事件处理程序来检测缩放的变化并以某种方式更改半径。我会使事情变得过于复杂吗?有可能做这样的事情吗?谢谢。
我的代码是:
模板:
<div class="map"
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)">
</div>
组件:
import { Component } from '@angular/core';
declare var L;
declare var HeatmapOverlay;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data = {
data: []
};
heatmapLayer = new HeatmapOverlay({
radius: 0.01,
maxOpacity: 0.8,
scaleRadius: true, // <------------------ Set to true
blur: .75,
latField: 'lat',
lngField: 'lng',
valueField: 'count'
});
options = {
layers: [
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 15,
minZoom: 5
}),
this.heatmapLayer
],
zoom: 10,
center: latLng([45.116177, 7.742615])
};
onMapReady(map: MapLeaflet): void {
console.log('onMapReady');
this.map = map;
this.map.addLayer(this.editableLayers);
this.map.on('draw:created', this.onMapDrawed, this);
this.map.on('moveend', this.onChangedMap, this);
this.map.on('zoomend', this.changeRadius(), this); // <-------change radius
this.map.on('draw:deleted', this.onDeletedFromMap, this);
console.log('Map done');
this.getPositions();
}
getPositions() {
const coords: LatLng [] = [];
this.data.data = [];
const bounds = this.map.getBounds();
const sw = bounds.getSouthWest();
const se = bounds.getSouthEast();
const nw = bounds.getNorthWest();
const ne = bounds.getNorthEast();
coords.push(nw);
coords.push(ne);
coords.push(se);
coords.push(sw);
coords.push(nw);
const mypoly = new Polygon(coords);
this.positionService.getPositionInPolygon(JSON.stringify(mypoly.toGeoJSON().geometry))
.subscribe(
result => {
result.forEach(
item => {
this.data.data.push({
lat: item.coordinates[1],
lng: item.coordinates[0],
count: item.count
});
});
this.heatmapLayer.setData(this.data);
},
error => {
console.log(error);
},
() => {
// 'onCompleted' callback.
}
);
}
}
我使用了本教程:https://github.com/Asymmetrik/ngx-leaflet-tutorial-plugins/tree/master/heatmap.js
答案 0 :(得分:0)
此问题的解决方案是我手动为每个数据点分配半径。因此,我将具有缩放比例和半径的表格转换为一个函数,每次用户更改地图的缩放比例时都会调用此函数(使用传单地图的事件监听器)。
答案 1 :(得分:0)
是的,您可以为每个数据点执行此操作。但是您也可以针对整个热图执行此操作。不过,我没有执行任何性能指标。
onMapZoom($event) {
this.heatmapLayer.cfg.radius = this.getRadiusByZoomlevel($event.target.getZoom());
}
getRadiusByZoomlevel(radius) {
if (radius <= 5) {
return 0.5;
} else
if(radius > 5){
return 0.3
}
}