2017-09-06 7 views
1

geojsonデータを収集して使用しようとしています。作業領域の境界ボックスを定義する必要があります。この関数は、線とポリゴンに対して正しい結果を返します。しかし、私がポイントデータを使用するとき、それは固まってしまいます。リーフレットで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

私が正しく理解場合は、ポイントの境界を取得するために、またはそれにズームインする必要があります。これを行うには、あなたは、私は以下のいくつかの例を追加しましたリーフレット1.xxの で利用可能である機能のmap.flyTo()を使用し、それはここで

に役立ついくつかのサンプルコードでその関数への参照であることを望むことができます。

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>

関連する問題