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);