Suite

Zoom sur la fonction de point GeoJSON dans le dépliant


Je suis relativement nouveau dans la cartographie Web et j'essaie de développer une petite application avec Angular JS et la directive angular-leaflet. Dans cette application, je vais travailler avec une couche de points GeoJSON représentant différentes stations d'une sortie sur le terrain. Ce que je veux réaliser, c'est d'avoir un bouton et de zoomer sur un point/marqueur spécifique lorsque vous cliquez dessus.

J'ai déjà vu cet exemple et j'essayais de reproduire la fonctionnalité d'une couche de points GeoJSON au lieu d'un multipolygone.

Fonctionnalité spécifique dans l'exemple de code :

$scope.centerJSON = function() { feuilletData.getMap().then(function(map) { var latlngs = []; for (var i in $scope.geojson.data.features[0].geometry.coordinates) { var coord = $scope.geojson.data.features[0].geometry.coordinates[i]; for (var j in coord) { var points = coord[j]; for (var k in points) { latlngs.push( L.GeoJSON.coordsToLatLng(points[k])); } } } map.fitBounds(latlngs); }); } ;

Maintenant mon code :

$scope.centerPoint = function () { feuilletData.getMap().then(function (map) { var lalo = []; console.log(lalo); var coord = $scope.geojson.data.features[0]. geometry.coordinates ; console.log(coord); lalo.push(L.GeoJSON.coordsToLatLng(coord)); console.log(lalo); map.setView(lalo, 18 ); }); } ;

ce qui donne l'erreur suivante dans la console firebug :

Est-ce que l'un d'entre vous sait pourquoi la méthode setView n'aime pas mon objet LatLng ? Si je remplis manuellement un objet LatLng comme ci-dessous, cela fonctionne très bien :

map.setView(nouveau L.LatLng (51.4, 7.4), 15);

Mon GeoJSON ressemble à ceci et n'a qu'un seul point à des fins de test :

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "id": 5 }, "geometry": { "type": "Point", "coordinates " : [ 7.483522475876038, 51.487886145585634 ] } } ] }

Dans votre code lalo est un tableau d'objets LatLng. Changement de ligne

lalo.push(L.GeoJSON.coordsToLatLng(coord));

à

lalo = L.GeoJSON.coordsToLatLng(coord);

, donc lalo sera un seul objet LatLng, devrait faire l'affaire.

Voir le violon sur http://jsfiddle.net/1eh1nn9y/1/ .