ngx-leaflet: Как добавить пользовательский элемент управления? - PullRequest
Новая
       23

ngx-leaflet: Как добавить пользовательский элемент управления?

0 голосов
/ 17 февраля 2019

Я уже некоторое время пытался реализовать этот буклет с использованием ngx-leaflet.

. Абсолютно нет ясной документации о том, как реализоватьпользовательский элемент управления или легенда, следуя вместе с учебником.

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};

// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
        : 'Hover over a state');
};

info.addTo(map);

enter image description here

То же самое относится и к созданию легенды.

Может ли кто-нибудь указать мне правильное направление, чтобы попытаться реализовать это в Angular 7 с помощью ngx-leaflet lib? 

import { control, featureGroup, geoJson, icon, latLng, LatLngExpression, Map, Marker, marker, popup, tileLayer } from 'leaflet';

  onMapReady(map: Map) {
    this.map = map;

    // create info control
    let info = control(
      {
        onAdd: map => {

        }
      }
    )
    info.addTo(map);

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

1 Ответ

0 голосов
/ 17 февраля 2019

Единственное, что вам нужно сделать, чтобы этот пример работал, - это прослушать событие onMapReady и поместить туда весь код руководства.Ссылка на карту - это то, что вам нужно, и она служит аргументом для этой функции.

В частности: 

<div
  style="height: 100vh"
  leaflet
  [leafletOptions]="options"
  (leafletMapReady)="onMapReady($event)"
></div>

ts: 

onMapReady(map) {
 // place all the tutorial code inside here
 ...

// control that shows state info on hover
let info = L.control();

// here you want the reference to be info, therefore this = info
// so do not use es6 to access the the class instance
info.onAdd = function (map) {
  this._div = L.DomUtil.create('div', 'info');
  this.update();
  return this._div;
};

// also here you want the reference to be info, therefore this = info
// so do not use es6 to access the class instance
info.update = function (props) {
  this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
    '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
    : 'Hover over a state');
};

info.addTo(map);
...
const legend = L.control({ position: 'bottomright' });

legend.onAdd = map => {

  let div = L.DomUtil.create('div', 'info legend'),
    grades = [0, 10, 20, 50, 100, 200, 500, 1000],
    labels = [],
    from, to;

  for (var i = 0; i < grades.length; i++) {
    from = grades[i];
    to = grades[i + 1];

    labels.push(
      '<i style="background:' + getColor(from + 1) + '"></i> ' +
      from + (to ? '&ndash;' + to : '+'));
  }

  div.innerHTML = labels.join('<br>');
  return div;
};

legend.addTo(map);
}

Проверьте демонстрацию для полного примера в Angular 7 с использованием ngx-leaflet

...