This example shows how to use a DragBox
interaction to select features. Selected features are added to the feature overlay of a select interaction (ol.interaction.Select
) for highlighting.
Use Ctrl+Drag
(Command+Drag
on Mac) to draw boxes.
这个例子用来展示如何使用DragBox交互控件来选择要素,选中的要素被添加到选择交互控件(ol.interaction.Select)
的要素叠加层中来进行高亮显示。
使用Ctrl+Drag (Mac系统使用Command+Drag)来绘制盒形。
代码:
<!DOCTYPE html>
<html>
<head>
<title>Box Selection</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.2.0/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>
//加载GeoJson格式的矢量数据
var vectorSource = new ol.source.Vector({
url: 'https://openlayers.org/en/v4.2.0/examples/data/geojson/countries.geojson',
format: new ol.format.GeoJSON()
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: vectorSource
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
//创建选择交互控件
var select = new ol.interaction.Select();
map.addInteraction(select);
//获取所有选择的要素
var selectedFeatures = select.getFeatures();
//创建DragBox交互控件
var dragBox = new ol.interaction.DragBox({
//ol.events.condition.platformModifierKeyOnly
//Return true if only the platform-modifier-key (the meta-key on Mac, ctrl-key otherwise) is pressed,
//如果只按下platform-modifier-key(Mac平台是meta-key,其他平台是ctrl-key)则返回true
//false otherwise
//其他都返回false
condition: ol.events.condition.platformModifierKeyOnly
});
map.addInteraction(dragBox);
dragBox.on('boxend', function() {
//获取当前绘制的范围
var extent = dragBox.getGeometry().getExtent();
//遍历当前范围内的每一个要素,并把它添加到selectedFeatures集合中
vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
selectedFeatures.push(feature);
});
});
//每次绘制之前清除selectedFeatures中的所有要素
dragBox.on('boxstart', function() {
selectedFeatures.clear();
});
var infoBox = document.getElementById('info');
selectedFeatures.on(['add', 'remove'], function() {
//遍历selectedFeatures中的每一个要素,并返回每一个要素的名称
var names = selectedFeatures.getArray().map(function(feature) {
return feature.get('name');
});
//如果names数组的长度大于0,则把它用逗号分隔添加到id为info的DIV标签中
if (names.length > 0) {
infoBox.innerHTML = names.join(', ');
} else {
infoBox.innerHTML = 'No countries selected';
}
});
</script>
</body>
</html>