LineEdgeBundling Layer デモ
📊 使用データ & 機能
- LineStringとMultiLineStringのGeoJSONデータ
- D3のcurveBundleとForce-directed layoutによるエッジバンドリング
- 動的なバンドリング強度とフォース設定
- 制御点とオリジナルラインの表示/非表示切り替え
0.85
20
地図表示
実装サンプル
LineEdgeBundlingLayerの使用例
// LineEdgeBundlingLayerインスタンスを作成
const bundlingLayer = new Thematika.LineEdgeBundlingLayer({
data: lineData, //GeoJSONデータ(line, multiLine)
bundlingStrength: 0.85, // バンドリング強度(0-1)
forceStrength: 20, // フォース強度
showOriginalLines: false, // バンドリング時はfalse
showControlPoints: false, // 制御点表示
animateForce: true, // フォースアニメーション
attr: {
"stroke": '#ff6b6b',
"stroke-width": 2,
"opacity": 0.7
}
});
// レイヤーを地図に追加
map.addLayer('bundling', bundlingLayer);