GeoJSON Layer デモ

📊 使用データ & 機能

  • GeoJSONフォーマットの世界地図データ
  • 複数の投影法による動的な地図変換
  • レイヤーベースのデータ可視化システム
  • リアルタイムプロジェクション切り替え

地図表示

実装サンプル

GeojsonLayerの使用例

// GeojsonLayerの使用例
const geojson = await d3.json("../geojson/world.geojson");

// GeojsonLayerインスタンスを作成
const worldLayer = new Thematika.GeojsonLayer({
    data: geojson,                
    attr: { 
        "fill": (d, i) => {
            const colors = ['#440154', '#1f9d8a']; 
            return colors[i % colors.length];
        },
        "filter": shadowFilter.url(), 
        "stroke": '#1e293b',
        "stroke-width": 0.3,
        "opacity": 0.85,
    }
});

// レイヤーインスタンスを地図に追加
map.addLayer('world', worldLayer);