[英]Openlayers 3 selection by polygon draw interaction
I am trying to modify the Openlayers 3 box selection example here so I can draw a polygon onto the map to select features. 我正在尝试修改此处的Openlayers 3框选择示例,以便可以在地图上绘制多边形以选择要素。
Below is my code - I have added a vector source which will contain the polygon, changed the interaction from 'DragBox' to 'Draw' and changed the box methods to draw methods. 下面是我的代码-我添加了一个包含多边形的矢量源,将交互从“ DragBox”更改为“ Draw”,并将box方法更改为draw方法。
I do not get any errors in the js console so I am not too sure where I might be going wrong with this? 我在js控制台中没有收到任何错误,所以我不太确定我可能在哪里出错? Should this produce a result? 这应该产生结果吗?
<!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 = ' ';
});
map.on('click', function() {
selectedFeatures.clear();
infoBox.innerHTML = ' ';
});
</script>
</body>
</html>
UPDATE: 更新:
Note the difference between ol.source.Vector#forEachFeatureInExtent
and ol.source.Vector#forEachFeatureIntersectingExtent
. 请注意ol.source.Vector#forEachFeatureInExtent
和ol.source.Vector#forEachFeatureIntersectingExtent
之间的区别。
http://jsfiddle.net/jonataswalker/sum62szv/ http://jsfiddle.net/jonataswalker/sum62szv/
First, get the drawn polygon extent, then check with ol.source.Vector#forEachFeatureIntersectingExtent
like: 首先,获取绘制的多边形范围,然后使用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'));
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.