Как сделать, чтобы базовый слой и оверлеи были выбраны по умолчанию с помощью @ asymmetrik / ngx-leaflet

Question

код стекаблиц @ asymmetrik / ngx-leaflet

Как сделать базовые слои и оверлеи выбранными по умолчанию? Я использовал layerControl, чтобы показать эти базовые слои и наложения.

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

Пример демонстрации того, как это сделать, представлен в демоверсии, включенной в репозиторий GitHub ngx-leaflet. Проверьте README в репозитории для инструкций о том, как его запустить. Демонстрация фактически включила базовые слои и оверлеи, основанные на состоянии проверки формы. Демонстрационный код включен в 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
         ];
    }