将传单 ImageOverlay 添加到图层控件

Question

我将 leaflet 与 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

将传单 ImageOverlay 添加到图层控件

Add leaflet ImageOverlay to Layers Control

angular

leaflet

openstreetmap

angular-leaflet-directive

ngx-leaflet