コンテンツにスキップ

Raster Layer

raster レイヤーは、raster-tile の Source を画像として、または raster-dem の Source を陰影起伏や標高ヒートマップとして描画します。terrain レイヤーが存在する場合、画像は 3D の地表にドレープ（投影）されます。存在しない場合は平坦なグローブ上に描画されます。

プロパティ

Section titled “プロパティ”
プロパティ型説明
type"raster"レイヤータイプ（必須）。
sourceSource | stringraster-tile または raster-dem の Source（必須）。

描画オプション

Section titled “描画オプション”
マテリアル設定キー説明
RasterMaterialraster画像の見た目（色、不透明度など）。
HillshadeMaterialhillshaderaster-dem の Source から生成する陰影起伏。
ElevationHeatmapMaterialelevationHeatmapraster-dem の Source から生成する色分けされた標高。

使用例

Section titled “使用例”

画像

Section titled “画像”
import ThreeView from "@navaramap/three";


const view = new ThreeView(/* options */);
await view.init();


const imagery = view.addSource({
  type: "raster-tile",
  url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
  maxZoom: 19,
});


view.addLayer({ type: "raster", source: imagery, raster: { opacity: 1 } });

陰影起伏

Section titled “陰影起伏”

raster-dem の Source を参照します。デコーダは Source 側にあります。

import ThreeView, { TERRARIUM_ELEVATION_DECODER } from "@navaramap/three";


const dem = view.addSource({
  type: "raster-dem",
  url: "https://example.com/terrarium/{z}/{x}/{y}.png",
  elevationDecoder: TERRARIUM_ELEVATION_DECODER(),
  maxZoom: 17,
  minZoom: 5,
});


view.addLayer({
  type: "raster",
  source: dem,
  hillshade: { exaggeration: 0.5 },
});

標高ヒートマップ

Section titled “標高ヒートマップ”
view.addLayer({
  type: "raster",
  source: dem,
  elevationHeatmap: {
    maxHeight: 3000,
    minHeight: 0,
    logarithmic: true,
    logBoundary: 1000,
  },
});

関連リソース

Section titled “関連リソース”