Openlayers - выберите только одну функцию и отключите остальные - PullRequest
Новая
       56

Openlayers - выберите только одну функцию и отключите остальные

0 голосов
/ 19 июня 2020

У меня есть слой 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? Я сделал это до сих пор, потому что вначале выбрана только одна функция, но также я хочу, чтобы пользователь мог изменять эту функцию, но это должна быть именно эта функция; с помощью этого кода, приведенного выше, пользователь получает функцию, выделенную красным, но он может выбрать другие функции

Как я могу это сделать?

1 Ответ

0 голосов
/ 19 июня 2020

Если вы просто хотите изменить подмножество функций источника, вы можете установить свойство features вместо source взаимодействия изменения. Таким образом, вы контролируете, какие функции могут быть изменены.

Взгляните на пример, который я сделал для вас. Он использует исходный текст таблицы country.geo json. Я выбрал 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>
...