Discussion :

[saxrub]

Bonjour
J'ai une page que affiche des mailles carrées issues de 6 KML.

Dans cette exemple de carte, pour plus de lisibilité, je n'affiche que les mailles 1x1km.

L'utilisateur peut sélectionner/désélectionner des mailles, la sélection étant matérialisée par la couleur de la maille.
S'il clique sur une maille rouge, elle devient verte, et vis versa.
J'ai trouvé l'équivalent pour mon ancien coding, mais je bloque que l'équivalent de redraw.

Chaque KML est ajouté avec

var KML3 = new ol.layer.Vector({
source: new ol.source.Vector({
url: kml_1x1km,
format: new ol.format.KML({
extractStyles: true,
showPointNames: showPointNames
})
})
});
allLayers.push(KML3);
allLayerSwitcher.push({
layer: KML3,
config: {
title: kml_1x1km_titre,
description: kml_1x1km_titre,
}
})

Le clic sur les éléments est capturé par :

var displayFeatureInfo = function (pixel) {
var currentZoom = map.getView().getZoom();
var feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
return feature;
});

if (feature) {
var f=feature;
var att = feature.getProperties();
styleUrl = att.styleUrl.split("#");
maille=att.description.split("~");
if (styleUrl[1]=="Rouge_Rouge")
{
att.styleUrl="#Jaune_Vert";
feature.style = eval(maille[3]).getStyle("#Jaune_Vert",{})
}
else
{
att.styleUrl="#Rouge_Rouge";
feature.style = eval(maille[3]).getStyleFunction("#Rouge_Rouge",{})
}
eval(maille[3]).redraw();
this.unselect(feature);
return 1;
} else {
return 0;
}
};

Avec la V2 de l'API je faisais

if (f) {

maille=f.attributes.description.split("~");

if (f.attributes.styleUrl=="#Rouge_Rouge")
{
f.attributes.styleUrl="#Jaune_Vert";
f.style = eval(maille[3]).protocol.format.getStyle("#Jaune_Vert",{})
}
else
{
f.attributes.styleUrl="#Rouge_Rouge";
f.style = eval(maille[3]).protocol.format.getStyle("#Rouge_Rouge",{})
}
eval(maille[3]).redraw();
this.unselect(f);
}

mais je ne trouve pas l’équivalent de la fonction redraw en V3.

Une idée ?

[mga_geo]

.changed() ?

http://geoadmin.github.io/ol3/apidoc/ol.layer.Base.html

[saxrub]

J'ai fais des recherches et je ne vous pas comment ça fonctionne !
J'ai essayé feature.changed, pas d'erreur mais rien de visible.

[saxrub]

En partant du postulat que dans le KML il existe des styles nommés #wnat_0, #wnat_1, #wnat_2, #wnat_3
et que les tous les placemarks sont liés à un de ces styles ;

On test le style courant de l'élément cliqué (au premier clic sur un élément, on récupère le nom du style lié au placemark dans le KML).
Fonction du suffixe du nom (on fait un split avec #),
1 - on force le nom du styleurl avec le nom du nouveau style qui par chance, aura le même nom que celui du KML.
2 - on affecte un nouveau style en y indiquant ses couleurs spécifiques qui par chance, aura les mêmes couleur que le style correspondant dans le KML.

et hop !

Dans l'exemple ci-dessous, on passera du noir au vert, du vert à l'orange, de l'orange au rouge et du rouge au noir.

var displayFeatureInfo = function (pixel) {
var currentZoom = map.getView().getZoom();
var feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
return feature;
});

if (feature) {
var f=feature;
var myStyle=feature.getStyleFunction();
var att = feature.getProperties();
styleUrl = att.styleUrl.split("#");
styleUrlFull = att.styleUrl;
maille=att.description.split("~");


switch (styleUrl[1])
{
case "wnat_3":
feature.set('styleUrl', "#wnat_0");
feature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({color: 'rgba(255,255,255,1)'}),
fill: new ol.style.Fill({color: 'rgba(0,0,0,1)'})
}));

break;
case "wnat_2":
feature.set('styleUrl', "#wnat_3");
feature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({color: 'rgba(255,255,255,1)'}),
fill: new ol.style.Fill({color: 'rgba(255,0,0,1)'})
}));
break;
case "wnat_1":
feature.set('styleUrl', "#wnat_2");
feature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({color: 'rgba(255,255,255,1)'}),
fill: new ol.style.Fill({color: 'rgba(255,127,0,1)'})
}));
break;
default:
feature.set('styleUrl', "#wnat_1");
feature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({color: 'rgba(255,255,255,1)'}),
fill: new ol.style.Fill({color: 'rgba(0,255,0,1)'})
}));

break;
}


return 1;
} else {
return 0;
}
};