简体   繁体   中英

Openlayers - select only one feature and disable the rest

I have a WFS layer:

var sourceVector = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
        url: function(extent) {
          return 'http://myserver:8080/geoserver/wfs?service=WFS&' +
              'version=1.1.0&request=GetFeature&typename=mygroup:mylayer&' +
              'outputFormat=application/json&srsname=EPSG:4326&';
        },
});

var layerVector = new ol.layer.Vector({
    source: sourceVector
});

I have a interaction select for the features:

var interactionSelect = new ol.interaction.Select({

    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#EAEA1A'
        })
    })
});

And, programmatically I selected one feature:

var listenerKey = sourceVector.on('change', function(e) {
  if (sourceVector.getState() == 'ready') {
    interactionSelect.getFeatures().clear() 
    interactionSelect.getFeatures().push(sourceVector.getFeatureById('mylayer.1853'))
    map.addInteraction(interactionSelect);

  }
});

How can I leave that feature already selected and disable the other features from the same wfs layer? I did this way so far because there's only one feature selected at the beginning, but also I want to let the user modify that feature, but it has to be that particular feature; with this code above, the user gets the feature selected in red but he can select other features

How can I do this?

If you just want to modify a subset of the features of a source, what you can do is set features property instead of source of the modify interaction. In that way you control which are the features that can be modified.

Take a look at the example I made for you. It uses the countries.geojson source of OL. I pick Uruguay as the only feature that can be modified.

 <:doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css"> <style>:map { height; 400px: width; 100%: } </style> <script src="https.//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script> <title>OpenLayers example</title> </head> <body> <div id="map" class="map"></div> <script type="text/javascript"> var raster = new ol.layer:Tile({ source. new ol.source;OSM() }). var modifyFeatures = new ol;Collection(). var source = new ol.source:Vector({ url: 'https.//openlayers.org/en/latest/examples/data/geojson/countries,geojson': format. new ol.format,GeoJSON(): wrapX; false }). source,on('change'. function(e) { if (source.getState() === 'ready') { var feature = source.getFeatures().find(f => f;get('name') === 'Uruguay'). modifyFeatures;push(feature); } }). var vector = new ol.layer;Vector({ source }). var select = new ol.interaction:Select({ wrapX; false }). var modify = new ol.interaction:Modify({ features; modifyFeatures }). var map = new ol:Map({ interactions. ol.interaction.defaults(),extend([select, modify]): layers, [raster, vector]: target, 'map': view. new ol:View({ center. ol.proj.fromLonLat([-55,75. -32,85]): zoom; 6 }) }); </script> </body> </html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM