本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。
源码 见 1057.html ，对应的 官网示例
https://openlayers.org/en/latest/examples/select-features.html
https://openlayers.org/en/latest/examples/select-hover-features.html?q=Select
https://openlayers.org/en/latest/examples/select-multiple-features.html?q=Select
https://openlayers.org/en/latest/examples/vector-tile-selection.html?q=Select
image.png
要素的多种选择方式
condition: ol.events.condition.click
condition: ol.events.condition.pointerMove
condition: function(mapBrowserEvent) {……})
<!DOCTYPE html>
<html>
<head>
<title>要素的多种选择方式</title>
<link rel="stylesheet" href="../include/ol.css" type="text/css" />
<script src="../include/ol.js"></script>
</head>
<style>
html,
body,
.map {
margin: 0;
padding: 0;
width: 100%;
height: 90%;
}
</style>
<body>
<div id="map" class="map"></div>
<form class="form-inline">
<label>动作类型 </label>
<select id="type" class="form-control">
<option value="click" selected>点击</option>
<option value="singleclick">单击</option>
<option value="pointermove">悬浮</option>
<option value="altclick">Alt+点击</option>
<option value="none">无</option>
</select>
<span id="status"> 0 个已选择要素</span>
</form>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: '../data/lands.geojson',
format: new ol.format.GeoJSON()
})
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var select = null;
var selectSingleClick = new ol.interaction.Select();
var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click
});
var selectPointerMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
var selectAltClick = new ol.interaction.Select({
condition: function (mapBrowserEvent) {
return ol.events.condition.click(mapBrowserEvent) && ol.events.condition.altKeyOnly(mapBrowserEvent);
}
});
var selectElement = document.getElementById('type');
//实现切换动作
var changeInteraction = function () {
if (select !== null) {
map.removeInteraction(select);
}
var value = selectElement.value;
if (value == 'singleclick') {
select = selectSingleClick;
} else if (value == 'click') {
select = selectClick;
} else if (value == 'pointermove') {
select = selectPointerMove;
} else if (value == 'altclick') {
select = selectAltClick;
} else {
select = null;
}
if (select !== null) {
map.addInteraction(select);
select.on('select', function (e) {
document.getElementById('status').innerHTML = ' ' +
e.target.getFeatures().getLength() +
' 个已选择的要素 (上次操作选择了 ' + e.selected.length +
' 个并且已取消选择 ' + e.deselected.length + ' 个要素)';
});
}
};
selectElement.onchange = changeInteraction;
changeInteraction();
</script>
</body>
</html>
