コンソールgeojson形式で出力するにはどうすればいいですか？

Question

私はleafletFreeDrawを使用していると私はまた、次のようでthis SO question

に従うことをしようとした私は長い/緯度を取得：

freeDraw.on('markers', function (event) { 
    // Listen for any markers added, removed or edited, 
    // and then output the lat lng boundaries. 
    console.log('LatLngs:', event.latLngs, 'Polygons:', freeDraw.size()); 
}); 

と私は取得コンソール出力は次のようである：

Array[1] 
0 
: 
Array[20] 
0 
: 
L.LatLng 
lat 
: 
51.51435127755928 
lng 
: 
-0.08651733398437501 
__proto__ 
: 
Object 
1 
: 
L.LatLng 
lat 
: 
51.51349664501128 
lng 
: 
-0.08505821228027345 
__proto__ 
: 
Object 
2 
: 
L.LatLng 

次のように、各座標を追加してコンソールに出力する方法はありますか？

var states = [{ 
    "type": "LineString", 
    "coordinates": [[-100, 40], [-105, 45], [-110, 55]] 
}, { 
    "type": "LineString", 
    "coordinates": [[-105, 40], [-110, 45], [-115, 55]] 
}]; 

私もちょうどコンソールに彼正しい書式witht座標の最初のセットを印刷していると罰金になるだろうし、私は手動で/私にGeoJSONファイルにコピー＆ペーストします。

"coordinates": [[-105, 40], [-110, 45], [-115, 55]] 

Answer 1

図面から作成された座標をループし、オブジェクトとしてグローバル配列 - コンテナにプッシュできます。

var states = []; 

freeDraw.on('markers', function (event) { 

    // create coordinates object 
    var polyObj = event.latLngs[0].map(function(o){ 
     return [o.lat, o.lng]; 
    }); 
    // Push new object to states 
    states.push({ 
    "type": "LineString", 
    "coordinates":polyObj 
    }); 
}); 

var LAT_LNG = [51.505, -0.09]; 
 
var TILE_URL = 'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png'; 
 

 
var map = new L.Map(document.querySelector('section.map'), { doubleClickZoom: false }).setView(LAT_LNG, 14); 
 
L.tileLayer(TILE_URL).addTo(map); 
 
var freeDraw = new FreeDraw({ mode: FreeDraw.ALL }); 
 
map.addLayer(freeDraw); 
 

 
// All drawings container. 
 
var states = []; 
 

 
freeDraw.on('markers', function (event) { 
 
    
 
    // create coordinates object 
 
    var polyObj = event.latLngs[0].map(function(o){ 
 
     return [o.lat, o.lng]; 
 
    }); 
 
    // Push new object to states 
 
    states.push({ 
 
    "type": "LineString", 
 
    "coordinates":polyObj 
 
    }); 
 
    
 
    console.log(states);  
 
    
 
});

body { 
 
    margin:0; 
 
} 
 
.map { 
 
    width: 100%; 
 
    height: 70vh; 
 
} 
 
.as-console-wrapper { 
 
    height:30vh; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet-src.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css"> 
 
<script src="https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.web.js"></script> 
 
<section class="map"></section>