Convert hit detect priority example to test

This commit is contained in:
Maximilian Krög
2021-07-17 15:09:38 +02:00
parent e8047f6d08
commit 19fb51183e
3 changed files with 53 additions and 93 deletions

View File

@@ -1,9 +0,0 @@
---
layout: example.html
title: Hit tolerance priority
shortdesc: Shows bad behavior of hit detection with hit tolerance.
docs: >
Hover over the map and observe how the small circles get a black outline as you hover over them. Is the expected feature getting highlighted?
tags: "simple, openstreetmap"
---
<div id="map" class="map"></div>

View File

@@ -1,84 +0,0 @@
import CircleStyle from '../src/ol/style/Circle.js';
import Feature from '../src/ol/Feature.js';
import Map from '../src/ol/Map.js';
import VectorLayer from '../src/ol/layer/Vector.js';
import VectorSource from '../src/ol/source/Vector.js';
import View from '../src/ol/View.js';
import {Fill, Stroke, Style} from '../src/ol/style.js';
import {Point} from '../src/ol/geom.js';
const map = new Map({
target: 'map',
view: new View({
center: [0, 0],
resolution: 1,
resolutions: [1],
}),
});
const vectorLayer = new VectorLayer({
source: new VectorSource({
features: [
new Feature({
geometry: new Point([0, 0]),
color: 'white',
}),
new Feature({
geometry: new Point([-10, 0]),
color: 'fuchsia',
}),
new Feature({
geometry: new Point([-10, -10]),
color: 'orange',
}),
new Feature({
geometry: new Point([-10, 10]),
color: 'cyan',
}),
],
}),
style: (feature) => {
return new Style({
image: new CircleStyle({
radius: 5,
fill: new Fill({
color: feature.get('color'),
}),
stroke: new Stroke({
color: 'gray',
width: 1,
}),
}),
});
},
});
map.addLayer(vectorLayer);
const highlightFeature = new Feature(new Point([NaN, NaN]));
highlightFeature.setStyle(
new Style({
image: new CircleStyle({
radius: 5,
stroke: new Stroke({
color: 'black',
width: 2,
}),
}),
})
);
vectorLayer.getSource().addFeature(highlightFeature);
map.on('pointermove', (e) => {
const hit = map.forEachFeatureAtPixel(
e.pixel,
(feature) => {
highlightFeature.setGeometry(feature.getGeometry().clone());
return true;
},
{
hitTolerance: 10,
}
);
if (!hit) {
highlightFeature.setGeometry(new Point([NaN, NaN]));
}
});