web-dev-qa-db-ja.com

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

リーフレットのマーカー（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);

enter image description here

私の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"
      }
    }
  ]
}
javascriptleafletgeojson
22
user4131013

元のGeoJSONまたは結果のL.GeoJsonレイヤーのいずれかを反復してポリラインジオメトリを生成することにより、これを行う方法はたくさんあります。次に、ポイントのL.geoJsonレイヤーをL.polylineに渡すことができる座標の配列に変換する単純な関数を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://jsfiddle.net/nathansnider/36twhxux/

GeoJSONデータにポイントジオメトリのみが含まれていると仮定すると、次のようにwindow.geojson成功関数内で$.getJSONを定義すると、それを使用できるようになります。

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

GeoJSONデータがより複雑な場合は、いくつかの条件を追加してジオメトリタイプなどを確認する必要があるかもしれませんが、これにより少なくとも処理方法の概要がわかるはずです。

12
nathansnider

編集：

ネイサンのアイデアは、ポリライン（マーカー間のライン）を自分で作成する必要があるという意味で正しいです。

厳密にするために、ポイントのリストがまだ配列であるときにデータを使用する必要があります（配列の順序が取得したいライン接続の順序であると想定しています）。つまり、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 を参照してください。

Leafletがvectorsをどのようにスタイルするかを指定する場合、実際には path options を保持するオブジェクトを作成する必要があります（最初の行のstyle変数のように） ）、ただし、アイコンの中ではなく、L.geoJsonレイヤーの styleオプション として指定する必要があります。

リーフレットがマーカーをどのようにスタイルするかを指定する場合、実際には特定のアイコンを設定できます。これはポイントフィーチャにのみ適用されます。コードはベクトル（たとえば、pointToLayerメソッドを持たない）に適用しようとするのではなく、実際には点にのみ適用されるため、 setIconオプション を使用することをお勧めします。

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

したがって、次のような結果になります。

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 で問題を再現することです。

5
ghybs