将传单ImageOverlay添加到图层控件

Question

我使用带有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
  }
};

...

Answer 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