2017-06-22 14 views
0

私はいくつかのgeoJSONオブジェクトをデータベースから持ち込み、リーフレットを使用して地図上に表示したいと考えています。geoJSON層の各機能に永久ラベルを追加するにはどうすればいいですか?

同じスタイルのアイコン/マーカーで複数のオブジェクトが表示されているため、どちらのオブジェクトが現時点でクリックされるまではわかりません。 私は各オブジェクトをクリックすると完全な情報を持つボックスをポップアップ表示するコードを作っています。

私が本当に欲しいのは、ラベルを常に表示できるように各アイテムを表示することです。これをクリックすると詳細情報が表示されます。

.bindTooltipメソッドから固定ラベルを取得する方法がわかりますが、コードを実行すると、geoJSONファイルの最初のオブジェクトだけがラベルを取得します。

同様のことを行う人の例は見つかりません。複数のラベルを持つマップは、手動で作成したポイントから作成されます。

特定のコード・セグメントは、次のようになります。

// This shows correct geoJSON name but shows fixed label only for 1 (first) geoJSON object! 
 
function fixedLabel(layer) { 
 
    return layer.feature.properties.name 
 
}; 
 
\t 
 
function clickLabel (feature,layer) { 
 
    layer.bindPopup("ID: " + feature.properties.id + "<br>Name: " + feature.properties.name + "<br>DateTime: " + feature.properties.vdatetime + "<br>Speed: " + feature.properties.speedknots + " knots<br>CMG: " + feature.properties.cmg + "°"); 
 
}; 
 
\t 
 
var vesselsLayer = L.geoJson(vessels,{ 
 
    onEachFeature: clickLabel 
 
    }) 
 
    .addTo(map).bindTooltip(fixedLabel, {permanent: true, direction: 'right'}).openTooltip(); 
 
    map.fitBounds(vesselsLayer.getBounds());

完全なコード&にGeoJSONコードはここにgithubのである: https://github.com/DPB61/leafletjs_test01

私は完全に間違った道を進んでアム各オブジェクトにラベルを付けることについて

答えて

1

ツールチップをGeoJSONレイヤーにバインドしています。そのレイヤー内に含まれる個々のレイヤーにはリンクされません。次のように試してみてください:

L.geoJson(vessels,{ 
    onEachFeature: function (feature, layer) { 
     layer.bindPopup("ID: " + feature.properties.id + "<br>Name: " + feature.properties.name + "<br>DateTime: " + feature.properties.vdatetime + "<br>Speed: " + feature.properties.speedknots + " knots<br>CMG: " + feature.properties.cmg + "°"); 
     layer.bindTooltip(feature.properties.name, {permanent: true, direction: 'right'}).openTooltip(); 
    } 
}).addTo(map) 
関連する問題