如何使用@ baseLayers /ngx-leaflet默认选择不对称覆盖(&A)

Question

stackblitz code

@asymmetrik/ngx-leaflet

​

​

如何默认选择baseLayers & overlays？我已经使用layersControl来显示这些baseLayers和覆盖图。

Answer 1

将所有app.component.ts内容替换为以下内容：

import { Component, OnInit } from "@angular/core";
import { tileLayer, marker } from "leaflet";
declare let L;

// the best thing is to separate this (you can also do is in external file modal.ts for example)
const LayersForMap = {
  layer1: tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
    maxZoom: 30,
    minZoom: 12
  }),
  layer2: tileLayer(
    "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    { maxZoom: 30, minZoom: 12 }
  ),
  layer3: tileLayer("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
    maxZoom: 30,
    minZoom: 12
  }),
  layer4: tileLayer("", { maxZoom: 100, minZoom: 12 })
};

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  // attributs
  name = "Angular";
  options: any;
  layersControl: any;

  ngOnInit() {
    this.init();
  }

  //
  init() {
    this.options = this.getOptions();
    this.layersControl = this.getLayerControls();
  }
  getOptions() {
    this.options = {
      layers: [LayersForMap.layer1 /* your problem was exactly here ... */],
      zoom: 5,
      center: L.latLng(46.879966, -121.726909)
    };
    return this.options;
  }

  getLayerControls() {
    this.layersControl = {
      baseLayers: {
        "Topo Map": LayersForMap.layer1,
        Imagery: LayersForMap.layer2,
        Outdoors: LayersForMap.layer3,
        None: LayersForMap.layer4
      },
      overlays: {
        "example overlays": this.exampleOverlays()
      }
    };
    return this.layersControl;
  }

  exampleOverlays() {
    const mark = marker(L.latLng(46.879966, -121.726909)).bindTooltip(
      "this is example of overlays"
    );
    return mark;
  }
}

Answer 2

要在默认情况下启用基线图层和叠加，必须将它们添加到地图中。最简单的方法是将它们添加到绑定到[leafletLayers]的数组中。

在包含在ngx-leaflet GitHub repo中的演示中有一个如何做到这一点的示例。查看repo中的自述文件，了解有关如何运行它的说明。该演示实际上基于表单的检查状态启用了基本图层和覆盖。演示代码包含在ngx-leaflet/src/demo/app/leaflet/layers/layers-demo.component.*下。

我在下面包含了一个简化的版本。

模板中的代码片段：

<div leaflet style="height: 300px;"
     [leafletOptions]="options"
     [leafletLayers]="layers"
     [leafletLayersControl]="layersControl">
</div>

组件中的代码片段：

    // Values to bind to Leaflet Directive
    layers: Layer[];
    layersControl = {
        baseLayers: {
            'Open Street Map': this.LAYER_OSM.layer,
            'Open Cycle Map': this.LAYER_OCM.layer
        },
        overlays: {
            Circle: this.circle.layer,
            Square: this.square.layer,
            Polygon: this.polygon.layer,
            Marker: this.marker.layer,
            GeoJSON: this.geoJSON.layer
        }
    };
    options = {
        zoom: 10,
        center: latLng(46.879966, -121.726909)
    };

    constructor() {
        // This is different from the demo, just set them manually
        this.layers = [
            this.LAYER_OSM.layer,
            this.circle.layer,
            this.square.layer
         ];
    }