コンテンツにスキップ

Terrain Layer

terrain レイヤーは、raster-dem の Source（GPU 上でデコードされる RGB エンコードされた標高タイル）または quantized-mesh の Source（あらかじめメッシュ化されたタイル、例：Cesium Ion）を、3D グローブの地表として描画します。描画オプションは Source のデータ形式にかかわらず同じで、取得・ジオメトリの設定はすべて Source 側にあります。

プロパティ

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

描画オプション

Section titled “描画オプション”
マテリアル設定キー説明
TerrainMaterialterrain地形メッシュの見た目（影、スカートなど）。

使用例

Section titled “使用例”

Raster DEM

Section titled “Raster DEM”
import ThreeView, { JAPAN_GSI_ELEVATION_DECODER } from "@navaramap/three";


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


const dem = view.addSource({
  type: "raster-dem",
  url: "https://cyberjapandata.gsi.go.jp/xyz/dem_png/{z}/{x}/{y}.png",
  elevationDecoder: JAPAN_GSI_ELEVATION_DECODER(),
  maxZoom: 15,
  minZoom: 5,
});


view.addLayer({
  type: "terrain",
  source: dem,
  terrain: { castShadow: true, receiveShadow: true },
});

Quantized-mesh

Section titled “Quantized-mesh”
const terrain = view.addSource({
  type: "quantized-mesh",
  url: "https://example.com/{z}/{x}/{y}.terrain",
  requestVertexNormals: true,
  requestWaterMask: true,
  maxZoom: 18,
});


view.addLayer({
  type: "terrain",
  source: terrain,
  terrain: { castShadow: true, receiveShadow: true },
});

地形への画像のドレープ

Section titled “地形への画像のドレープ”

terrain レイヤーは 3D の地表のみを提供します。その上に raster レイヤーを追加すると、そのタイルがメッシュ上にドレープされます。後から追加したレイヤーが上に描画されるため、高解像度のオーバーレイで広範囲のベースレイヤーを精細化できます。

const terrain = view.addSource({ type: "quantized-mesh", url: "https://example.com/{z}/{x}/{y}.terrain", maxZoom: 18 });
const satellite = view.addSource({ type: "raster-tile", url: "https://example.com/satellite/{z}/{x}/{y}.jpg", maxZoom: 15 });


view.addLayer({ type: "terrain", source: terrain });
view.addLayer({ type: "raster", source: satellite });

地形へのベクター地物のドレープ

Section titled “地形へのベクター地物のドレープ”

polygon / polyline マテリアルで clampToGround: true を指定した vector レイヤーも、地表に重畳されてメッシュに追従します。これは raster-dem（WebMercator）と quantized-mesh（geographic / EPSG:4326）のどちらの地形 Source でも機能するため、地形のタイリングスキームに関係なく、clamp-to-ground のベクターは地面に貼り付いたままになります。

const terrain = view.addSource({ type: "quantized-mesh", url: "https://example.com/{z}/{x}/{y}.terrain", maxZoom: 18 });
const tiles = view.addSource({ type: "vector-tile", url: "https://example.com/tiles/{z}/{x}/{y}.mvt", maxZoom: 16 });


view.addLayer({ type: "terrain", source: terrain });
view.addLayer({
  type: "vector",
  source: tiles,
  sourceLayers: ["water"],
  polygon: { color: new Color().setStyle("#00aaff"), clampToGround: true },
});

関連リソース

Section titled “関連リソース”