リーフレットのマーカー間の線を描く

Question

リーフレットのマーカー（JSONデータから生成される）の間に線を挿入しようとしています。私は例を見ましたが、JSONデータでは機能しません。私はマーカーを見ることができますが、線は現れません。

var style = { 
    color: 'red', 
    fillColor: "#ff7800", 
    opacity: 1.0, 
    fillOpacity: 0.8, 
    weight: 2 
}; 

$.getJSON('./server?id_dispositivo=' + id_device + '', function(data) { 
    window.geojson = L.geoJson(data, { 
    onEachFeature: function (feature, layer) { 
     var Icon = L.icon({ 
     iconUrl: './images/mymarker.png', 
     iconSize: [18, 28], // size of the icon 
     style: style, 
     }); 
     layer.setIcon(Icon); 
     layer.bindPopup(feature.properties.date + '<br />' + feature.properties.id); 
    } 
    }); 
}); 
map.addLayer(geojson); 

私のJSONデータ：

{ 
    "type": "FeatureCollection", 
    "features": [ 
    { 
     "type": "Feature", 
     "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -70.219841, 
      8.6310997 
     ] 
     }, 
     "properties": { 
     "id": 336, 
     "id_user": 1, 
     "id_device": 1, 
     "timestamp": 1446571154, 
     "date": "12:49PM 03-11-2015", 
     "Latitude": 8.6310997, 
     "Longitude": -70.219841, 
     "speedKPH": 0, 
     "heading": "", 
     "Name": "N\/D", 
     "City": "N\/D", 
     "estatus": "Stop" 
     } 
    } 
    ] 
} 

Answer 1

元のGeoJSONレイヤーまたは結果のL.GeoJsonレイヤーを反復してポリラインジオメトリを生成する方法はたくさんあります。ここでL.polylineに渡すことができる座標の配列にポイントのL.geoJson層を向けるだろう1つの単純な機能は次のとおりです。

function connectTheDots(data){ 
    var c = []; 
    for(i in data._layers) { 
     var x = data._layers[i]._latlng.lat; 
     var y = data._layers[i]._latlng.lng; 
     c.push([x, y]); 
    } 
    return c; 
} 

、ここでは、いくつかの合成にGeoJSONデータ上の仕事でそれを示すフィドルです：

http://fiddle.jshell.net/nathansnider/36twhxux/

あなたにGeoJSONデータは点のみのジオメトリが含まれていると仮定すると、あなたがそうのようなあなたの$.getJSON成功関数内window.geojsonを定義した後、あなたはそれを使用することができるはずです。

pathCoords = connectTheDots(window.geojson); 
var pathLine = L.polyline(pathCoords).addTo(map) 

GeoJSONデータがより複雑な場合は、ジオメトリタイプなどを確認するためにいくつかの条件を追加する必要がありますが、これは少なくともどのように進めるかについての一般的な考えが必要です。

Answer 2

EDIT：

ネイサンのアイデアは、あなたがポリライン（あなたのマーカー間のラインを構築する必要がありますという意味では正しいです）あなた自身。

厳密にするには、ポイントのリストが配列のままである（配列の順序が取得したい線の順番であると仮定して）データを使用する必要があります。つまり、GeoJSONデータを直接操作する必要があります。

たとえば、あなたはどうなる：

function connectDots(data) { 
    var features = data.features, 
     feature, 
     c = [], 
     i; 

    for (i = 0; i < features.length; i += 1) { 
     feature = features[i]; 
     // Make sure this feature is a point. 
     if (feature.geometry === "Point") { 
      c.push(feature.geometry.coordinates); 
     } 
    } 
    return c; 
} 

L.polyline(connectDots(data)).addTo(map); 

---

にGeoJSONデータはベクトルなどのポリライン、ポリゴン、ため、ポイント機能のマーカーにリーフレットによって変換されます。 リーフレットtutorialおよびreferenceを参照してください。

あなたはリーフレットがベクトルのスタイルを設定する方法を指定したい場合は、あなたが実際に（最初の行にあなたのstyle変数のように）path optionsを保持するオブジェクトを構成する必要がありますが、あなたはあなたのL.geoJson層のstyle optionとしてそれを与える必要があります、アイコンの中ではありません。

マーカーのリーフレットのスタイル設定方法を指定する場合は、実際にはポイントフィーチャにのみ適用される特定のアイコンを設定することができます。 pointToLayer optionをよく使うべきです。コードは実際には点にのみ適用されるので、ベクトルに適用するのではなく（例：setIconのメソッドを持たない）。

最後に、ベクターとマーカーの両方に適用されるアクションを実行する場合は、たとえばonEachFeature optionを使用してポップアップをバインドします。

だからあなたのようなもので終わるでしょう：

var myIcon = L.icon({ 
    iconUrl: './images/mymarker.png', 
    iconSize: [18, 28] 
}); 

var geojson = L.geoJson(data, { 

    style: style, // only applies to vectors. 

    // only applies to point features 
    pointToLayer: function(feature, latlng) { 
     return L.marker(latlng, {icon: myIcon}); 
    }, 

    // will be run for each feature (vectors and points) 
    onEachFeature: function(feature, layer) { 
     layer.bindPopup(feature.properties.date + '<br />' + feature.properties.id); 
    } 

}); 

としては、コメントで指摘あなたが他の人に助けを求める時はいつでも、あなたはそれらのタスクが容易になるだろう（それゆえ、あなたがより良く、より速くなるだろうサポート）あなたが問題を適切に述べる時間を取って、間違っていることの説明/スクリーンショットといくつかのきれいなコードを投稿すると。クライアントサイドコードのための非常に良い習慣は、たとえばjsFiddleに問題を再現することです。