繁体   English   中英

Openlayers - select 只有一项功能并禁用 rest

[英]Openlayers - select only one feature and disable the rest

我有一个 WFS 层:

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
});

我有一个交互 select 的功能:

var interactionSelect = new ol.interaction.Select({

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

而且,我以编程方式选择了一项功能:

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

  }
});

如何保留已选择的功能并禁用同一 wfs 层的其他功能? 到目前为止我这样做是因为一开始只选择了一个功能,而且我想让用户修改那个功能,但它必须是那个特定的功能; 使用上面的代码,用户可以选择红色的功能,但他可以 select 其他功能

我怎样才能做到这一点?

如果您只想修改源功能的子集,您可以设置features属性而不是修改交互的source 通过这种方式,您可以控制哪些是可以修改的功能。

看看我为你做的例子。 它使用 OL 的 countries.geojson 源。 我选择Uruguay作为唯一可以修改的功能。

 <: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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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