Добавьте буклет ImageOverlay к слою - PullRequest
Новая
       35

Добавьте буклет ImageOverlay к слою

0 голосов
/ 01 апреля 2019

Я использую листовку с пакетом 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
  }
};

...

1 Ответ

1 голос
/ 01 апреля 2019

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

для 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());, чтобы масштабирование наложения изображения в центре карты увеличилось.

Демонстрация

...