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

将传单ImageOverlay添加到图层控件

1 个答案: