开放层 - 仅选择一个功能并禁用其余功能



我有一个 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
});

我为这些功能选择了交互:

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 图层中的其他要素?到目前为止,我这样做是因为一开始只选择了一个功能,但我也想让用户修改该功能,但它必须是该特定功能;使用上面的代码,用户可以选择红色的功能,但他可以选择其他功能

我该怎么做?

如果只想修改源要素的子集,则可以设置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>

相关内容

  • 没有找到相关文章

最新更新