簡體   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