您能告诉我如何在leaflet地图上添加以下类型的叠加层吗?我使用ngx-leaflet模块。在这里,我不需要默认情况下出现的layersControl
图标。默认情况下,我只需要带有标记等的覆盖图像。这里有什么帮助吗?
我尝试过这样:
.ts
ionViewDidEnter() {
this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude")));
this.options = {
layers: [
tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
],
zoom: 15,
center: this.center,
attributionControl: false,
};
this.layers.push(this.mapService.getMarker(this.center, "assets/icon/map/placeholder.png"));
//problem starts from here. How can I do that?
const imageBounds = latLngBounds([[40.712216, -74.22655], [40.773941, -74.12544]]);
const imgOverlay = imageOverlay('assets/icon/map/my_map.png', imageBounds);
// Here I don't need this control thing. I just need overlay image by default.
this.layersControl = {
baseLayers: {
'Google Maps': tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
},
overlays: {
'My Map': imgOverlay
}
};
}
.html
<ion-content>
<div style="height: 100%" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center"
[leafletLayers]="layers" [leafletLayersControl]="layersControl">
</div>
</ion-content>