如何使用带有angular8的ngx-leaflet在leaflet.js中选择页面加载上的层(标记为已选中)?

问题描述 投票:1回答:1

我使用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 leaflet angular8 ngx-leaflet
1个回答
1
投票

您添加到绑定到[leafletLayers]的数组的图层应在图层控件中进行检查/选择。 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)
};

© www.soinside.com 2019 - 2024. All rights reserved.