如何在angular8中使用ngx-leaflet在leaflet.js中选择(标记为选中)页面加载的图层？

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]的数组中的层应该在layers控件中被选中/选中。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)
};