2017-09-06 46 views
1

我正在尝试收集geojson数据并使用它。我需要为我的工作区域定义一个边界框。此功能可为线和多边形提供正确的结果。但是当我使用点数据时,它会卡住。在Leaflet中获取GeoJSON数据?

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); 
 
}

+0

什么卡?什么是错误? –

回答

0

如果我理解正确的话,你需要拿分的界限或放大就可以了。要做到这一点,你可以使用函数map.flyTo(),它是在单张1.XX 可我加了下面的一些例子,希望它有助于

下面是引用该函数的一些示例代码:

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>

相关问题