OpenLayers - clic sur la carte
Bonjour,
J'ai une carte Openlayers, quand je clique dessus, je récupère dans un tableau les id des features sur lesquelles j'ai cliqué :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| var selectedFeatures = [];
useEffect(() => {
const osmLayer = new TileLayer({
preload: Infinity,
source: new OSM(),
isBaseLayer: true,
name: "OSM"
});
const map = new Map({
controls: [],
target: "map",
layers: [osmLayer],
view: new View({
center: [-267166, 5630000],
zoom: 8,
}),
});
map.on('singleclick', function (e) {
map.forEachFeatureAtPixel(e.pixel, function (feature) {
const selIndex2 = selectedFeatures.indexOf(feature.getProperties().id);
console.log(selIndex2);
if (selIndex2 < 0) {
selectedFeatures.push(feature.getProperties().id)
feature.setStyle(selectedStyle);
}
else {
selectedFeatures.splice(selIndex2, 1);
feature.setStyle(styleFunction);
}
console.log(selectedFeatures)
});
});
return () => map.setTarget(null);
}, []); |
Le problème, c'est que quand je clique sur une feature, il passe 2 fois dans l'instruction map.forEachFeatureAtPixel(e.pixel, function (feature) {
La première fois, il trouve que le tableau selectedFeatures ne contient pas l'id de mon feature, donc il l'ajoute au tableau
La deuxième fois, il trouve l'id de ma feature dans le tableau donc il la supprime.
Au final, je me retrouve toujours avec un tableau vide !
Qu'est ce qui cloche?
Merci,
Nico
