Suite

Obtenez la fonctionnalité GeoJson par ID et zoomez sur l'entité


J'ai une carte dépliante avec des couches Geojson :

J'utilise jquery Autocomplete pour rechercher une entité par nom ou identifiant, cela ne me pose aucun problème. J'ai besoin de votre aide car je n'arrive pas à me référer à un point précis de ma couche (sans un clic sur la carte). Idéalement, je zoomerais dessus et ouvrirais une fenêtre contextuelle.

Voici mon code pour charger les marqueurs Geojson :

var markers = L.markerClusterGroup({showCoverageOnHover: false,disableClusterAtZoom: 9}); var points_rand = L.geoJson(points, { onEachFeature: function (feature, layer) //fonctionnalité en cliquant sur feature { //TABLEAU POUR AUTOCOMPLETE musees_names_array.push(feature.properties.nom_musee, feature.properties.id); // ARRAY KEY VALUE musees_key_value[feature.properties.nom_musee] = feature.properties.id; { var title_ = "

"+feature.properties.nom_musee+"

"; var subtitle = ""; var ouverture = ""; if(feature.properties.site_web != null ){ subtitle +="Site Web : " +""+feature.properties.site_web+"
"; } if(feature.properties.periode_ouverture != null ){ subtitle +="Horaires : " +" "+feature.properties.periode_ouverture+"
"; } } layer.bindPopup( title_ + sous-titre + ouverture ) layer.setIcon(IconPerso); } });

Après une recherche avec Autocomplete j'ai une fonction avec l'id sélectionné mais je ne sais pas comment zoomer sur un marqueur spécifique :

$(function() { $("#search_musee").autocomplete( { source:musees_names_array, minLength: 3, select: function( event, ui ) { var id_musee = musees_key_value[ui.item.value];// ID sélectionné //VOICI MON PROBLÈME //Je voudrais quelque chose comme : // map.fitBounds(SPECIFIC_MARKER.getBounds()); } })

});

J'ai fait quelques recherches comme le dépliant d'événement déclencheur mais sans succès


Faites un hachage à l'intérieur duonEachFeatureune fonction:

musees_layers[feature.properties.nom_musee] = musees_layers[feature.properties.id] = couche ;

Ensuite, utilisez-le simplement dans la saisie semi-automatiquesélectionnerun événement:

select: function( event, ui ) { var layer = musees_layers[ui.item.value]; //pour les marqueurs map.setView(layer.getLatLng(), DEFAULT_ZOOM); //pour les polygones/polylignes //map.fitBounds(layer.getBounds()); }


Voir la vidéo: Maps Made Easier: GeoJSON in the Maps API (Octobre 2021).