Openlayers 3通过多边形选择交互作用

Question

我正在尝试修改此处的Openlayers 3框选择示例，以便可以在地图上绘制多边形以选择要素。

下面是我的代码-我添加了一个包含多边形的矢量源，将交互从“ DragBox”更改为“ Draw”，并将box方法更改为draw方法。

我在js控制台中没有收到任何错误，所以我不太确定我可能在哪里出错？ 这应该产生结果吗？

<!DOCTYPE html>
<html>
  <head>
    <title>Box Selection</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.14.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.14.1/build/ol.js"></script>
    <style>
      .ol-dragbox {
        background-color: rgba(255,255,255,0.4);
        border-color: rgba(100,150,0,1);
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info">No countries selected</div>
    <script>
      var vectorSource = new ol.source.Vector({
        url: 'countries.geojson',
        format: new ol.format.GeoJSON()
      });

      var source = new ol.source.Vector();

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Vector({
            source: vectorSource
          })
        ],
        renderer: 'canvas',
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      // a normal select interaction to handle click
      var select = new ol.interaction.Select();
      map.addInteraction(select);

      var selectedFeatures = select.getFeatures();

      // a DragBox interaction used to select features by drawing boxes
      var dragBox = new ol.interaction.Draw({
        source: source,
        type: 'Polygon'
      });

      map.addInteraction(dragBox);

      var infoBox = document.getElementById('info');

      dragBox.on('drawend', function() {
        // features that intersect the box are added to the collection of
        // selected features, and their names are displayed in the "info"
        // div
        var info = [];
        var extent = source.getExtent();
        vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
          selectedFeatures.push(feature);
          info.push(feature.get('name'));
        });
        if (info.length > 0) {
          infoBox.innerHTML = info.join(', ');
        }
      });

      // clear selection when drawing a new box and when clicking on the map
      dragBox.on('drawstart', function() {
        selectedFeatures.clear();
        infoBox.innerHTML = '&nbsp;';
      });
      map.on('click', function() {
        selectedFeatures.clear();
        infoBox.innerHTML = '&nbsp;';
      });
    </script>
  </body>
</html>

Answer 1

更新：

请注意ol.source.Vector#forEachFeatureInExtent和ol.source.Vector#forEachFeatureIntersectingExtent之间的区别。

http://jsfiddle.net/jonataswalker/sum62szv/

首先，获取绘制的多边形范围，然后使用ol.source.Vector#forEachFeatureIntersectingExtent进行检查， ol.source.Vector#forEachFeatureIntersectingExtent所示：

draw.on('drawend', function(evt){
  var polygon_extent = evt.feature.getGeometry().getExtent();
  vectorSource.forEachFeatureIntersectingExtent(polygon_extent, function(feature) {
    selectedFeatures.push(feature);
    info.push(feature.get('name'));
  });

});

Answer 2

这可能是重复的。 在这里检查

为此，您需要使用JSTS lib。 检查上面的链接，它也有一个小提琴，可以看到它的实际作用

Openlayers 3通过多边形选择交互作用

问题描述

2 个解决方案

解决方案1
1 2016-03-02 14:09:31

解决方案2
1 已采纳 2016-03-02 16:24:42

Openlayers 3通过多边形选择交互作用

问题描述

2 个解决方案

解决方案1 1 2016-03-02 14:09:31

解决方案2 1 已采纳 2016-03-02 16:24:42

解决方案1
1 2016-03-02 14:09:31

解决方案2
1 已采纳 2016-03-02 16:24:42