Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
Pages: 1
- Sujet précédent - Conseils création d'une fonction de géocodage avec Openlayers - Sujet suivant
#1 Thu 29 September 2022 17:31
- MxPolisky
- Juste Inscrit !
- Date d'inscription: 23 Sep 2022
- Messages: 4
Conseils création d'une fonction de géocodage avec Openlayers
Bonjour,
Je sollicite votre à l'aide dans le cadre d'un développement d'une fonction de géocodage me permettant d'afficher sur mon outil webmapping, une adresse tapée dans une barre de recherche. J'utilise pour cela une API Google.
Le code fonctionne très bien mais je me retrouve face à une problématique.
Ce que fait le code, c'est qu'il m'affiche un point sur la carte après chaque adresse tapée dans la barre de recherche. Cependant, ce point ne disparait pas lorsque je lance une nouvelle recherche. Ainsi, l'adresse recherché précédemment (symbolisée par un point sur la carte) reste affiché au même titre que la nouvelle recherche d'adresse tapée.
J'aimerais qu'au début de ma fonction (ci-dessous), je puisse retirer tous les points précédemment crées. J'ai déjà essayé d'inclure un refresh de la page en début de fonction mais ça ne donne pas le résultat attendu. Je manque cruellement de "vocabulaire" javascript pour cela...
J'espère avoir été assez clair dans mes propos.
Je vous remercie par avance pour votre temps.
Cordialement,
Code:
function geocodage() {
var adresse = $("#adresse").val();
var urlAdresse = 'https://maps.googleapis.com/maps/api/geocode/json?address='+adresse+'&key=AIzaSyDT02-Hf3e3IQWxXU9x-N6bk_xQwhcvsIw';
$.getJSON(urlAdresse, function(json){
const styleVecteur = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: '#3399CC'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
const sourceVecteur = new ol.source.Vector({});
const vecteur = new ol.layer.Vector({
source: sourceVecteur,
style: styleVecteur
});
map.addLayer(vecteur);
const status = json.status;
if(status=="OK"){
let lngAdresse = json.results[0].geometry.location.lng;
let latAdresse = json.results[0].geometry.location.lat;
var coord = [lngAdresse,latAdresse];
var newcoord = ol.proj.transform(coord, 'EPSG:4326','EPSG:3857');
var locFeature = new ol.Feature({
geometry: new ol.geom.Point(newcoord),
});
sourceVecteur.addFeature(locFeature);
map.getView().setCenter(newcoord);
map.getView().setZoom(15);
}else{
alert('erreur : ' +status);
}
});
}Hors ligne
#2 Mon 10 October 2022 17:21
- mickael_53
- Participant occasionnel
- Date d'inscription: 7 Dec 2018
- Messages: 11
Re: Conseils création d'une fonction de géocodage avec Openlayers
Salut,
Je suis pas un expert mais je peux peut être t'aider car j'ai rencontré le même problème.
Avant d'ajouter ton nouveau point, il faut en fait que tu vides ta couche "vecteur" car le premier est toujours là.
Code:
var features = vecteur.getSource().getFeatures();
features.forEach((features)=>{vecteur.getSource().removeFeature(features);})Hors ligne
#3 Wed 12 October 2022 13:42
- MxPolisky
- Juste Inscrit !
- Date d'inscription: 23 Sep 2022
- Messages: 4
Re: Conseils création d'une fonction de géocodage avec Openlayers
Bonjour,
Tout d'abord merci pour ta réponse. En plaçant ton code avant la commande d'affichage de la couche vecteur (comme ci-dessous dans le code), cela ne fonctionne toujours pas.
Je ne sais pas comment, dans ma fonction geocodage, je peux intégrer cette partie "remise à zéro" de la couche vecteur. Si je mets plus haut ton code la variable "vecteur" n'est pas déclaré et cela pose problème aussi. Je vais plusieurs autres test de placements de ton code sans succès. Néanmoins celui si fonctionne parfaitement seul si je puis dire mais dans le contexte de mon code pas du tout. Si jamais tu as des pistes supplémentaires je suis preneur.
Je te remercie beaucoup pour ta réponse encore une fois et je vais recreuser cette question de mon côté.
Cordialement,
Code:
function geocodage() {
var adresse = $("#adresse").val();
var urlAdresse = 'https://maps.googleapis.com/maps/api/geocode/json?address='+adresse+'&key=key';
$.getJSON(urlAdresse, function(json){
const styleVecteur = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: '#3399CC'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
const sourceVecteur = new ol.source.Vector({});
const vecteur = new ol.layer.Vector({
source: sourceVecteur,
style: styleVecteur
});
var features = vecteur.getSource().getFeatures();
features.forEach((features)=>{vecteur.getSource().removeFeature(features);})
map.addLayer(vecteur);
const status = json.status;
if(status=="OK"){
if (adresse!=adresse){
source.clear();
}
let lngAdresse = json.results[0].geometry.location.lng;
let latAdresse = json.results[0].geometry.location.lat;
var coord = [lngAdresse,latAdresse];
var newcoord = ol.proj.transform(coord, 'EPSG:4326','EPSG:3857');
var locFeature = new ol.Feature({
geometry: new ol.geom.Point(newcoord),
});
sourceVecteur.addFeature(locFeature);
map.getView().setCenter(newcoord);
map.getView().setZoom(19);
//... (cf. $2.2)
}else{
alert('erreur : ' +status);
}
});
}Hors ligne
Pages: 1
- Sujet précédent - Conseils création d'une fonction de géocodage avec Openlayers - Sujet suivant
