Example of hit detection on a countries vector layer with country information.
The countries are loaded from a GeoJSON file. Information about countries is on hover and click is retrieved using the layer's getFeatures()
method. For vector layers, this function resolves with an array of only the topmost feature. It uses a very efficient hit detection algorithm, at the cost of accuracy. For pixel exact hit detection, when performance is not a concern, use the map's getFeaturesAtPixel()
or forEachFeatureAtPixel()
methods.
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {Fill, Stroke, Style, Text} from 'ol/style';
const style = new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.6)',
}),
stroke: new Stroke({
color: '#319FD3',
width: 1,
}),
text: new Text({
font: '12px Calibri,sans-serif',
fill: new Fill({
color: '#000',
}),
stroke: new Stroke({
color: '#fff',
width: 3,
}),
}),
});
const vectorLayer = new VectorLayer({
source: new VectorSource({
url: 'data/geojson/countries.geojson',
format: new GeoJSON(),
}),
style: function (feature) {
style.getText().setText(feature.get('name'));
return style;
},
});
const map = new Map({
layers: [vectorLayer],
target: 'map',
view: new View({
center: [0, 0],
zoom: 1,
}),
});
const highlightStyle = new Style({
stroke: new Stroke({
color: '#f00',
width: 1,
}),
fill: new Fill({
color: 'rgba(255,0,0,0.1)',
}),
text: new Text({
font: '12px Calibri,sans-serif',
fill: new Fill({
color: '#000',
}),
stroke: new Stroke({
color: '#f00',
width: 3,
}),
}),
});
const featureOverlay = new VectorLayer({
source: new VectorSource(),
map: map,
style: function (feature) {
highlightStyle.getText().setText(feature.get('name'));
return highlightStyle;
},
});
let highlight;
const displayFeatureInfo = function (pixel) {
vectorLayer.getFeatures(pixel).then(function (features) {
const feature = features.length ? features[0] : undefined;
const info = document.getElementById('info');
if (features.length) {
info.innerHTML = feature.getId() + ': ' + feature.get('name');
} else {
info.innerHTML = ' ';
}
if (feature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (feature) {
featureOverlay.getSource().addFeature(feature);
}
highlight = feature;
}
});
};
map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
const pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on('click', function (evt) {
displayFeatureInfo(evt.pixel);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vector Layer Hit Detection</title>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder,Number.isInteger"></script>
<style>
.map {
width: 100%;
height:400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script src="main.js"></script>
</body>
</html>
{
"name": "hitdetect-vector",
"dependencies": {
"ol": "6.6.1"
},
"devDependencies": {
"parcel": "^2.0.0-beta.1"
},
"scripts": {
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
}
}