将传单 ImageOverlay 添加到图层控件答案

【问题标题】：Add leaflet ImageOverlay to Layers Control将传单 ImageOverlay 添加到图层控件
【发布时间】：2019-08-22 12:34:54
【问题描述】：

我使用带有 Angular 包 ngx-leaflet 的传单，只是试图在我的 LayersControl 中获取 ImageOverlays 图层，因此我可以根据复选框在地图中显示或隐藏该图层。不知何故，它不像文档中描述的那样工作。

有人可以帮我解决这个问题吗？

..这是我的 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

【解决方案1】：

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()); 以使图像叠加层适合缩放的地图中心。

Demo

【讨论】：

我的做法其实和你的做法很相似。但我想添加多个 ImageOverlays 并将它们作为单个图层提供以在图层控件中显示和隐藏。我的 ImageOverlay 是在为多个位置创建 ImageOverlay 的订阅中创建的。有没有办法将多个 ImageOverlays 放在一个数组中并将它们作为单个图层添加到地图中？
这是一个不同的问题，你在一个单独的线程中做得很好，因为它没有包含在这个问题中。因此，如果您认为我的回答解决了您的一张图片叠加问题（这是您要求的），请接受和/或投票。
我已经确认了您的回答。你能帮我解决这个问题吗？
一有时间我会看看你的问题:)