GeoJSON-Daten in Leaflet erhalten?

Ich versuche Geojson Daten zu sammeln und zu verwenden. Ich muss eine Begrenzungsbox für meinen Arbeitsbereich definieren. Diese Funktion liefert korrekte Ergebnisse für Linie und Polygon. Aber wenn ich Punktdaten verwende, bleibt es hängen.GeoJSON-Daten in Leaflet erhalten?

L.Control.fileLayerLoad({ 
 
    fitBounds: true, 
 
    layerOptions: { 
 
     style: style, 
 
     pointToLayer:function (data, latlng) {debugger; 
 
      return L.circleMarker(
 
      latlng, 
 
      { style: style } 
 
      ); 
 
     }, 
 
     onEachFeature: function (feature, layer) { 
 
      console.log("FEATURE",feature,"LAYER",layer); 
 
      geojsonLayer = layer // 
 
     } 
 
    } 
 

 
}).addTo(map);

function geojsonLayerBounds(map, geojson){ 
 
\t var rectangle = new L.Rectangle(geojson.getBounds()); 
 
\t map.addLayer(rectangle); 
 
}

Quelle

2017-09-06 Hatice Atalay

was hängen bleibt? Was ist der Fehler? –

Wenn ich das richtig verstanden müssen Sie Grenzen von Punkten oder zoomen Sie es zu bekommen. Um dies zu tun, können Sie Funktion map.flyTo() verwenden, die im Merkblatt zur Verfügung 1.xx ich einig Beispiel unten hinzugefügt, hoffen, es hilft

Hier Verweis auf diese Funktion mit einigem Beispiel-Code:

flyTo(<LatLng> latlng, <Number> zoom?, <Zoom/pan options> options?) 
flyTo([46.163613, 46.163613], 12)

http://leafletjs.com/reference-1.2.0.html#map-flyto

var map = L.map('map').setView([46.163613, 15.750947], 14); 
 
mapLink = 
 
    '<a href="http://openstreetmap.org">OpenStreetMap</a>'; 
 
L.tileLayer(
 
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
     attribution: '&copy; ' + mapLink + ' Contributors', 
 
     maxZoom: 18, 
 
    }).addTo(map); 
 

 

 
var work = { 
 
    lat: 46.165932, 
 
    lng: 15.865914, 
 
    zoom: 17 
 
}; 
 

 
L.easyButton('fa-globe', function(btn, map) { 
 
    map.flyTo([work.lat, work.lng], work.zoom); 
 
}, 'Fly to work').addTo(map); 
 

 
var home = { 
 
    lat: 46.163613, 
 
    lng: 15.750947, 
 
    zoom: 13 
 
}; 
 

 
L.easyButton('fa-home', function(btn, map) { 
 
    map.flyTo([home.lat, home.lng], home.zoom); 
 
}, 'Please come home').addTo(map)

#map { 
 
    width: 600px; 
 
    height: 400px; 
 
}

<html> 
 

 
<head> 
 

 
    <title>Custom Icons Tutorial - Leaflet</title> 
 

 
    <meta charset="utf-8" /> 
 
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 
 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
 
    <link href="https://unpkg.com/[email protected]/src/easy-button.css" rel="stylesheet"> 
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
    <script src="https://unpkg.com/[email protected]/src/easy-button.js"> </script> 
 
       
 
</head> 
 

 
<body> 
 

 
    <div id='map'></div> 
 

 
</body> 
 

 
</html>

Quelle

2017-09-07 06:09:29 Svinjica

GeoJSON-Daten in Leaflet erhalten?

Antwort

Verwandte Themen