Javascript 多边形选择OpenLayers 3

如何使用多边形绘制选择要素？根据示例，可以使用方形框进行选择

我想知道是否有一种方法可以在创建多边形之后触发事件，并检查它与其他特征的交点。在我的例子中，我试图捕获数据点

    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.DragBox({
        condition: ol.events.condition.platformModifierKeyOnly
    });

    map.addInteraction(dragBox);

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

    dragBox.on('boxend', 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 = dragBox.getGeometry().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('boxstart', function() {
        selectedFeatures.clear();
        infoBox.innerHTML = ' ';
    });
    map.on('click', function() {
        selectedFeatures.clear();
        infoBox.innerHTML = ' ';
    });

---

这在开放层3中可能吗

对于此类操作，您需要使用JSTS拓扑库或库。 在我个人看来，JSTS是更完整、更有效的解决方案。获取一些信息。目前，作者正在进行更改，即将发布官方ol3兼容版本，请随时通知

我将给出一个使用旧版本JSTS的示例，它可以完成这项工作。 （检查提供的fiddle的外部源，以验证需要加载的JSTS lib文件）。如果您有时间，请检查是否有任何最新JSTS版本的新链接，如果您有任何消息，请告诉我们

逻辑如下：

创建3个向量层。一个用于要查询的图层，一个用于放置徒手绘制，另一个用于放置高光

创建绘图交互并在其上附加“抽屉”事件

使用JST查找与数字化几何体相交的几何体

因此，这里是您的代码和帮助，以使您的生活更轻松

var waterAreasVecSource = new ol.source.Vector({
    loader: function (extent) {
        $.ajax('http://demo.opengeo.org/geoserver/wfs', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'water_areas',
                srsname: 'EPSG:3857',
                bbox: extent.join(',') + ',EPSG:3857'
            }
        }).done(loadFeatures)
            .fail(function () {
        alert("fail loading layer!!!")
        });
    },
    strategy: ol.loadingstrategy.bbox
});

function loadFeatures(response) {
    formatWFS = new ol.format.WFS(),
    waterAreasVecSource.addFeatures(formatWFS.readFeatures(response));
}

var waterAreasVector = new ol.layer.Vector({
    source: waterAreasVecSource,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2
        })
    })
});
var raster = new ol.layer.Tile({
  source: new ol.source.OSM({})
});

var myDrawSource = new ol.source.Vector({wrapX: false});

var myDrawVector = new ol.layer.Vector({
  source: myDrawSource,
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.5)'
    }),
    stroke: new ol.style.Stroke({
      color: '#ffcc33',
      width: 2
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: '#ffcc33'
      })
    })
  })
});

var mySelectionsSource = new ol.source.Vector({wrapX: false});

var mySelectionsVector = new ol.layer.Vector({
  source: mySelectionsSource,
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 0, 0, 0.5)'
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(255, 0, 0, 1)',
      width: 2
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: '#ffcc33'
      })
    })
  })
});

var map = new ol.Map({
  layers: [raster, myDrawVector,waterAreasVector,mySelectionsVector],
  target: 'map',
  view: new ol.View({
    center: [-8908887.277395891, 5381918.072437216],
    maxZoom: 19,
    zoom: 12
  })
});


var  draw = new ol.interaction.Draw({
      source: myDrawSource,
      type: "Polygon",
    });

map.addInteraction(draw);

draw.on('drawend',function(e){
myDrawSource.clear();
mySelectionsSource.clear();
var extent = e.feature.getGeometry().getExtent();
var geomA = e.feature.getGeometry();
waterAreasVecSource.forEachFeatureInExtent(extent,function(aa){
console.log("forEachFeatureInExtent",aa.getGeometry());
if (polyIntersectsPoly(geomA,aa.getGeometry()) === true){
mySelectionsSource.addFeature(aa);
}
});
});



/**
* check whether the supplied polygons have any spatial interaction
* @{ol.geometry.Polygon} polygeomA 
* @{ol.geometry.Polygon} polygeomB 
* @returns {Boolean} true||false
*/
function polyIntersectsPoly(polygeomA, polygeomB) {
 var geomA = new jsts.io.GeoJSONReader().read(new ol.format.GeoJSON().writeFeatureObject(
        new ol.Feature({
            geometry: polygeomA
       })
   )
   ).geometry;
var geomB = new jsts.io.GeoJSONReader().read(new ol.format.GeoJSON().writeFeatureObject(
        new ol.Feature({
            geometry: polygeomB
        })
    )
    ).geometry;
return geomA.intersects(geomB);
};

---

看起来您已经有了解决方案，不是吗？不幸的是，这只适用于方形选择，而不适用于多边形或徒手绘制的形状。