Více

Přiblížit na letáku funkci bodu GeoJSON

Přiblížit na letáku funkci bodu GeoJSON


Jsem v oblasti webového mapování relativně nový a pokouším se vyvinout malou aplikaci s Angular JS a směrnicí o úhlovém letáku. V této aplikaci budu pracovat s GeoJSON bodovou vrstvou představující různé stanice terénního výletu. To, co chci dosáhnout, je mít tlačítko a přiblížit konkrétní bod / značku, když na ni kliknete.

Tento příklad jsem již viděl a pokoušel se reprodukovat funkčnost pro bodovou vrstvu GeoJSON namísto multipolygonu.

Specifické funkce v ukázkovém kódu:

$ scope.centerJSON = function () {leafletData.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);}); };

Nyní můj kód:

$ scope.centerPoint = function () {leafletData.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);}); };

což dává následující chybu v konzole firebug:

Ví někdo z vás, proč se metodě setView nelíbí můj objekt LatLng? Pokud ručně vyplním objekt LatLng, jako je níže, funguje to dobře:

map.setView (nový L.LatLng (51,4; 7,4), 15);

My GeoJSON vypadá takto a má v sobě pouze jeden bod pro účely testování:

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

Ve vašem kódu lalo je řada LatLng objektů. Změna řádku

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

na

lalo = L.GeoJSON.coordsToLatLng (coord);

, takže lalo bude jediný LatLng objekt, měl by dělat trik.

Podívejte se na housle na adrese http://jsfiddle.net/1eh1nn9y/1/.


Podívejte se na video: Adding GeoJSON data to a Leaflet map