[英]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.