Line Connection Layer デモ

🔗 LineConnectionLayer機能

  • 世界地図: examples/geojson/world.geojson(背景用)
  • 接続ライン: 動的に生成されるGeoJSONデータ(LineString/MultiLineString)
  • 機能: ライン描画タイプ切り替え(直線/アーク/スムージング)、矢印表示・サイズ調整、ライン太さ調整、投影法切り替え
  • データ例: 世界一周ルート(赤線)、貿易ルート(色分け破線)
0.3
6
4

地図表示

実装サンプル

LineConnectionLayerの使用例

// LineConnectionLayerの使用例(GeoJSON形式)

const lineDemoData = await d3.json('../geojson/line/line-demo-data.geojson');

// LineConnectionLayerインスタンスを作成
const connectionLayer = new Thematika.LineConnectionLayer({
    data: lineDemoData,  // またはmultiLineStringData
    lineType: 'arc',       // 'straight', 'arc', または 'smooth'
    smoothType: 'curveBasis', // スムージング時のカーブタイプ
    arcHeight: 0.3,        // アークの高さ(arcタイプの場合)
    startArrow: false,     // 開始点の矢印
    endArrow: true,        // 終了点の矢印
    arrowSize: 4,         // 矢印のサイズ(4-32の範囲で調整可能)
    attr: {
        "stroke": '#ff6b6b',
        "stroke-width": 4,  // ライン太さ(1-12の範囲で調整可能)
        "opacity": 0.8
    }
});



map.addLayer('connections', connectionLayer);