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拓 flutter 库或TURF.js lib。
我个人认为JSTS是更加完善和完善的解决方案。获取一些信息here。目前，作者正在进行更改，即将发布与ol3兼容的官方版本，因此请及时了解。

我会给您一个使用较旧版本JSTS的示例来完成此工作。
(检查提供的小提琴的外部源，以验证您需要加载的JSTS lib文件)。如果您有时间，请检查最新JSTS​​版本是否有任何新链接，并让我们知道您是否有任何新闻。

这是逻辑:

创建3个 vector 层。一个用于您要查询的图层，一个用于放置自由手绘图，另外一个用于放置高光。

创建绘图交互并在其上附加一个“drawend”事件。

使用JSTS查找与数字化几何图形相交的几何图形。

因此，这是您的代码和fiddle，使您的生活更轻松。

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);
};