COG (Cloud Optimized GeoTIFF) Layer デモ

🗺 COGレイヤー機能

  • データ: サンプルCOGファイル(URL指定)
  • レイヤー: ImageLayer(COG画像)、GraticuleLayer(経緯線)
  • 機能: COG読み込み、サイズ制限、リサンプリング

地図表示

実装サンプル

readCOGの使用例

// COG読み込みとImageLayerの使用例

// COGファイルを読み込み(南アメリカのAOI指定)
const cogResult = await Thematika.readCOG(
    'https://storage.googleapis.com/g3-open-resource/d3-thematika/cog/NE1_HR_SR_OB_DRv6_COG.tif',
    {
        image: 0,  // 画像インデックス(0=最高解像度)
        bbox: [-82, -56, -34, 13],  // [west, south, east, north]
        sizeLimit: {
            maxWidth: 512,
            maxHeight: 512,
            onExceed: 'resample'
        },
        resampleMethod: 'bilinear'
    }
);

console.log('読み込み結果:', {
    width: cogResult.width,
    height: cogResult.height,
    originalWidth: cogResult.originalWidth,
    originalHeight: cogResult.originalHeight,
    wasResampled: cogResult.wasResampled,
    bounds: cogResult.bounds
});

// 地図を作成
const map = new Thematika.Map({
    container: '#map',
    width: 800,
    height: 600,
    projection: d3.geoMercator()
});

// ImageLayerでCOGを表示
const imageLayer = new Thematika.ImageLayer('cog-image', {
    src: cogResult.dataUri,
    bounds: cogResult.bounds,
    attr: {
        opacity: 0.8
    }
});

// GraticuleLayerを追加
const graticuleLayer = new Thematika.GraticuleLayer({
    step: [10, 10],
    attr: {
        stroke: '#000',
        'stroke-width': 0.5,
        'stroke-dasharray': '2,2',
        opacity: 0.5
    }
});

// レイヤーを地図に追加
map.addLayer('graticule', graticuleLayer);
map.addLayer('cog', imageLayer);