Как добавить элемент управления поиском на карту листовки с помощью Angular 2?

Question

Я использую leaflet.js с ngx-leaflet и esri-leaflet-geocoder пакетов.

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

var searchControl = L.esri.Geocoding.geosearch().addTo(mymap);

Но я не могу сделать это в Angular.Я попробовал следующее:

layers = [];
searchControl = Geocoding.geosearch();
this.layers.push(this.searchControl); // in the constructor

HTML:

<div style="height: 300px;"
     leaflet
     [leafletOptions]="options"
     [leafletLayersControl]="layersControl"
     [leafletLayers]="layers"
     [leafletFitBounds]="this.polygon.getBounds()"
     (leafletClick)="mapClicked($event)">
</div>

Я получаю сообщение об ошибке:

Ошибка: «Предоставленный объектне слой. "

Я утешил searchControl, и результат одинаков как для простого JavaScript, так и для Angular.

Answer 1

Обходной путь не уверен, является ли это лучшим решением.

Импорт CSS плагина:

import 'style-loader!esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css';

Передача объекта карты, когда карта готова:

<div style="height: 300px;"
     leaflet
     [leafletOptions]="options"
     [leafletLayersControl]="layersControl"
     [leafletLayers]="layers"
     [leafletFitBounds]="polygon.getBounds()"
     (leafletClick)="mapClicked($event)"
     (leafletMapReady)="onMapReady($event)">>
</div>

И добавить контроллер на карту так же, как обычный JavaScript:

onMapReady(map: L.Map) {
  setTimeout(() => {
    map.invalidateSize(true);
    this.searchControl.addTo(map);
  }, 0);
}