arcgis-coordinates-projection

ArcGIS 座標と投影

座標変換、投影変換、空間参照の処理、さまざまな形式での座標表示には、このスキルを使用します。

重要： projection モジュール（4.32 以降で非推奨）と geodesicUtils（4.33 以降で非推奨）は v5.0 で削除されました。代わりに projectOperator と測地ジオメトリ演算子を使用してください。

インポート方法

ESM の直接インポート

import projectOperator from "@arcgis/core/geometry/operators/projectOperator.js";
import SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
import coordinateFormatter from "@arcgis/core/geometry/coordinateFormatter.js";
import webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils.js";

動的インポート（CDN）

const projectOperator = await $arcgis.import(
  "@arcgis/core/geometry/operators/projectOperator.js",
);
const coordinateFormatter = await $arcgis.import(
  "@arcgis/core/geometry/coordinateFormatter.js",
);
const [SpatialReference, webMercatorUtils] = await $arcgis.import([
  "@arcgis/core/geometry/SpatialReference.js",
  "@arcgis/core/geometry/support/webMercatorUtils.js",
]);

座標変換コンポーネント

基本設定

<arcgis-map basemap="topo-vector" center="-117.049, 34.485" zoom="12">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-coordinate-conversion
    slot="bottom-left"
  ></arcgis-coordinate-conversion>
</arcgis-map>

座標変換ウィジェット（コア API）

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

const ccWidget = new CoordinateConversion({ view });
view.ui.add(ccWidget, "bottom-left");

カスタム座標形式

import CoordinateConversion from "@arcgis/core/widgets/CoordinateConversion.js";
import Format from "@arcgis/core/widgets/CoordinateConversion/support/Format.js";

const customFormat = new Format({
  name: "Custom XY",
  conversionInfo: {
    spatialReference: { wkid: 4326 },
    reverseConvert: (string) => {
      const parts = string.split(",");
      return [parseFloat(parts[0]), parseFloat(parts[1])];
    },
  },
  coordinateSegments: [
    { alias: "Lon", description: "Longitude", searchPattern: "X" },
    { alias: "Lat", description: "Latitude", searchPattern: "Y" },
  ],
  defaultPattern: "X°, Y°",
});

const ccWidget = new CoordinateConversion({
  view,
  formats: [customFormat],
});

空間参照

一般的な空間参照

名前	WKID	種類
WGS 84	4326	地理座標
Web Mercator	102100 or 3857	投影座標
UTM Zone 11N	32611	投影座標
State Plane（例）	2230	投影座標

空間参照の作成

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

// By WKID
const wgs84 = new SpatialReference({ wkid: 4326 });
const webMercator = new SpatialReference({ wkid: 102100 });

// By WKT (for custom projections)
const customSR = new SpatialReference({
  wkt: 'PROJCS["NAD_1983_StatePlane_California_VI_FIPS_0406_Feet"...',
});

// Shorthand (autocast)
const sr = { wkid: 4326 };

SpatialReference のプロパティ

const sr = new SpatialReference({ wkid: 4326 });

console.log(sr.isGeographic); // true for lat/lon systems
console.log(sr.isWebMercator); // true for WKID 3857/102100
console.log(sr.isWGS84); // true for WKID 4326
console.log(sr.wkid); // 4326

クライアント側の投影（projectOperator）

ジオメトリをクライアント側で投影する場合に推奨される方法です。

ジオメトリの投影

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

await projectOperator.load();

const projected = projectOperator.execute(geometry, { wkid: 4326 });

地理的変換を使用した投影

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

await projectOperator.load();

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

形状を保持する投影

測地形状（大円弧）を保持しながらジオメトリを投影する場合：

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

await shapePreservingProjectOperator.load();

const projected = shapePreservingProjectOperator.execute(geometry, {
  wkid: 3857,
});

地理的変換ユーティリティ

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

// Get available transformations between two spatial references
const transformations = geographicTransformationUtils.getTransformations(
  { wkid: 4269 }, // NAD83
  { wkid: 4326 }, // WGS84
);

transformations.forEach((t) => {
  console.log(t.wkid, t.wkt);
});

サーバー側の投影（Geometry Service）

複雑な投影を行う場合や、クライアント側のエンジンでは不十分な場合：

import * as geometryService from "@arcgis/core/rest/geometryService.js";
import ProjectParameters from "@arcgis/core/rest/support/ProjectParameters.js";

const gsUrl =
  "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer";

const params = new ProjectParameters({
  geometries: [geometry],
  outSpatialReference: { wkid: 4326 },
});

const results = await geometryService.project(gsUrl, params);
const projected = results[0];

座標変換ユーティリティ

Web Mercator と地理座標の相互変換

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

const geoPoint = webMercatorUtils.webMercatorToGeographic(webMercatorPoint);
const wmPoint = webMercatorUtils.geographicToWebMercator(geoPoint);
const canProject = webMercatorUtils.canProject(fromSR, toSR);

座標フォーマッター

座標を DMS、UTM、MGRS、USNG 文字列に変換します。

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

await coordinateFormatter.load();

// To Degrees Minutes Seconds
const dms = coordinateFormatter.toLatitudeLongitude(point, "dms", 3);
// Output: "34°29'06.000\"N 117°02'56.400\"W"

// To MGRS
const mgrs = coordinateFormatter.toMgrs(point, "automatic", 5, false);
// Output: "11SNU1234567890"

// To UTM
const utm = coordinateFormatter.toUtm(point, "north-south-indicators", true);
// Output: "11S 500000 3800000"

// To USNG
const usng = coordinateFormatter.toUsng(point, 5, false);

// From string to point
const pointFromDMS = coordinateFormatter.fromLatitudeLongitude(
  "34°29'06\"N 117°02'56\"W",
);
const pointFromMGRS = coordinateFormatter.fromMgrs("11SNU1234567890");
const pointFromUTM = coordinateFormatter.fromUtm("11S 500000 3800000");
const pointFromUSNG = coordinateFormatter.fromUsng("11SNU1234567890");

coordinateFormatter のメソッド

メソッド	説明
toLatitudeLongitude(point, format, decimals)	形式："dd"、"dm"、"dms"
toMgrs(point, mode, precision, spaces)	軍用グリッド参照システム
toUtm(point, mode, spaces)	ユニバーサル横メルカトル図法
toUsng(point, precision, spaces)	米国国家グリッド
fromLatitudeLongitude(string)	DMS/DD 文字列を解析して Point に変換
fromMgrs(string)	MGRS を解析して Point に変換
fromUtm(string)	UTM を解析して Point に変換
fromUsng(string)	USNG を解析して Point に変換

座標の表示

マウス座標の表示

view.on("pointer-move", (event) => {
  const mapPoint = view.toMap({ x: event.x, y: event.y });
  if (mapPoint) {
    document.getElementById("coords").textContent =
      `Lat: ${mapPoint.latitude.toFixed(6)}, Lon: ${mapPoint.longitude.toFixed(6)}`;
  }
});

複数形式での座標表示

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

await coordinateFormatter.load();

view.on("pointer-move", (event) => {
  const point = view.toMap({ x: event.x, y: event.y });
  if (point) {
    document.getElementById("latlon").textContent =
      `${point.latitude.toFixed(6)}, ${point.longitude.toFixed(6)}`;
    document.getElementById("utm").textContent = coordinateFormatter.toUtm(
      point,
      "north-south-indicators",
      true,
    );
    document.getElementById("mgrs").textContent = coordinateFormatter.toMgrs(
      point,
      "automatic",
      5,
      true,
    );
  }
});

測地ジオメトリ演算

測地計算（地表上の距離、面積、長さ）には次を使用します。

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

// Geodesic distance between two points
const distance = geodeticDistanceOperator.execute(point1, point2, {
  unit: "kilometers",
});

// Geodesic area of a polygon
const area = geodeticAreaOperator.execute(polygon, {
  unit: "square-kilometers",
});

// Geodesic length of a polyline
const length = geodeticLengthOperator.execute(polyline, { unit: "kilometers" });

演算子の詳細については、arcgis-geometry-operations を参照してください。

削除されたモジュールからの移行

削除されたモジュール（5.0 より前）	置き換え先（5.0）
projection.project(geom, sr)	projectOperator.execute(geom, sr)
projection.load()	projectOperator.load()
geodesicUtils.geodesicDistance(p1, p2, unit)	geodeticDistanceOperator.execute(p1, p2, { unit })
geodesicUtils.geodesicArea(geom, unit)	geodeticAreaOperator.execute(geom, { unit })
geodesicUtils.geodesicLength(geom, unit)	geodeticLengthOperator.execute(geom, { unit })

よくある落とし穴

1. 投影エンジンの読み込み忘れ：使用する前に、projectOperator.load() と coordinateFormatter.load() を呼び出す必要があります。

   // Anti-pattern: using before load
   const projected = projectOperator.execute(geom, { wkid: 4326 }); // Error
   
   // Correct: load first
   await projectOperator.load();
   const projected = projectOperator.execute(geom, { wkid: 4326 });
   

2. 座標の順序：SDK では地理座標は（経度、緯度）であり、（緯度、経度）ではありません。ポイントのプロパティでは、x が経度、y が緯度です。

3. WKID と WKT：既知の ID がある場合は WKID を使用します。WKID レジストリにないカスタム座標系に限り、WKT を使用します。

4. 測地系変換：異なる測地系間（例：NAD83 から WGS84）で投影する場合は、精度を高めるために地理座標変換を指定します。指定しないと、結果に数メートルの誤差が生じる場合があります。

5. クライアントとサーバーの使い分け：高速化にはクライアント側の投影（projectOperator）を使用します。クライアントエンジンで処理できない複雑な変換に限り、サーバー側（geometryService.project()）を使用します。

6. 削除されたモジュールの使用：projection モジュールと geodesicUtils モジュールは 5.0 で削除されました。代わりに projectOperator と測地演算子を使用してください。

リファレンスサンプル

• coordinate-conversion - 座標形式間の変換
• coordinate-conversion-custom - カスタム座標形式
• widgets-coordinateconversion - CoordinateConversion ウィジェットの使用方法
• widgets-coordinateconversion-custom - カスタム座標ウィジェット形式
• client-projection - クライアント側でのジオメトリの投影
• layers-csv-projection - 投影を使用する CSV レイヤー

関連スキル

• ジオメトリの作成と空間演算子については、arcgis-geometry-operations を参照してください。
• サーバー側のジオメトリサービス（投影、バッファーなど）については、arcgis-rest-services を参照してください。
• マップとビューの空間参照の設定については、arcgis-core-maps を参照してください。