如何使用角度为 8 的 ngx-leaflet 在 leaflet.js 中加载页面上的 select（标记为选中）图层？

Question

我使用 ngx-leaflet 在 angular 中集成了传单地图。在这张地图上，我覆盖了 4 到 5 个图层（例如事件、干预、黑点、区域）。我想要第一个叠加层 (i.e.Incidents) 标记为已选中。我的 .html 代码：-

`<div *ngIf="dataLoaded" class="map records-map" leaflet leafletDraw [leafletOptions]="options"
     [leafletLayersControl]="layersControl" [leafletDrawOptions]="drawOptions"
     (leafletMapReady)="onMapReady($event)" [leafletLayers]="layers1"></div>`

我的 .ts 代码：-

   this.layersControl = {
                    baseLayers: {
                      'STREETS': this.streetMaps,
                      'SATELLITE': this.wMaps
                    },
                    overlays: {
                      'INCIDENTS': new L.LayerGroup(this.layers1),
                      'INTERVENTIONS': new L.LayerGroup(this.layers2),
                      'HEATMAP': circle([46.95, -122], { radius: 5000 }),
                      'BLACKSPOTS': this.route,
                      'CITY/PROVINCE': geoJSON(result1, options1),
                      'REGIONS': geoJSON(result2, options),
                    }
                  };


                  // Set the initial set of displayed layers (we could also use the leafletLayers input binding for this)

                  this.options = {
                    layers: [this.streetMaps],
                    zoom: 6,
                    center: latLng([this.lat,this.long])
                  };

Answer 1

您添加到绑定到 [leafletLayers] 的数组的图层应该在图层控件中得到 checked/selected。 demo code 有一个更复杂的例子。

这是一个更简单的版本，其中首先检查了圆和多边形：


LAYER_OCM = tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Open Cycle Map'
});
LAYER_OSM = tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Open Street Map'
)};

circle = circle([ 46.95, -122 ], { radius: 5000 });
polygon = polygon([[ 46.8, -121.85 ], [ 46.92, -121.92 ], [ 46.87, -121.8 ]]);
geoJSON = geoJSON(
    ({
        type: 'Polygon',
        coordinates: [[
            [ -121.6, 46.87 ],
            [ -121.5, 46.87 ],
            [ -121.5, 46.93],
            [ -121.6, 46.87 ]
        ]]
    }) as any,
    { style: () => ({ color: '#ff7800' })}
);

layers: Layer[ this.LAYER_OSM, this.circle, this.polygon ];
layersControl = {
    baseLayers: {
        'Open Street Map': this.LAYER_OSM,
        'Open Cycle Map': this.LAYER_OCM
    },
    overlays: {
        Circle: this.circle,
        Polygon: this.polygon,
        GeoJSON: this.geoJSON
    }
};
options = {
    zoom: 10,
    center: latLng(46.879966, -121.726909)
};

如何使用角度为 8 的 ngx-leaflet 在 leaflet.js 中加载页面上的 select（标记为选中）图层？

How to select(marked as checked) layer on pageload in leaflet.js using ngx-leaflet with angular8?

angular

leaflet

angular8

ngx-leaflet