Добавить буклет ImageOverlay в управление слоями

Я использую листовку с пакетом Angular ngx-leaflet и просто пытаюсь получить свой слой для ImageOverlays в мой LayersControl, поэтому я могу показать или скрыть этот слой на карте на основе флажка. Почему-то не работает так, как описано в документации.

Может кто-то помочь мне с этим?

.. вот мой html-шаблон:

<div leaflet
     [leafletOptions]="options"
     [leafletLayersControl]="layersControl"
     [leafletMarkerCluster]="_markerCluster"
     ">
</div

..и вот компонент:

...

this.overlay = L.imageOverlay(props.ref, props.bounds, this.options);
map.addLayer(this.overlay);

layersControl = {
  baseLayers: {
    'Open Street Map': this.openStreetMap,
  },
  overlays: {
    'GeoJSONs': this.featureGroup,
    'Image Overlay': this.overlay
  }
};

...

angular leaflet openstreetmap angular-leaflet-directive ngx-leaflet
person Codehan25    schedule 01.04.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Определение image bounds действительно играет важную роль. Поэтому убедитесь, что вы установили соответствующие. Вот пример наложения изображения с возможностью переключения его в качестве наложения с помощью ngx-leaflet & angular:

on ts:

openStreetMap = tileLayer(
    "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    { maxZoom: 18, attribution: "..." }
);

// Use the image bounds to align the image properly
imageUrl = "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg";
imageBounds: L.LatLngBoundsExpression = [
    [-33.865, 151.2094],
    [-35.865, 154.2094]
];
imageOverlay = imageOverlay(this.imageUrl, this.imageBounds);

layersControl = {
    baseLayers: {
      "Open Street Map": this.openStreetMap
    },
    overlays: {
      "Image Overlay": this.imageOverlay
    }
 };

по шаблону:

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

при желании используйте map.fitBounds(this.imageOverlay.getBounds());, чтобы разместить наложение изображения в центре увеличенной карты.

Демо

person kboul    schedule 01.04.2019
comment
Мой подход на самом деле очень похож на ваш подход. Но я хотел бы добавить несколько ImageOverlays и предоставить их как один слой для отображения и скрытия в элементе управления Layers. Мои ImageOverlay создаются в рамках подписки, которая создает ImageOverlay для нескольких местоположений. Есть ли способ поместить несколько ImageOverlays в массив и добавить их как один слой на карту? - person Codehan25; 02.04.2019
comment
Это другой вопрос, и вы очень хорошо задали его в отдельной теме, поскольку он не был включен в этот вопрос. Поэтому, если вы считаете, что мой ответ решил вашу проблему с наложением одного изображения (это то, о чем вы просили), пожалуйста, примите его и/или проголосуйте за него. - person kboul; 02.04.2019
comment
Я подтвердил ваш ответ. Можешь и мне помочь с вопросом? - person Codehan25; 02.04.2019
comment
Я рассмотрю ваш вопрос, как только найду время :) - person kboul; 02.04.2019