arcgis-imagery

ArcGIS 画像

ラスター画像、ピクセル単位の操作、ラスター関数、多次元データ、オリエンテッド画像ビューアーには、このスキルを使用します。

インポートパターン

ESM（npm）

import ImageryLayer from "@arcgis/core/layers/ImageryLayer.js";
import ImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer.js";
import OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.js";
import RasterFunction from "@arcgis/core/layers/support/RasterFunction.js";
import MosaicRule from "@arcgis/core/layers/support/MosaicRule.js";
import DimensionalDefinition from "@arcgis/core/layers/support/DimensionalDefinition.js";
import MultidimensionalSubset from "@arcgis/core/layers/support/MultidimensionalSubset.js";

CDN（動的インポート）

const ImageryLayer = await $arcgis.import(
  "@arcgis/core/layers/ImageryLayer.js",
);
const ImageryTileLayer = await $arcgis.import(
  "@arcgis/core/layers/ImageryTileLayer.js",
);
const RasterFunction = await $arcgis.import(
  "@arcgis/core/layers/support/RasterFunction.js",
);

ImageryLayer

ImageryLayer は、動的なラスター データを提供する ArcGIS Image Services に接続します。

基本的な ImageryLayer

const imageryLayer = new ImageryLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/ScientificData/SeaTemperature/ImageServer",
});

map.add(imageryLayer);

ポップアップ付き ImageryLayer

const imageryLayer = new ImageryLayer({
  url: "...",
  popupTemplate: {
    title: "Raster Value",
    content: "{Raster.ServicePixelValue}",
  },
});

ImageryLayer の主なプロパティ

プロパティ	型	説明
url	string	ImageServer REST エンドポイント
format	string	出力形式（"jpgpng"、"tiff" など）
bandIds	number[]	表示するバンド
rasterFunction	RasterFunction	サーバー側の処理
mosaicRule	MosaicRule	ラスターの結合ルール
pixelFilter	Function	クライアント側のピクセル処理
renderingRule	object	クライアント側のレンダリングルール（JSON）

ImageryTileLayer

ImageryTileLayer は、Cloud-Optimized GeoTIFF（COG）を含む画像データに高速なタイルアクセスを提供します。

基本的な ImageryTileLayer

const imageryTileLayer = new ImageryTileLayer({
  url: "https://tiledimageservices.arcgis.com/...",
});

map.add(imageryTileLayer);

Cloud Optimized GeoTIFF（COG）

const imageryTileLayer = new ImageryTileLayer({
  url: "https://example.com/image.tif",
  title: "COG Layer",
});

ラスター関数

ラスター関数の適用

// Hillshade
const hillshadeFunction = new RasterFunction({
  functionName: "Hillshade",
  functionArguments: {
    azimuth: 315,
    altitude: 45,
    zFactor: 1,
  },
});

imageryLayer.rasterFunction = hillshadeFunction;

よく使われるラスター関数

// Stretch
const stretchFunction = new RasterFunction({
  functionName: "Stretch",
  functionArguments: {
    stretchType: 3,
    numberOfStandardDeviations: 2,
  },
});

// Colormap
const colormapFunction = new RasterFunction({
  functionName: "Colormap",
  functionArguments: {
    colormap: [
      [1, 255, 0, 0],
      [2, 0, 255, 0],
      [3, 0, 0, 255],
    ],
  },
});

// NDVI
const ndviFunction = new RasterFunction({
  functionName: "NDVI",
  functionArguments: {
    visibleBandID: 3,
    infraredBandID: 4,
  },
});

RasterFunction のプロパティ

プロパティ	型	説明
functionName	string	ラスター関数の名前
functionArguments	object	関数のパラメーター
outputType	string	出力ピクセルの型

よく使われる関数名： Hillshade、Stretch、Colormap、NDVI、GVITINDEX、SAVI、Pansharpening、Convolution、MLClassify

モザイクルール

const mosaicRule = new MosaicRule({
  mosaicMethod: "center", // "center", "northwest", "nadir", "lock-raster", "by-attribute"
  mosaicOperator: "first", // "first", "last", "min", "max", "mean", "sum", "blend"
  lockRasterIds: [1, 2, 3], // Lock to specific rasters
  multidimensionalDefinition: [], // For multidimensional data
});

imageryLayer.mosaicRule = mosaicRule;

多次元データ

DimensionalDefinition

// Define dimensions (depth, time, etc.)
const dimInfo = [];

// Depth dimension
dimInfo.push(
  new DimensionalDefinition({
    dimensionName: "StdZ",
    values: [0],
    isSlice: true,
  }),
);

// Time dimension
dimInfo.push(
  new DimensionalDefinition({
    dimensionName: "StdTime",
    values: [1396828800000],
    isSlice: true,
  }),
);

const mosaicRule = new MosaicRule({
  multidimensionalDefinition: dimInfo,
});

const layer = new ImageryLayer({
  url: "...",
  mosaicRule: mosaicRule,
});

多次元情報へのアクセス

await imageryLayer.load();

const dimensions = imageryLayer.multidimensionalInfo.dimensions;
dimensions.forEach((dim) => {
  console.log("Dimension:", dim.name);
  console.log("Values:", dim.values);
  console.log("Unit:", dim.unit);
});

多次元 ImageryTileLayer

const layer = new ImageryTileLayer({
  url: "...",
  multidimensionalSubset: {
    dimensions: [
      {
        name: "StdTime",
        values: [
          /* epoch ms */
        ],
      },
      {
        name: "StdZ",
        values: [
          /* depth values */
        ],
      },
    ],
  },
  multidimensionalDefinition: [
    new DimensionalDefinition({
      dimensionName: "StdTime",
      values: [1609459200000],
    }),
  ],
});

よく使われるディメンション名： StdTime、StdZ、StdPlev、StdDepth

ピクセルフィルタリング

カスタムピクセルフィルター

const imageryLayer = new ImageryLayer({
  url: "...",
  pixelFilter: processPixels,
});

function processPixels(pixelData) {
  if (!pixelData || !pixelData.pixelBlock) return;

  const pixelBlock = pixelData.pixelBlock;
  const pixels = pixelBlock.pixels;
  let mask = pixelBlock.mask;
  const numPixels = pixelBlock.width * pixelBlock.height;

  const minVal = pixelBlock.statistics[0].minValue;
  const maxVal = pixelBlock.statistics[0].maxValue;
  const factor = 255 / (maxVal - minVal);

  const band = pixels[0];
  const rBand = new Uint8Array(numPixels);
  const gBand = new Uint8Array(numPixels);
  const bBand = new Uint8Array(numPixels);

  if (!mask) {
    mask = new Uint8Array(numPixels);
    mask.fill(1);
    pixelBlock.mask = mask;
  }

  for (let i = 0; i < numPixels; i++) {
    if (mask[i] === 0) continue;
    const normalized = (band[i] - minVal) * factor;
    rBand[i] = normalized;
    gBand[i] = 0;
    bBand[i] = 255 - normalized;
  }

  pixelData.pixelBlock.pixels = [rBand, gBand, bBand];
  pixelData.pixelBlock.statistics = null;
  pixelData.pixelBlock.pixelType = "u8";
}

値によるピクセルのマスキング

let minThreshold = 0;
let maxThreshold = 100;

function maskPixels(pixelData) {
  if (!pixelData || !pixelData.pixelBlock) return;

  const pixelBlock = pixelData.pixelBlock;
  const pixels = pixelBlock.pixels[0];
  let mask = pixelBlock.mask;

  if (!mask) {
    mask = new Uint8Array(pixels.length);
    mask.fill(1);
    pixelBlock.mask = mask;
  }

  for (let i = 0; i < pixels.length; i++) {
    mask[i] = pixels[i] >= minThreshold && pixels[i] <= maxThreshold ? 1 : 0;
  }
}

// Update thresholds and redraw
function updateThresholds(min, max) {
  minThreshold = min;
  maxThreshold = max;
  imageryLayer.redraw();
}

PixelBlock の構造

プロパティ	型	説明
pixels	TypedArray[]	バンドごとに1つの配列
mask	Uint8Array	0 = 透明、1 = 不透明
statistics	object[]	バンドごとの { minValue, maxValue }
width	number	ピクセルブロックの幅
height	number	ピクセルブロックの高さ
pixelType	string	"u8"、"u16"、"u32"、"s16"、"s32"、"f32"、"f64"

バンドの組み合わせ

// Select specific bands
imageryLayer.bandIds = [4, 3, 2]; // NIR, Red, Green (False color)

// Common band combinations
// Natural color: [1, 2, 3] (R, G, B)
// False color: [4, 3, 2] (NIR, R, G)
// SWIR: [7, 5, 4] (SWIR, NIR, R)

Identify（ピクセル値のクエリ）

view.on("click", async (event) => {
  const result = await imageryLayer.identify({
    geometry: event.mapPoint,
    returnGeometry: false,
    returnCatalogItems: true,
  });

  console.log("Pixel value:", result.value);
  console.log("Catalog items:", result.catalogItems);
});

ラスター統計情報

await imageryLayer.load();

const stats = imageryLayer.serviceRasterInfo.statistics;
console.log("Min:", stats[0].min);
console.log("Max:", stats[0].max);
console.log("Mean:", stats[0].avg);
console.log("StdDev:", stats[0].stddev);

オリエンテッド画像

OrientedImageryLayer

const oiLayer = new OrientedImageryLayer({
  url: "https://services.arcgis.com/.../FeatureServer/0",
});

map.add(oiLayer);

OrientedImageryViewer ウィジェット

import OrientedImageryViewer from "@arcgis/core/widgets/OrientedImageryViewer.js";

const oiViewer = new OrientedImageryViewer({
  view: view,
});

view.ui.add(oiViewer, "top-right");

画像コンポーネント

コンポーネント	用途
arcgis-oriented-imagery-viewer	オリエンテッド画像の表示とナビゲーション
arcgis-video-player	ビデオサービスの映像フィードの再生

よくある落とし穴

1. ピクセルフィルターのパフォーマンス：複雑なピクセルフィルターはレンダリングのたびに実行されるため、ループを最適化し、メモリー割り当てを最小限に抑えます。

2. バンド配列のインデックス：サービスではバンド ID は 1 始まりですが、bandIds 配列では 0 始まりです。

3. 座標系：表示の空間参照系に合わせるため、画像を再投影する必要がある場合があります。

4. 大きな画像によるメモリー使用量：大規模なデータセットには ImageryTileLayer を使用します。自動的にタイルに分割されます。

5. ピクセルタイプの変換：ピクセルフィルターで pixelType を変更する場合は注意してください。不一致があるとアーティファクトが発生します。

6. フィルター変更後の再描画：pixelFilter で使用する外部変数を変更した後は、imageryLayer.redraw() を呼び出します。

リファレンスサンプル

• layers-imagerylayer — 基本的な ImageryLayer
• layers-imagery-pixelvalues — ピクセル値のクエリ
• layers-imagery-rasterfunction — ラスターファンクションによる処理
• layers-imagery-multidimensional — 多次元画像
• layers-imagerytilelayer — ImageryTileLayer
• layers-imagerytilelayer-cog — Cloud-Optimized GeoTIFF
• layers-imagery-renderer — 画像レンダラー
• layers-imagery-clientside — クライアント側の画像処理
• layers-orientedimagerylayer — Oriented imagery

関連スキル

• arcgis-time-animation — 時間を考慮した画像アニメーション
• arcgis-layers — 一般的なレイヤーパターン
• arcgis-smart-mapping — 自動生成されるレンダラー
• arcgis-custom-rendering — カスタムタイルレイヤーのレンダリング