没有layercontrol图标的传单和覆盖图像

时间:2019-04-10 20:15:34

标签: angular typescript leaflet ionic4 ngx-leaflet

您能告诉我如何在leaflet地图上添加以下类型的叠加层吗?我使用ngx-leaflet模块。在这里,我不需要默认情况下出现的layersControl图标。默认情况下,我只需要带有标记等的覆盖图像。这里有什么帮助吗?

enter image description here

我尝试过这样:

.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>

0 个答案:

没有答案