Как найти границы нескольких маркеров, добавленных в leafletLayer

Я работаю с ngx-leaflet в проекте Angular 6, я рисую несколько маркеров на своей карте, и я хочу центрировать и масштабировать карту листовки на нескольких маркерах

В официальном документе вы можете сделать это с помощью [L.latlngBounds] и найти другие решения с помощью L.featureGroup

Поскольку я использую ngx-leaflet, у меня нет L переменной, поэтому я не могу найти latlngBoundsи featureGroup

Вот моя составляющая:

import {latLng, tileLayer, polygon, marker, Icon, LatLngBounds} from 'leaflet';

export class CustomComponent implements OnInit {

  options = {
    layers: [
      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18})
    ],
    zoom: 5,
    center: latLng(46.879966, -121.726909)
  };

  layers = [];
  fitBounds: LatLngBounds;
}

ngOnInit() {
    for (let i = 0; i < this.locations.length; i++) {
        this.layers.push(this.locations[i].y, this.locations[i].x].setIcon(
            new Icon({
                iconSize: [25, 41],
                iconAnchor: [13, 41],
                iconUrl: 'assets/icons/marker-icon.png',
                shadowUrl: 'assets/icons/marker-shadow.png'
        })));
    }
}

}

И мой шаблон:

<div id="map" leaflet
             [leafletOptions]="options"
             [leafletLayers]="layers"
             [leafletFitBounds]="fitBounds">
        </div>

Спасибо за вашу помощь


angular leaflet ngx-leaflet
person Ghizlane Lotfi    schedule 22.01.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы должны импортировать это

Если вы хотите использовать featureGroup():

import {featureGroup, latLng, tileLayer, polygon, marker, Icon, LatLngBounds} from 'leaflet';


const marker1 = marker([51.5, -0.09]);
const marker2 = marker([50.5, -0.09]);

const group = featureGroup([marker1, marker2]);

group.addTo(map);
map.fitBounds(group.getBounds());

РЕДАКТИРОВАТЬ: я упустил из виду тот факт, что вы используете ngx

Поскольку вы используете ngx-leaflet, вы можете получить объект карты в leafletMapReady событии

Измените свою директиву:

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

Измените свой CustomComponent (адаптируйте этот пример с содержимым вашего метода ngOnInit):

onMapReady(map: Map) {
    const marker1 = marker([51.5, -0.09]);
    const marker2 = marker([50, -0.09]);

    const group = featureGroup([marker1, marker2]);

    group.addTo(map);
    map.fitBounds(group.getBounds());
 }
person YaFred    schedule 22.01.2019
comment
Как ты использовал map? - person Ghizlane Lotfi; 22.01.2019
comment
большое спасибо, хотя это был быстрый ответ, но он сделал все - person Ghizlane Lotfi; 23.01.2019