arcgis-geometry-operations

ArcGIS ジオメトリー演算

ジオメトリーを作成し、ジオメトリー演算子を使用して空間演算を行う場合に、このスキルを使用します。

重要： geometryEngine モジュールと geometryEngineAsync モジュールは、v5.0 で削除されました（4.29 以降は非推奨）。ジオメトリー演算子のみを使用してください。

インポートパターン

直接 ESM インポート

import Point from "@arcgis/core/geometry/Point.js";
import Polygon from "@arcgis/core/geometry/Polygon.js";
import bufferOperator from "@arcgis/core/geometry/operators/bufferOperator.js";
import unionOperator from "@arcgis/core/geometry/operators/unionOperator.js";

動的インポート（CDN）

const Point = await $arcgis.import("@arcgis/core/geometry/Point.js");
const [bufferOperator, unionOperator] = await $arcgis.import([
  "@arcgis/core/geometry/operators/bufferOperator.js",
  "@arcgis/core/geometry/operators/unionOperator.js",
]);

ジオメトリークラスの概要

クラス	用途	インポートパス
Point	単一の位置（x、y、z、m）	geometry/Point.js
Polyline	線とパス	geometry/Polyline.js
Polygon	リングを持つ領域	geometry/Polygon.js
Multipoint	点のコレクション	geometry/Multipoint.js
Extent	バウンディングボックス	geometry/Extent.js
Circle	円形ジオメトリー	geometry/Circle.js
Mesh	頂点と面を持つ3Dメッシュ	geometry/Mesh.js

ジオメトリーの作成

Point

// Using autocast (plain object)
const point = {
  type: "point",
  longitude: -118.80657,
  latitude: 34.02749,
  z: 1000,
  spatialReference: { wkid: 4326 },
};

// Using x, y coordinates (projected)
const point = {
  type: "point",
  x: -13044706,
  y: 4036320,
  spatialReference: { wkid: 102100 },
};

Polyline

const polyline = {
  type: "polyline",
  paths: [
    [
      [-118.821, 34.014],
      [-118.815, 34.014],
      [-118.809, 34.01],
    ],
  ],
  spatialReference: { wkid: 4326 },
};

// Multi-path
const multiPath = {
  type: "polyline",
  paths: [
    [
      [-118.821, 34.014],
      [-118.815, 34.014],
    ],
    [
      [-118.815, 34.022],
      [-118.813, 34.022],
    ],
  ],
};

Polygon

const polygon = {
  type: "polygon",
  rings: [
    // Outer ring (clockwise)
    [
      [-118.818, 34.02],
      [-118.807, 34.02],
      [-118.807, 34.029],
      [-118.818, 34.029],
      [-118.818, 34.02],
    ],
    // Inner ring/hole (counter-clockwise)
    [
      [-118.815, 34.022],
      [-118.81, 34.022],
      [-118.81, 34.026],
      [-118.815, 34.026],
      [-118.815, 34.022],
    ],
  ],
  spatialReference: { wkid: 4326 },
};

Extent

const extent = {
  type: "extent",
  xmin: -118.82,
  ymin: 34.01,
  xmax: -118.8,
  ymax: 34.03,
  spatialReference: { wkid: 4326 },
};

Circle

import Circle from "@arcgis/core/geometry/Circle.js";

const circle = new Circle({
  center: [-118.80657, 34.02749],
  radius: 1000,
  radiusUnit: "meters",
  geodesic: true,
  spatialReference: { wkid: 4326 },
});

Multipoint

const multipoint = {
  type: "multipoint",
  points: [
    [-118.821, 34.014],
    [-118.815, 34.014],
    [-118.809, 34.01],
  ],
  spatialReference: { wkid: 4326 },
};

ジオメトリー演算子

ツリーシェイキングに対応するため、各演算子は個別にインポートします。使用前に await operator.load() が必要な演算子もあります。

バッファ演算

import bufferOperator from "@arcgis/core/geometry/operators/bufferOperator.js";

await bufferOperator.load();

// Simple buffer (distance in meters by default)
const buffered = bufferOperator.execute(point, 1000);

// Buffer with unit
const buffered = bufferOperator.execute(point, 500, { unit: "meters" });

// Geodesic buffer (for geographic coordinates)
import geodesicBufferOperator from "@arcgis/core/geometry/operators/geodesicBufferOperator.js";

await geodesicBufferOperator.load();
const geoBuffered = geodesicBufferOperator.execute(point, 1000, {
  unit: "meters",
});

空間的な関係

すべての関係演算子はブール値を返します。

import containsOperator from "@arcgis/core/geometry/operators/containsOperator.js";
import withinOperator from "@arcgis/core/geometry/operators/withinOperator.js";
import intersectsOperator from "@arcgis/core/geometry/operators/intersectsOperator.js";
import crossesOperator from "@arcgis/core/geometry/operators/crossesOperator.js";
import overlapsOperator from "@arcgis/core/geometry/operators/overlapsOperator.js";
import touchesOperator from "@arcgis/core/geometry/operators/touchesOperator.js";
import disjointOperator from "@arcgis/core/geometry/operators/disjointOperator.js";
import equalsOperator from "@arcgis/core/geometry/operators/equalsOperator.js";

// Contains - geometry1 completely contains geometry2
containsOperator.execute(polygon, point); // boolean

// Within - geometry1 is completely within geometry2
withinOperator.execute(point, polygon); // boolean

// Intersects - geometries share any space
intersectsOperator.execute(polygon1, polygon2); // boolean

// Crosses, Overlaps, Touches, Disjoint, Equals
crossesOperator.execute(line, polygon);
overlapsOperator.execute(polygon1, polygon2);
touchesOperator.execute(polygon1, polygon2);
disjointOperator.execute(polygon1, polygon2);
equalsOperator.execute(geom1, geom2);

集合演算

import unionOperator from "@arcgis/core/geometry/operators/unionOperator.js";
import intersectionOperator from "@arcgis/core/geometry/operators/intersectionOperator.js";
import differenceOperator from "@arcgis/core/geometry/operators/differenceOperator.js";
import symmetricDifferenceOperator from "@arcgis/core/geometry/operators/symmetricDifferenceOperator.js";
import clipOperator from "@arcgis/core/geometry/operators/clipOperator.js";

// Union - combine geometries
const combined = unionOperator.execute([polygon1, polygon2, polygon3]);

// Intersection - common area
const common = intersectionOperator.execute(polygon1, polygon2);

// Difference - subtract geometry2 from geometry1
const diff = differenceOperator.execute(polygon1, polygon2);

// Symmetric Difference - areas in either but not both
const symDiff = symmetricDifferenceOperator.execute(polygon1, polygon2);

// Clip - clip geometry by extent
const clipped = clipOperator.execute(polygon, extent);

計測

import areaOperator from "@arcgis/core/geometry/operators/areaOperator.js";
import geodeticAreaOperator from "@arcgis/core/geometry/operators/geodeticAreaOperator.js";
import lengthOperator from "@arcgis/core/geometry/operators/lengthOperator.js";
import geodeticLengthOperator from "@arcgis/core/geometry/operators/geodeticLengthOperator.js";
import distanceOperator from "@arcgis/core/geometry/operators/distanceOperator.js";
import geodeticDistanceOperator from "@arcgis/core/geometry/operators/geodeticDistanceOperator.js";

// Area (polygons)
const area = areaOperator.execute(polygon);
const geoArea = geodeticAreaOperator.execute(polygon, {
  unit: "square-kilometers",
});

// Length (polylines)
const length = lengthOperator.execute(polyline);
const geoLength = geodeticLengthOperator.execute(polyline, {
  unit: "kilometers",
});

// Distance between geometries
const dist = distanceOperator.execute(point1, point2);
const geoDist = geodeticDistanceOperator.execute(point1, point2, {
  unit: "kilometers",
});

ジオメトリーの操作

import simplifyOperator from "@arcgis/core/geometry/operators/simplifyOperator.js";
import generalizeOperator from "@arcgis/core/geometry/operators/generalizeOperator.js";
import densifyOperator from "@arcgis/core/geometry/operators/densifyOperator.js";
import offsetOperator from "@arcgis/core/geometry/operators/offsetOperator.js";
import convexHullOperator from "@arcgis/core/geometry/operators/convexHullOperator.js";
import centroidOperator from "@arcgis/core/geometry/operators/centroidOperator.js";
import labelPointOperator from "@arcgis/core/geometry/operators/labelPointOperator.js";

// Simplify - remove self-intersections
const simplified = simplifyOperator.execute(polygon);

// Generalize - reduce vertices
const generalized = generalizeOperator.execute(polyline, {
  maxDeviation: 100,
  unit: "meters",
});

// Densify - add vertices
const densified = densifyOperator.execute(polyline, {
  maxSegmentLength: 100,
  unit: "meters",
});

// Offset - create parallel geometry
const offsetGeom = offsetOperator.execute(polyline, {
  distance: 50,
  unit: "meters",
  joinType: "round",
});

// Convex Hull
const hull = convexHullOperator.execute(polygon);

// Centroid
const center = centroidOperator.execute(polygon);

// Label Point (guaranteed inside polygon)
const label = labelPointOperator.execute(polygon);

利用可能な演算子

カテゴリ	演算子
関係	containsOperator、crossesOperator、disjointOperator、equalsOperator、intersectsOperator、isNearOperator、overlapsOperator、relateOperator、touchesOperator、withinOperator
集合演算	clipOperator、cutOperator、differenceOperator、intersectionOperator、symmetricDifferenceOperator、unionOperator
バッファ	bufferOperator、geodesicBufferOperator、graphicBufferOperator
形状	autoCompleteOperator、boundaryOperator、convexHullOperator、simplifyOperator、simplifyOGCOperator、alphaShapeOperator、minimumBoundingCircleOperator
計測	areaOperator、geodeticAreaOperator、lengthOperator、geodeticLengthOperator、distanceOperator、geodeticDistanceOperator
変換	densifyOperator、geodeticDensifyOperator、generalizeOperator、offsetOperator、affineTransformOperator、reshapeOperator、extendOperator
分析	centroidOperator、labelPointOperator、proximityOperator、geodesicProximityOperator
投影	projectOperator、shapePreservingProjectOperator
変換	linesToPolygonsOperator、multiPartToSinglePartOperator、polygonSlicerOperator、polygonOverlayOperator

投影（projectOperator）

import projectOperator from "@arcgis/core/geometry/operators/projectOperator.js";

await projectOperator.load();

// Project to new spatial reference
const projected = projectOperator.execute(geometry, { wkid: 4326 });

// With geographic transformation
const projected = projectOperator.execute(
  geometry,
  { wkid: 4326 },
  {
    geographicTransformation: {
      steps: [{ wkid: 108190 }],
    },
  },
);

座標系と変換の詳細については、arcgis-coordinates-projection を参照してください。

Web メルカトルのユーティリティ

import webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils.js";

const webMercatorGeom =
  webMercatorUtils.geographicToWebMercator(geographicPoint);
const geoGeom = webMercatorUtils.webMercatorToGeographic(webMercatorPoint);
const canProject = webMercatorUtils.canProject(
  geom1.spatialReference,
  geom2.spatialReference,
);

メッシュ（3D ジオメトリ）

import Mesh from "@arcgis/core/geometry/Mesh.js";

const box = Mesh.createBox(location, {
  size: { width: 100, height: 100, depth: 50 },
  material: { color: "red" },
});

const sphere = Mesh.createSphere(location, {
  size: 50,
  material: { color: "blue" },
});

const cylinder = Mesh.createCylinder(location, {
  size: { width: 50, height: 100 },
  material: { color: "green" },
});

// Load from glTF/GLB
const mesh = await Mesh.createFromGLTF(location, "model.glb");

JSON ユーティリティ

import jsonUtils from "@arcgis/core/geometry/support/jsonUtils.js";

// Create geometry from JSON
const geometry = jsonUtils.fromJSON({
  rings: [
    [
      [-118.8, 34.0],
      [-118.7, 34.0],
      [-118.7, 34.1],
      [-118.8, 34.1],
      [-118.8, 34.0],
    ],
  ],
  spatialReference: { wkid: 4326 },
});

// Get JSON from geometry
const json = geometry.toJSON();

一般的なパターン

ポイントがポリゴン内にあるか確認する

import containsOperator from "@arcgis/core/geometry/operators/containsOperator.js";

function isPointInPolygon(point, polygon) {
  return containsOperator.execute(polygon, point);
}

バッファーの作成とクエリ

import geodesicBufferOperator from "@arcgis/core/geometry/operators/geodesicBufferOperator.js";

async function queryWithinDistance(point, distance, layer) {
  await geodesicBufferOperator.load();
  const bufferGeom = geodesicBufferOperator.execute(point, distance, {
    unit: "meters",
  });
  const query = layer.createQuery();
  query.geometry = bufferGeom;
  query.spatialRelationship = "contains";
  return await layer.queryFeatures(query);
}

面積の合計を計算する

import unionOperator from "@arcgis/core/geometry/operators/unionOperator.js";
import geodeticAreaOperator from "@arcgis/core/geometry/operators/geodeticAreaOperator.js";

function calculateTotalArea(polygons) {
  const combined = unionOperator.execute(polygons);
  return geodeticAreaOperator.execute(combined, { unit: "square-kilometers" });
}

よくある落とし穴

1. 空間参照の不一致：操作を行う前に、ジオメトリが同じ空間参照を使用していることを必ず確認してください。

   import projectOperator from "@arcgis/core/geometry/operators/projectOperator.js";
   await projectOperator.load();
   if (!geom1.spatialReference.equals(geom2.spatialReference)) {
     geom2 = projectOperator.execute(geom2, geom1.spatialReference);
   }
   

2. 測地線と平面：地理座標（WGS84/4326）には測地線演算子を使用してください。投影座標系には平面演算子を使用してください。

   const bufferOp = geometry.spatialReference.isGeographic
     ? geodesicBufferOperator
     : bufferOperator;
   

3. リングの向き：外周リングは時計回り、穴は反時計回りにする必要があります。不明な場合は simplifyOperator を使用してください。

4. 自己交差するポリゴン：ユーザーが描画したポリゴンに対する操作の前に、simplifyOperator.execute(polygon) を使用してください。

5. 演算子の読み込み忘れ：一部の演算子では、.execute() を呼び出す前に await operator.load() が必要です。演算子のドキュメントを確認してください。

6. 削除された geometryEngine の使用：geometryEngine と geometryEngineAsync モジュールは 5.0 で削除されました。代わりに個別の演算子を使用してください。

参考サンプル

• ge-geodesicbuffer - 測地線バッファー操作
• gx-geodesicbuffer - 測地線バッファー（別の方法）
• geometry-operator-centroid - ジオメトリの重心の計算
• geometry-operator-offset-visualizer - ジオメトリのオフセットの可視化
• geometry-operator-proximity - ジオメトリ演算子による近接分析
• geometry-operator-worker - Web ワーカーでのジオメトリ操作の実行
• geometry-mesh-primitives - 3D メッシュプリミティブの作成
• geometry-mesh-elevation - 標高を含む 3D メッシュ

関連スキル

• 座標系、投影の詳細、座標の書式設定については、arcgis-coordinates-projection を参照してください。
• ジオメトリサービスを介したサーバー側のジオメトリ操作については、arcgis-rest-services を参照してください。
• 分析オブジェクトとフィーチャの縮小については、arcgis-spatial-analysis を参照してください。