arcgis-scene-environment

ArcGIS シーン環境

このスキルは、SceneView の環境（ライティング、天候、影、大気、背景、地下ナビゲーション、高度設定）の構成に使用します。

インポートパターン

ESM（npm）

import Environment from "@arcgis/core/views/3d/environment/Environment.js";
import SunLighting from "@arcgis/core/views/3d/environment/SunLighting.js";
import VirtualLighting from "@arcgis/core/views/3d/environment/VirtualLighting.js";
import SunnyWeather from "@arcgis/core/views/3d/environment/SunnyWeather.js";
import CloudyWeather from "@arcgis/core/views/3d/environment/CloudyWeather.js";
import RainyWeather from "@arcgis/core/views/3d/environment/RainyWeather.js";
import FoggyWeather from "@arcgis/core/views/3d/environment/FoggyWeather.js";
import SnowyWeather from "@arcgis/core/views/3d/environment/SnowyWeather.js";
import ShadowCastAnalysis from "@arcgis/core/analysis/ShadowCastAnalysis.js";

CDN（動的インポート）

const SunLighting = await $arcgis.import(
  "@arcgis/core/views/3d/environment/SunLighting.js",
);
const RainyWeather = await $arcgis.import(
  "@arcgis/core/views/3d/environment/RainyWeather.js",
);
const ShadowCastAnalysis = await $arcgis.import(
  "@arcgis/core/analysis/ShadowCastAnalysis.js",
);

環境設定

基本的な環境設定

const view = new SceneView({
  container: "viewDiv",
  map: scene,
  environment: {
    lighting: {
      date: new Date("Sun Mar 15 2019 16:00:00 GMT+0100"),
    },
    atmosphereEnabled: true,
    starsEnabled: true,
  },
});

マップコンポーネントの環境

<arcgis-scene item-id="YOUR_WEBSCENE_ID">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
</arcgis-scene>

<script type="module">
  const viewElement = document.querySelector("arcgis-scene");
  await viewElement.viewOnReady();

  viewElement.environment = {
    lighting: {
      date: new Date(),
    },
    atmosphereEnabled: true,
    starsEnabled: true,
  };
</script>

環境プロパティ

プロパティ	型	説明
lighting	SunLighting | VirtualLighting	ライティング設定
weather	SunnyWeather | CloudyWeather | RainyWeather | FoggyWeather | SnowyWeather	天候効果
weatherAvailable	boolean（読み取り専用）	天候効果がサポートされているかどうか
atmosphereEnabled	boolean	大気のかすみを表示する
starsEnabled	boolean	夜間に星を表示する
background	ColorBackground | null	シーンの背景色／透明度

ライティング

太陽光ライティング

日時と地理的位置から計算された太陽の位置に基づく、リアルなライティングです。

view.environment = {
  lighting: {
    date: new Date("2024-06-21T14:00:00"),
    directShadowsEnabled: true,
  },
};

// Update sun position dynamically
view.environment.lighting.date = new Date("2024-06-21T18:00:00");

仮想ライティング

太陽の位置を計算せずに、一定方向から照らすライティングです。

view.environment = {
  lighting: {
    type: "virtual",
  },
};

影

直接影を有効にする

view.environment = {
  lighting: {
    directShadowsEnabled: true,
    date: new Date("Sun Mar 15 2019 16:00:00 GMT+0100"),
  },
};

シンボルの影を切り替える

const clone = layer.renderer.clone();
clone.symbol.symbolLayers.getItemAt(0).castShadows = true;
layer.renderer = clone;

影の投影分析

const shadowAnalysis = new ShadowCastAnalysis({
  startTime: new Date("2024-03-21T09:00:00"),
  endTime: new Date("2024-03-21T17:00:00"),
});

view.analyses.add(shadowAnalysis);

天候

天候の種類

// Sunny
view.environment.weather = {
  type: "sunny",
  cloudCover: 0.2,
};

// Cloudy
view.environment.weather = {
  type: "cloudy",
  cloudCover: 0.8,
};

// Rainy
view.environment.weather = {
  type: "rainy",
  cloudCover: 0.8,
  precipitation: 0.3,
};

// Foggy
view.environment.weather = {
  type: "foggy",
  visibility: 1000,
};

// Snowy
view.environment.weather = {
  type: "snowy",
  cloudCover: 0.9,
};

天候プロパティ

天候の種類	主なプロパティ
sunny	cloudCover（0～1）、visibility（メートル）
cloudy	cloudCover（0～1）
rainy	cloudCover（0～1）、precipitation（0～1）
foggy	visibility（メートル）
snowy	cloudCover（0～1）

天候と日照コンポーネント

日照コンポーネント

<arcgis-scene item-id="YOUR_WEBSCENE_ID">
  <arcgis-daylight slot="top-right"></arcgis-daylight>
</arcgis-scene>

属性	型	説明
date-or-season	"date" | "season"	カレンダーまたは季節のセレクター
play-speed-multiplier	number	アニメーション速度の倍率
hide-timezone	boolean	タイムゾーン表示を非表示にする

イベント：

• arcgis-daylight-change — 日時が変更されました
• arcgis-season-change — 季節が変更されました

天候コンポーネント

<arcgis-scene item-id="YOUR_WEBSCENE_ID">
  <arcgis-weather slot="top-right"></arcgis-weather>
</arcgis-scene>

影の投影コンポーネント

<arcgis-scene item-id="YOUR_WEBSCENE_ID">
  <arcgis-shadow-cast slot="top-right"></arcgis-shadow-cast>
</arcgis-scene>

透明な背景

透明な背景を設定する

const view = new SceneView({
  container: "viewDiv",
  map: scene,
  alphaCompositingEnabled: true,
  environment: {
    background: {
      type: "color",
      color: [255, 252, 244, 0],
    },
    starsEnabled: false,
    atmosphereEnabled: false,
  },
});

背景の透明度を切り替える

const backgroundColor = view.environment.background.color.clone();
backgroundColor.a = 0;
view.environment.background.color = backgroundColor;

地下ナビゲーション

地下ナビゲーションを有効にする（マップコンポーネント）

<arcgis-scene item-id="YOUR_WEBSCENE_ID">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
</arcgis-scene>

<script type="module">
  const viewElement = document.querySelector("arcgis-scene");
  await viewElement.viewOnReady();

  viewElement.map.ground.navigationConstraint = { type: "none" };
  viewElement.map.ground.opacity = 0.4;
  viewElement.map.ground.surfaceColor = "#fff";
</script>

地下ナビゲーション（コア API）

const view = new SceneView({
  container: "viewDiv",
  map: scene,
});

view.when(() => {
  view.map.ground.navigationConstraint = { type: "none" };
  view.map.ground.opacity = 0.4;
});

// Navigate underground
view.goTo({
  position: {
    x: -122.4,
    y: 37.8,
    z: -500,
    spatialReference: { wkid: 4326 },
  },
  tilt: 80,
});

地表の設定

// World elevation
map.ground = "world-elevation";

// Custom elevation layer
import ElevationLayer from "@arcgis/core/layers/ElevationLayer.js";

map.ground = {
  layers: [
    new ElevationLayer({
      url: "https://elevation.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
    }),
  ],
};

// Underground navigation + semi-transparent ground
map.ground.navigationConstraint = { type: "none" };
map.ground.opacity = 0.5;

ローカルシーンモード

ローカルシーンを作成する

<arcgis-scene basemap="topo-vector" viewing-mode="local">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
</arcgis-scene>

クリッピング領域を含むローカルシーン

const viewElement = document.querySelector("arcgis-scene");
await viewElement.viewOnReady();

const clippingExtent = {
  xmax: -10834217,
  xmin: -10932882,
  ymax: 4493918,
  ymin: 4432667,
  spatialReference: { wkid: 3857 },
};

viewElement.clippingArea = clippingExtent;
viewElement.extent = clippingExtent;

viewElement.environment = {
  atmosphereEnabled: false,
  starsEnabled: false,
};

高度モード

layer.elevationInfo = {
  mode: "on-the-ground", // Draped on ground
  // mode: "relative-to-ground"  // Offset from ground
  // mode: "relative-to-scene"   // Offset from scene
  // mode: "absolute-height"     // Absolute Z values
};

// With offset
layer.elevationInfo = {
  mode: "relative-to-ground",
  offset: 100,
  unit: "meters",
};

// With Arcade expression
layer.elevationInfo = {
  mode: "relative-to-ground",
  featureExpressionInfo: {
    expression: "Geometry($feature).z * 10",
  },
  unit: "meters",
};

シーンの品質

view.qualityProfile = "high"; // "low", "medium", "high"

スクリーンショットの取得

// Full view screenshot
const screenshot = await view.takeScreenshot({ format: "png" });

const img = document.createElement("img");
img.src = screenshot.dataUrl;
document.body.appendChild(img);

// Specific area
const screenshot = await view.takeScreenshot({
  area: { x: 100, y: 100, width: 500, height: 400 },
  format: "png",
});

// Download
function downloadImage(filename, dataUrl) {
  const element = document.createElement("a");
  element.href = dataUrl;
  element.download = filename;
  element.click();
}

downloadImage("scene-screenshot.png", screenshot.dataUrl);

ビューの制約

const view = new SceneView({
  container: "viewDiv",
  map: scene,
  constraints: {
    altitude: {
      min: 20000000,
      max: 25000000,
    },
  },
});

よくある落とし穴

1. アルファ合成：背景を透過するには、SceneView で alphaCompositingEnabled: true を設定する必要があります。

2. ローカルシーン：クリッピング領域を設定する必要があり、通常は大気や星を無効にします。

3. 地下でのナビゲーション：ground.navigationConstraint.type = "none" を設定する必要があります。

4. シャドウのパフォーマンス：directShadowsEnabled は、レンダリングのパフォーマンスに大きな影響を与える場合があります。

5. 標高モード："on-the-ground" は offset と featureExpressionInfo を無視します。

6. 天候は SceneView のみ：天候エフェクトは MapView では機能しません。

7. スクリーンショットの CORS：外部レイヤーによって、CORS が原因でスクリーンショットのキャプチャがブロックされる場合があります。

参考サンプル

• daylight — 太陽の位置を表示する Daylight ウィジェット
• weather — SceneView の天候エフェクト
• scene-shadow — 3D のシャドウ投影
• analysis-shadow-cast — シャドウ投影の解析
• scene-underground — 地下でのナビゲーション
• scene-environment — 環境設定

関連スキル

• arcgis-3d-layers — SceneLayer、PointCloudLayer、VoxelLayer
• arcgis-custom-rendering — カスタム 3D エフェクト用の RenderNode
• arcgis-core-maps — SceneView のセットアップと初期化