Как выбрать (пометить как отмеченный) слой при загрузке страницы в leaflet.js с помощью ngx-leaflet с angular8?

Я интегрировал карту листовок в angular с помощью ngx-leaflet. На этой карте я наложил от 4 до 5 слоев (например, инциденты, вмешательства, черные пятна, регионы). Я хочу, чтобы первый оверлей (то есть инциденты) был отмечен как отмеченный. Мой код .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])
                  };

angular angular8 leaflet ngx-leaflet
person user3484089    schedule 18.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Слои, которые вы добавляете в массив, привязанный к [leafletLayers], должны быть отмечены / выделены в элементе управления слоями. Демо 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)
};
person reblace    schedule 18.05.2020