Измените радиус с помощью плагина heatmap.js с картой ngx-leaflet в проекте Angular

Я использую библиотеку heatmap.js с @ asymmetrik / ngx-leaflet в проекте Angular, чтобы отображать тепловую карту местоположений пользователя.

Я использую границы карты для создания многоугольника и с его помощью привожу совокупное количество позиций внутри него. Я могу принести и отобразить данные, но я хотел бы, чтобы радиус изменялся соответственно с увеличением.

Я установил для 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


angular leaflet ngx-leaflet
person Ana    schedule 30.10.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Решением этой проблемы было то, что я вручную присвоил каждой точке данных радиус. Итак, я преобразовал таблицу с масштабированием и радиусом в функцию, которая вызывалась каждый раз, когда пользователь менял масштаб карты (используйте прослушиватель событий карты листовок).

person Ana    schedule 06.11.2018

arrow_upward
0
arrow_downward

Да, вы можете сделать это для каждой точки данных. Но вы также можете сделать это для всей тепловой карты. Однако я не проводил никаких измерений производительности.

   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
     }    
   }
person paul hindenberg    schedule 20.11.2019