Openlayers示例9 | Box Selection
这个例子展示了如何使用DragBox交互来选择功能。选中的特性被添加到选中交互(ol/interaction/ select)的特性叠加层中以高亮显示。
使用Ctrl+拖动(命令+拖动在Mac上)来绘制框。
数据url:
https://openlayers.org/data/vector/ecoregions.json
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<!-- 引入OpenLayers CSS样式 -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css">
<!-- 引入OpenLayers JS库 -->
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
<!-- css代码 -->
<style>
.map {
width: 100%;
height: 600px;
}
</style>
<title>Box Selection</title>
</head>
<body>
<div id="map" class="map"></div>
<div>Selected regions: <span id="info">None</span></div>
</body>
<script>
const vectorSource = new ol.source.Vector({
url: 'https://openlayers.org/data/vector/ecoregions.json',
format: new ol.format.GeoJSON(),
});
const style = new ol.style.Style({
fill: new ol.style.Fill({
color: '#eeeeee',
}),
});
const map = new ol.Map({
layers: [
new ol.layer.Vector({
source: vectorSource,
background: '#1a2b39',
style: function (feature) {
const color = feature.get('COLOR_BIO') || '#eeeeee';
style.getFill().setColor(color);
return style;
},
}),
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2,
constrainRotation: 16,
}),
});
// 定义被选中的面图形的样式
const selectedStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)',
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 0.7)',
width: 3,
}),
});
// 处理单击的普通选择交互
const select = new ol.interaction.Select({
style: function (feature) {
const color = feature.get('COLOR_BIO') || '#eeeeee';
selectedStyle.getFill().setColor(color);
return selectedStyle;
},
});
map.addInteraction(select);
const selectedFeatures = select.getFeatures();
// 一个通过绘制框来选择功能的DragBox交互
const dragBox = new ol.interaction.DragBox({
condition: ol.events.condition.platformModifierKeyOnly,
});
map.addInteraction(dragBox);
dragBox.on('boxend', function () {
const extent = dragBox.getGeometry().getExtent();
const boxFeatures = vectorSource
.getFeaturesInExtent(extent)
.filter((feature) => feature.getGeometry().intersectsExtent(extent));
// 与盒形几何相交的特征被添加到所选特征集合中
// 如果视图不是斜旋转的盒子几何和它的范围是相等的，所以相交的特征可以直接添加到集合
const rotation = map.getView().getRotation();
const oblique = rotation % (Math.PI / 2) !== 0;
// 当视图被倾斜旋转时，框的范围将超过它的几何形状，所以框和候选特征几何形状都围绕一个共同的锚旋转，以确认，当框几何形状与其范围对齐时，几何形状相交
if (oblique) {
const anchor = [0, 0];
const geometry = dragBox.getGeometry().clone();
geometry.rotate(-rotation, anchor);
const extent = geometry.getExtent();
boxFeatures.forEach(function (feature) {
const geometry = feature.getGeometry().clone();
geometry.rotate(-rotation, anchor);
if (geometry.intersectsExtent(extent)) {
selectedFeatures.push(feature);
}
});
} else {
selectedFeatures.extend(boxFeatures);
}
});
// 当绘制一个新的方框和在地图上单击时，清除选择
dragBox.on('boxstart', function () {
selectedFeatures.clear();
});
const infoBox = document.getElementById('info');
selectedFeatures.on(['add', 'remove'], function () {
const names = selectedFeatures.getArray().map(function (feature) {
return feature.get('ECO_NAME');
});
if (names.length > 0) {
infoBox.innerHTML = names.join(', ');
} else {
infoBox.innerHTML = 'None';
}
});
</script>
</html>
