0

我将传单与 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
  }
};

...
4

1 回答 1

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());使图像覆盖在地图中心缩放。

演示

于 2019-04-01T20:09:49.153 回答