@saschabrunnerch/arcgis-maps-sdk-js-ai-context 0.0.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +163 -201
- package/bin/cli.js +157 -173
- package/contexts/4.34/{claude → skills}/arcgis-3d-advanced/SKILL.md +586 -586
- package/contexts/4.34/{claude → skills}/arcgis-advanced-layers/SKILL.md +431 -431
- package/contexts/4.34/{claude → skills}/arcgis-analysis-services/SKILL.md +607 -607
- package/contexts/4.34/{claude → skills}/arcgis-authentication/SKILL.md +301 -301
- package/contexts/4.34/{claude → skills}/arcgis-cim-symbols/SKILL.md +486 -486
- package/contexts/4.34/{claude → skills}/arcgis-coordinates-projection/SKILL.md +406 -406
- package/contexts/4.34/{claude → skills}/arcgis-core-maps/SKILL.md +739 -739
- package/contexts/4.34/{claude → skills}/arcgis-core-utilities/SKILL.md +732 -732
- package/contexts/4.34/{claude → skills}/arcgis-custom-rendering/SKILL.md +445 -445
- package/contexts/4.34/{claude → skills}/arcgis-editing-advanced/SKILL.md +702 -702
- package/contexts/4.34/{claude → skills}/arcgis-feature-effects/SKILL.md +393 -393
- package/contexts/4.34/{claude → skills}/arcgis-geometry-operations/SKILL.md +489 -489
- package/contexts/4.34/{claude → skills}/arcgis-imagery/SKILL.md +307 -307
- package/contexts/4.34/{claude → skills}/arcgis-interaction/SKILL.md +572 -572
- package/contexts/4.34/{claude → skills}/arcgis-knowledge-graphs/SKILL.md +582 -582
- package/contexts/4.34/{claude → skills}/arcgis-layers/SKILL.md +601 -601
- package/contexts/4.34/{claude → skills}/arcgis-map-tools/SKILL.md +668 -668
- package/contexts/4.34/{claude → skills}/arcgis-media-layers/SKILL.md +290 -290
- package/contexts/4.34/{claude → skills}/arcgis-portal-content/SKILL.md +679 -679
- package/contexts/4.34/{claude → skills}/arcgis-scene-effects/SKILL.md +512 -512
- package/contexts/4.34/{claude → skills}/arcgis-smart-mapping/SKILL.md +686 -686
- package/contexts/4.34/skills/arcgis-starter-app/SKILL.md +273 -0
- package/contexts/4.34/skills/arcgis-starter-app-extended/SKILL.md +649 -0
- package/contexts/4.34/{claude → skills}/arcgis-tables-forms/SKILL.md +877 -877
- package/contexts/4.34/{claude → skills}/arcgis-time-animation/SKILL.md +722 -722
- package/contexts/4.34/{claude → skills}/arcgis-utility-networks/SKILL.md +301 -301
- package/contexts/4.34/{claude → skills}/arcgis-visualization/SKILL.md +580 -580
- package/contexts/4.34/{claude → skills}/arcgis-widgets-ui/SKILL.md +574 -574
- package/lib/installer.js +294 -379
- package/package.json +45 -45
- package/contexts/4.34/copilot/arcgis-3d.instructions.md +0 -267
- package/contexts/4.34/copilot/arcgis-analysis.instructions.md +0 -294
- package/contexts/4.34/copilot/arcgis-arcade.instructions.md +0 -234
- package/contexts/4.34/copilot/arcgis-authentication.instructions.md +0 -187
- package/contexts/4.34/copilot/arcgis-cim-symbols.instructions.md +0 -177
- package/contexts/4.34/copilot/arcgis-core-maps.instructions.md +0 -246
- package/contexts/4.34/copilot/arcgis-core-utilities.instructions.md +0 -247
- package/contexts/4.34/copilot/arcgis-editing.instructions.md +0 -262
- package/contexts/4.34/copilot/arcgis-geometry.instructions.md +0 -225
- package/contexts/4.34/copilot/arcgis-layers.instructions.md +0 -278
- package/contexts/4.34/copilot/arcgis-popup-templates.instructions.md +0 -266
- package/contexts/4.34/copilot/arcgis-portal-advanced.instructions.md +0 -275
- package/contexts/4.34/copilot/arcgis-smart-mapping.instructions.md +0 -184
- package/contexts/4.34/copilot/arcgis-time-animation.instructions.md +0 -112
- package/contexts/4.34/copilot/arcgis-visualization.instructions.md +0 -321
- package/contexts/4.34/copilot/arcgis-widgets-ui.instructions.md +0 -277
- /package/contexts/4.34/{claude → skills}/arcgis-arcade/SKILL.md +0 -0
- /package/contexts/4.34/{claude → skills}/arcgis-popup-templates/SKILL.md +0 -0
|
@@ -1,406 +1,406 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: arcgis-coordinates-projection
|
|
3
|
-
description: Work with coordinate systems, projections, and coordinate conversion. Use for transforming coordinates and displaying position in multiple formats.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# ArcGIS Coordinates and Projection
|
|
7
|
-
|
|
8
|
-
Use this skill for coordinate conversion, projection transformations, and spatial reference handling.
|
|
9
|
-
|
|
10
|
-
> **Important:** The `projection` module is **deprecated** as of version 4.32 and `geodesicUtils` is **deprecated** as of version 4.33. Use the [projectOperator](#modern-projection-operator) and [geometry operators](#modern-geometry-operators) instead. See the [Deprecation Notice](#deprecated-apis) section for migration guidance.
|
|
11
|
-
|
|
12
|
-
## Coordinate Conversion Component
|
|
13
|
-
|
|
14
|
-
### Basic Coordinate Conversion
|
|
15
|
-
```html
|
|
16
|
-
<arcgis-map basemap="topo-vector" center="-117.049, 34.485" zoom="12">
|
|
17
|
-
<arcgis-zoom slot="top-left"></arcgis-zoom>
|
|
18
|
-
<arcgis-coordinate-conversion slot="bottom-left"></arcgis-coordinate-conversion>
|
|
19
|
-
</arcgis-map>
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
### Coordinate Conversion Widget (Core API)
|
|
23
|
-
```javascript
|
|
24
|
-
import CoordinateConversion from "@arcgis/core/widgets/CoordinateConversion.js";
|
|
25
|
-
|
|
26
|
-
const ccWidget = new CoordinateConversion({
|
|
27
|
-
view: view
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
view.ui.add(ccWidget, "bottom-left");
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
### Custom Coordinate Formats
|
|
34
|
-
```javascript
|
|
35
|
-
import CoordinateConversion from "@arcgis/core/widgets/CoordinateConversion.js";
|
|
36
|
-
import Format from "@arcgis/core/widgets/CoordinateConversion/support/Format.js";
|
|
37
|
-
|
|
38
|
-
// Create custom format
|
|
39
|
-
const customFormat = new Format({
|
|
40
|
-
name: "Custom XY",
|
|
41
|
-
conversionInfo: {
|
|
42
|
-
spatialReference: { wkid: 4326 },
|
|
43
|
-
reverseConvert: (string) => {
|
|
44
|
-
const parts = string.split(",");
|
|
45
|
-
return [parseFloat(parts[0]), parseFloat(parts[1])];
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
coordinateSegments: [
|
|
49
|
-
{ alias: "Lon", description: "Longitude", searchPattern: "X" },
|
|
50
|
-
{ alias: "Lat", description: "Latitude", searchPattern: "Y" }
|
|
51
|
-
],
|
|
52
|
-
defaultPattern: "X°, Y°"
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
const ccWidget = new CoordinateConversion({
|
|
56
|
-
view: view,
|
|
57
|
-
formats: [customFormat]
|
|
58
|
-
});
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
## Spatial Reference
|
|
62
|
-
|
|
63
|
-
### Create Spatial Reference
|
|
64
|
-
```javascript
|
|
65
|
-
import SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
|
|
66
|
-
|
|
67
|
-
// By WKID
|
|
68
|
-
const wgs84 = new SpatialReference({ wkid: 4326 });
|
|
69
|
-
const webMercator = new SpatialReference({ wkid: 102100 });
|
|
70
|
-
|
|
71
|
-
// By WKT
|
|
72
|
-
const customSR = new SpatialReference({
|
|
73
|
-
wkt: 'PROJCS["NAD_1983_StatePlane_California_VI_FIPS_0406_Feet"...'
|
|
74
|
-
});
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
### Common Spatial References
|
|
78
|
-
```javascript
|
|
79
|
-
// WGS 84 (Geographic)
|
|
80
|
-
const wgs84 = { wkid: 4326 };
|
|
81
|
-
|
|
82
|
-
// Web Mercator (Projected)
|
|
83
|
-
const webMercator = { wkid: 102100 }; // or 3857
|
|
84
|
-
|
|
85
|
-
// UTM Zone 11N
|
|
86
|
-
const utm11n = { wkid: 32611 };
|
|
87
|
-
|
|
88
|
-
// State Plane (example)
|
|
89
|
-
const statePlane = { wkid: 2230 };
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
## Modern Projection Operator
|
|
93
|
-
|
|
94
|
-
Use the `projectOperator` for client-side coordinate projection (recommended).
|
|
95
|
-
|
|
96
|
-
### Project Geometry
|
|
97
|
-
```javascript
|
|
98
|
-
import projectOperator from "@arcgis/core/geometry/operators/projectOperator.js";
|
|
99
|
-
|
|
100
|
-
// Load projection engine (required before use)
|
|
101
|
-
await projectOperator.load();
|
|
102
|
-
|
|
103
|
-
// Project geometry to WGS84
|
|
104
|
-
const projectedGeometry = projectOperator.execute(geometry, {
|
|
105
|
-
outSpatialReference: { wkid: 4326 }
|
|
106
|
-
});
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
### Project with Geographic Transformation
|
|
110
|
-
```javascript
|
|
111
|
-
import projectOperator from "@arcgis/core/geometry/operators/projectOperator.js";
|
|
112
|
-
|
|
113
|
-
await projectOperator.load();
|
|
114
|
-
|
|
115
|
-
// Project with specific transformation (e.g., NAD83 to WGS84)
|
|
116
|
-
const projectedGeometry = projectOperator.execute(geometry, {
|
|
117
|
-
outSpatialReference: { wkid: 4326 },
|
|
118
|
-
geographicTransformation: {
|
|
119
|
-
steps: [{ wkid: 108190 }] // NAD_1983_To_WGS_1984_5
|
|
120
|
-
}
|
|
121
|
-
});
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
### Check Available Transformations
|
|
125
|
-
```javascript
|
|
126
|
-
import projectOperator from "@arcgis/core/geometry/operators/projectOperator.js";
|
|
127
|
-
|
|
128
|
-
await projectOperator.load();
|
|
129
|
-
|
|
130
|
-
// Get available transformations between spatial references
|
|
131
|
-
const transformations = projectOperator.getTransformations(
|
|
132
|
-
{ wkid: 4269 }, // NAD83
|
|
133
|
-
{ wkid: 4326 } // WGS84
|
|
134
|
-
);
|
|
135
|
-
|
|
136
|
-
console.log("Available transformations:", transformations);
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
## Modern Geometry Operators
|
|
140
|
-
|
|
141
|
-
Use geometry operators for geodesic calculations (recommended).
|
|
142
|
-
|
|
143
|
-
### Geodesic Distance
|
|
144
|
-
```javascript
|
|
145
|
-
import geodesicDistance from "@arcgis/core/geometry/operators/geodesicDistanceOperator.js";
|
|
146
|
-
|
|
147
|
-
// Calculate geodesic distance between two points
|
|
148
|
-
const distance = geodesicDistance.execute(point1, point2, {
|
|
149
|
-
unit: "kilometers"
|
|
150
|
-
});
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
### Geodesic Area
|
|
154
|
-
```javascript
|
|
155
|
-
import geodesicArea from "@arcgis/core/geometry/operators/geodesicAreaOperator.js";
|
|
156
|
-
|
|
157
|
-
const area = geodesicArea.execute(polygon, {
|
|
158
|
-
unit: "square-kilometers"
|
|
159
|
-
});
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
### Geodesic Length
|
|
163
|
-
```javascript
|
|
164
|
-
import geodesicLength from "@arcgis/core/geometry/operators/geodesicLengthOperator.js";
|
|
165
|
-
|
|
166
|
-
const length = geodesicLength.execute(polyline, {
|
|
167
|
-
unit: "kilometers"
|
|
168
|
-
});
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
### Geodesic Buffer
|
|
172
|
-
```javascript
|
|
173
|
-
import geodesicBuffer from "@arcgis/core/geometry/operators/geodesicBufferOperator.js";
|
|
174
|
-
|
|
175
|
-
const buffer = geodesicBuffer.execute(point, {
|
|
176
|
-
distance: 100,
|
|
177
|
-
unit: "kilometers"
|
|
178
|
-
});
|
|
179
|
-
```
|
|
180
|
-
|
|
181
|
-
### Geodesic Densify
|
|
182
|
-
```javascript
|
|
183
|
-
import geodesicDensify from "@arcgis/core/geometry/operators/geodesicDensifyOperator.js";
|
|
184
|
-
|
|
185
|
-
const densifiedLine = geodesicDensify.execute(polyline, {
|
|
186
|
-
maxSegmentLength: 10000, // meters
|
|
187
|
-
unit: "meters"
|
|
188
|
-
});
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
## Geometry Service Projection
|
|
192
|
-
|
|
193
|
-
### Server-Side Projection
|
|
194
|
-
```javascript
|
|
195
|
-
import geometryService from "@arcgis/core/rest/geometryService.js";
|
|
196
|
-
import ProjectParameters from "@arcgis/core/rest/support/ProjectParameters.js";
|
|
197
|
-
|
|
198
|
-
const gsUrl = "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer";
|
|
199
|
-
|
|
200
|
-
const params = new ProjectParameters({
|
|
201
|
-
geometries: [geometry],
|
|
202
|
-
outSpatialReference: { wkid: 4326 }
|
|
203
|
-
});
|
|
204
|
-
|
|
205
|
-
const results = await geometryService.project(gsUrl, params);
|
|
206
|
-
const projectedGeometry = results[0];
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
## Coordinate Conversion Utilities
|
|
210
|
-
|
|
211
|
-
### Convert Coordinates
|
|
212
|
-
```javascript
|
|
213
|
-
import webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils.js";
|
|
214
|
-
|
|
215
|
-
// Web Mercator to Geographic
|
|
216
|
-
const geographicPoint = webMercatorUtils.webMercatorToGeographic(webMercatorPoint);
|
|
217
|
-
|
|
218
|
-
// Geographic to Web Mercator
|
|
219
|
-
const webMercatorPoint = webMercatorUtils.geographicToWebMercator(geographicPoint);
|
|
220
|
-
|
|
221
|
-
// Check if can project
|
|
222
|
-
const canProject = webMercatorUtils.canProject(fromSR, toSR);
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
## Display Coordinates
|
|
226
|
-
|
|
227
|
-
### Show Mouse Coordinates
|
|
228
|
-
```javascript
|
|
229
|
-
view.on("pointer-move", (event) => {
|
|
230
|
-
const mapPoint = view.toMap({ x: event.x, y: event.y });
|
|
231
|
-
|
|
232
|
-
if (mapPoint) {
|
|
233
|
-
document.getElementById("coords").textContent =
|
|
234
|
-
`Lat: ${mapPoint.latitude.toFixed(6)}, Lon: ${mapPoint.longitude.toFixed(6)}`;
|
|
235
|
-
}
|
|
236
|
-
});
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
### Format Coordinates
|
|
240
|
-
```javascript
|
|
241
|
-
import coordinateFormatter from "@arcgis/core/geometry/coordinateFormatter.js";
|
|
242
|
-
|
|
243
|
-
await coordinateFormatter.load();
|
|
244
|
-
|
|
245
|
-
// To Degrees Minutes Seconds
|
|
246
|
-
const dms = coordinateFormatter.toLatitudeLongitude(
|
|
247
|
-
point,
|
|
248
|
-
"dms", // or "dm", "dd"
|
|
249
|
-
3 // decimal places
|
|
250
|
-
);
|
|
251
|
-
// Output: "34°29'06.000\"N 117°02'56.400\"W"
|
|
252
|
-
|
|
253
|
-
// To MGRS
|
|
254
|
-
const mgrs = coordinateFormatter.toMgrs(
|
|
255
|
-
point,
|
|
256
|
-
"automatic", // conversion mode
|
|
257
|
-
5, // precision
|
|
258
|
-
false // add spaces
|
|
259
|
-
);
|
|
260
|
-
// Output: "11SNU1234567890"
|
|
261
|
-
|
|
262
|
-
// To UTM
|
|
263
|
-
const utm = coordinateFormatter.toUtm(
|
|
264
|
-
point,
|
|
265
|
-
"north-south-indicators",
|
|
266
|
-
true // add spaces
|
|
267
|
-
);
|
|
268
|
-
// Output: "11S 500000 3800000"
|
|
269
|
-
|
|
270
|
-
// From string to point
|
|
271
|
-
const pointFromDMS = coordinateFormatter.fromLatitudeLongitude(
|
|
272
|
-
"34°29'06\"N 117°02'56\"W"
|
|
273
|
-
);
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
## USNG and MGRS
|
|
277
|
-
|
|
278
|
-
### USNG Conversion
|
|
279
|
-
```javascript
|
|
280
|
-
import coordinateFormatter from "@arcgis/core/geometry/coordinateFormatter.js";
|
|
281
|
-
|
|
282
|
-
await coordinateFormatter.load();
|
|
283
|
-
|
|
284
|
-
// To USNG
|
|
285
|
-
const usng = coordinateFormatter.toUsng(point, 5, false);
|
|
286
|
-
|
|
287
|
-
// From USNG
|
|
288
|
-
const point = coordinateFormatter.fromUsng("11SNU1234567890");
|
|
289
|
-
```
|
|
290
|
-
|
|
291
|
-
## Complete Example
|
|
292
|
-
|
|
293
|
-
```html
|
|
294
|
-
<!DOCTYPE html>
|
|
295
|
-
<html>
|
|
296
|
-
<head>
|
|
297
|
-
<script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>
|
|
298
|
-
<script src="https://js.arcgis.com/4.34/"></script>
|
|
299
|
-
<script type="module" src="https://js.arcgis.com/4.34/map-components/"></script>
|
|
300
|
-
<style>
|
|
301
|
-
html, body { height: 100%; margin: 0; }
|
|
302
|
-
#coordsPanel {
|
|
303
|
-
position: absolute;
|
|
304
|
-
bottom: 50px;
|
|
305
|
-
right: 10px;
|
|
306
|
-
background: white;
|
|
307
|
-
padding: 10px;
|
|
308
|
-
}
|
|
309
|
-
</style>
|
|
310
|
-
</head>
|
|
311
|
-
<body>
|
|
312
|
-
<arcgis-map basemap="topo-vector" center="-117.049, 34.485" zoom="12">
|
|
313
|
-
<arcgis-zoom slot="top-left"></arcgis-zoom>
|
|
314
|
-
<arcgis-coordinate-conversion slot="bottom-left"></arcgis-coordinate-conversion>
|
|
315
|
-
</arcgis-map>
|
|
316
|
-
|
|
317
|
-
<div id="coordsPanel" class="esri-widget">
|
|
318
|
-
<div id="latlon">Move mouse to see coordinates</div>
|
|
319
|
-
<div id="utm"></div>
|
|
320
|
-
<div id="mgrs"></div>
|
|
321
|
-
</div>
|
|
322
|
-
|
|
323
|
-
<script type="module">
|
|
324
|
-
import coordinateFormatter from "@arcgis/core/geometry/coordinateFormatter.js";
|
|
325
|
-
|
|
326
|
-
await coordinateFormatter.load();
|
|
327
|
-
|
|
328
|
-
const viewElement = document.querySelector("arcgis-map");
|
|
329
|
-
await viewElement.viewOnReady();
|
|
330
|
-
|
|
331
|
-
viewElement.addEventListener("arcgisViewPointerMove", (event) => {
|
|
332
|
-
const point = viewElement.view.toMap({
|
|
333
|
-
x: event.detail.x,
|
|
334
|
-
y: event.detail.y
|
|
335
|
-
});
|
|
336
|
-
|
|
337
|
-
if (point) {
|
|
338
|
-
document.getElementById("latlon").textContent =
|
|
339
|
-
`Lat/Lon: ${point.latitude.toFixed(6)}, ${point.longitude.toFixed(6)}`;
|
|
340
|
-
|
|
341
|
-
document.getElementById("utm").textContent =
|
|
342
|
-
`UTM: ${coordinateFormatter.toUtm(point, "north-south-indicators", true)}`;
|
|
343
|
-
|
|
344
|
-
document.getElementById("mgrs").textContent =
|
|
345
|
-
`MGRS: ${coordinateFormatter.toMgrs(point, "automatic", 5, true)}`;
|
|
346
|
-
}
|
|
347
|
-
});
|
|
348
|
-
</script>
|
|
349
|
-
</body>
|
|
350
|
-
</html>
|
|
351
|
-
```
|
|
352
|
-
|
|
353
|
-
## Common Pitfalls
|
|
354
|
-
|
|
355
|
-
1. **Load projection engine**: Must call `projectOperator.load()` before using
|
|
356
|
-
|
|
357
|
-
2. **Coordinate order**: Geographic is (lon, lat), not (lat, lon)
|
|
358
|
-
|
|
359
|
-
3. **WKID vs WKT**: Use WKID when available, WKT for custom projections
|
|
360
|
-
|
|
361
|
-
4. **Datum transformations**: May be needed for accurate results between datums
|
|
362
|
-
|
|
363
|
-
5. **Client vs server**: Use client-side for speed, server for complex transformations
|
|
364
|
-
|
|
365
|
-
---
|
|
366
|
-
|
|
367
|
-
## Deprecated APIs
|
|
368
|
-
|
|
369
|
-
> **DEPRECATED:** The APIs below are deprecated. Use the modern alternatives shown above.
|
|
370
|
-
|
|
371
|
-
### Migration Guide
|
|
372
|
-
|
|
373
|
-
| Deprecated | Modern Replacement |
|
|
374
|
-
|------------|-------------------|
|
|
375
|
-
| `projection.project(geom, sr)` | `projectOperator.execute(geom, { outSpatialReference: sr })` |
|
|
376
|
-
| `projection.load()` | `projectOperator.load()` |
|
|
377
|
-
| `projection.getTransformations(from, to)` | `projectOperator.getTransformations(from, to)` |
|
|
378
|
-
| `geodesicUtils.geodesicDistance(p1, p2, unit)` | `geodesicDistanceOperator.execute(p1, p2, { unit })` |
|
|
379
|
-
| `geodesicUtils.geodesicArea(geom, unit)` | `geodesicAreaOperator.execute(geom, { unit })` |
|
|
380
|
-
| `geodesicUtils.geodesicLength(geom, unit)` | `geodesicLengthOperator.execute(geom, { unit })` |
|
|
381
|
-
|
|
382
|
-
### Legacy projection Module (Deprecated since 4.32)
|
|
383
|
-
```javascript
|
|
384
|
-
// DEPRECATED - Use projectOperator instead
|
|
385
|
-
import projection from "@arcgis/core/geometry/projection.js";
|
|
386
|
-
|
|
387
|
-
await projection.load();
|
|
388
|
-
|
|
389
|
-
const projectedGeometry = projection.project(
|
|
390
|
-
geometry,
|
|
391
|
-
new SpatialReference({ wkid: 4326 })
|
|
392
|
-
);
|
|
393
|
-
```
|
|
394
|
-
|
|
395
|
-
### Legacy geodesicUtils (Deprecated since 4.33)
|
|
396
|
-
```javascript
|
|
397
|
-
// DEPRECATED - Use geodesicDistanceOperator instead
|
|
398
|
-
import geodesicUtils from "@arcgis/core/geometry/support/geodesicUtils.js";
|
|
399
|
-
|
|
400
|
-
const distance = geodesicUtils.geodesicDistance(
|
|
401
|
-
point1,
|
|
402
|
-
point2,
|
|
403
|
-
"kilometers"
|
|
404
|
-
);
|
|
405
|
-
```
|
|
406
|
-
|
|
1
|
+
---
|
|
2
|
+
name: arcgis-coordinates-projection
|
|
3
|
+
description: Work with coordinate systems, projections, and coordinate conversion. Use for transforming coordinates and displaying position in multiple formats.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# ArcGIS Coordinates and Projection
|
|
7
|
+
|
|
8
|
+
Use this skill for coordinate conversion, projection transformations, and spatial reference handling.
|
|
9
|
+
|
|
10
|
+
> **Important:** The `projection` module is **deprecated** as of version 4.32 and `geodesicUtils` is **deprecated** as of version 4.33. Use the [projectOperator](#modern-projection-operator) and [geometry operators](#modern-geometry-operators) instead. See the [Deprecation Notice](#deprecated-apis) section for migration guidance.
|
|
11
|
+
|
|
12
|
+
## Coordinate Conversion Component
|
|
13
|
+
|
|
14
|
+
### Basic Coordinate Conversion
|
|
15
|
+
```html
|
|
16
|
+
<arcgis-map basemap="topo-vector" center="-117.049, 34.485" zoom="12">
|
|
17
|
+
<arcgis-zoom slot="top-left"></arcgis-zoom>
|
|
18
|
+
<arcgis-coordinate-conversion slot="bottom-left"></arcgis-coordinate-conversion>
|
|
19
|
+
</arcgis-map>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### Coordinate Conversion Widget (Core API)
|
|
23
|
+
```javascript
|
|
24
|
+
import CoordinateConversion from "@arcgis/core/widgets/CoordinateConversion.js";
|
|
25
|
+
|
|
26
|
+
const ccWidget = new CoordinateConversion({
|
|
27
|
+
view: view
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
view.ui.add(ccWidget, "bottom-left");
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Custom Coordinate Formats
|
|
34
|
+
```javascript
|
|
35
|
+
import CoordinateConversion from "@arcgis/core/widgets/CoordinateConversion.js";
|
|
36
|
+
import Format from "@arcgis/core/widgets/CoordinateConversion/support/Format.js";
|
|
37
|
+
|
|
38
|
+
// Create custom format
|
|
39
|
+
const customFormat = new Format({
|
|
40
|
+
name: "Custom XY",
|
|
41
|
+
conversionInfo: {
|
|
42
|
+
spatialReference: { wkid: 4326 },
|
|
43
|
+
reverseConvert: (string) => {
|
|
44
|
+
const parts = string.split(",");
|
|
45
|
+
return [parseFloat(parts[0]), parseFloat(parts[1])];
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
coordinateSegments: [
|
|
49
|
+
{ alias: "Lon", description: "Longitude", searchPattern: "X" },
|
|
50
|
+
{ alias: "Lat", description: "Latitude", searchPattern: "Y" }
|
|
51
|
+
],
|
|
52
|
+
defaultPattern: "X°, Y°"
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
const ccWidget = new CoordinateConversion({
|
|
56
|
+
view: view,
|
|
57
|
+
formats: [customFormat]
|
|
58
|
+
});
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Spatial Reference
|
|
62
|
+
|
|
63
|
+
### Create Spatial Reference
|
|
64
|
+
```javascript
|
|
65
|
+
import SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
|
|
66
|
+
|
|
67
|
+
// By WKID
|
|
68
|
+
const wgs84 = new SpatialReference({ wkid: 4326 });
|
|
69
|
+
const webMercator = new SpatialReference({ wkid: 102100 });
|
|
70
|
+
|
|
71
|
+
// By WKT
|
|
72
|
+
const customSR = new SpatialReference({
|
|
73
|
+
wkt: 'PROJCS["NAD_1983_StatePlane_California_VI_FIPS_0406_Feet"...'
|
|
74
|
+
});
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Common Spatial References
|
|
78
|
+
```javascript
|
|
79
|
+
// WGS 84 (Geographic)
|
|
80
|
+
const wgs84 = { wkid: 4326 };
|
|
81
|
+
|
|
82
|
+
// Web Mercator (Projected)
|
|
83
|
+
const webMercator = { wkid: 102100 }; // or 3857
|
|
84
|
+
|
|
85
|
+
// UTM Zone 11N
|
|
86
|
+
const utm11n = { wkid: 32611 };
|
|
87
|
+
|
|
88
|
+
// State Plane (example)
|
|
89
|
+
const statePlane = { wkid: 2230 };
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Modern Projection Operator
|
|
93
|
+
|
|
94
|
+
Use the `projectOperator` for client-side coordinate projection (recommended).
|
|
95
|
+
|
|
96
|
+
### Project Geometry
|
|
97
|
+
```javascript
|
|
98
|
+
import projectOperator from "@arcgis/core/geometry/operators/projectOperator.js";
|
|
99
|
+
|
|
100
|
+
// Load projection engine (required before use)
|
|
101
|
+
await projectOperator.load();
|
|
102
|
+
|
|
103
|
+
// Project geometry to WGS84
|
|
104
|
+
const projectedGeometry = projectOperator.execute(geometry, {
|
|
105
|
+
outSpatialReference: { wkid: 4326 }
|
|
106
|
+
});
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Project with Geographic Transformation
|
|
110
|
+
```javascript
|
|
111
|
+
import projectOperator from "@arcgis/core/geometry/operators/projectOperator.js";
|
|
112
|
+
|
|
113
|
+
await projectOperator.load();
|
|
114
|
+
|
|
115
|
+
// Project with specific transformation (e.g., NAD83 to WGS84)
|
|
116
|
+
const projectedGeometry = projectOperator.execute(geometry, {
|
|
117
|
+
outSpatialReference: { wkid: 4326 },
|
|
118
|
+
geographicTransformation: {
|
|
119
|
+
steps: [{ wkid: 108190 }] // NAD_1983_To_WGS_1984_5
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Check Available Transformations
|
|
125
|
+
```javascript
|
|
126
|
+
import projectOperator from "@arcgis/core/geometry/operators/projectOperator.js";
|
|
127
|
+
|
|
128
|
+
await projectOperator.load();
|
|
129
|
+
|
|
130
|
+
// Get available transformations between spatial references
|
|
131
|
+
const transformations = projectOperator.getTransformations(
|
|
132
|
+
{ wkid: 4269 }, // NAD83
|
|
133
|
+
{ wkid: 4326 } // WGS84
|
|
134
|
+
);
|
|
135
|
+
|
|
136
|
+
console.log("Available transformations:", transformations);
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
## Modern Geometry Operators
|
|
140
|
+
|
|
141
|
+
Use geometry operators for geodesic calculations (recommended).
|
|
142
|
+
|
|
143
|
+
### Geodesic Distance
|
|
144
|
+
```javascript
|
|
145
|
+
import geodesicDistance from "@arcgis/core/geometry/operators/geodesicDistanceOperator.js";
|
|
146
|
+
|
|
147
|
+
// Calculate geodesic distance between two points
|
|
148
|
+
const distance = geodesicDistance.execute(point1, point2, {
|
|
149
|
+
unit: "kilometers"
|
|
150
|
+
});
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Geodesic Area
|
|
154
|
+
```javascript
|
|
155
|
+
import geodesicArea from "@arcgis/core/geometry/operators/geodesicAreaOperator.js";
|
|
156
|
+
|
|
157
|
+
const area = geodesicArea.execute(polygon, {
|
|
158
|
+
unit: "square-kilometers"
|
|
159
|
+
});
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### Geodesic Length
|
|
163
|
+
```javascript
|
|
164
|
+
import geodesicLength from "@arcgis/core/geometry/operators/geodesicLengthOperator.js";
|
|
165
|
+
|
|
166
|
+
const length = geodesicLength.execute(polyline, {
|
|
167
|
+
unit: "kilometers"
|
|
168
|
+
});
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### Geodesic Buffer
|
|
172
|
+
```javascript
|
|
173
|
+
import geodesicBuffer from "@arcgis/core/geometry/operators/geodesicBufferOperator.js";
|
|
174
|
+
|
|
175
|
+
const buffer = geodesicBuffer.execute(point, {
|
|
176
|
+
distance: 100,
|
|
177
|
+
unit: "kilometers"
|
|
178
|
+
});
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
### Geodesic Densify
|
|
182
|
+
```javascript
|
|
183
|
+
import geodesicDensify from "@arcgis/core/geometry/operators/geodesicDensifyOperator.js";
|
|
184
|
+
|
|
185
|
+
const densifiedLine = geodesicDensify.execute(polyline, {
|
|
186
|
+
maxSegmentLength: 10000, // meters
|
|
187
|
+
unit: "meters"
|
|
188
|
+
});
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
## Geometry Service Projection
|
|
192
|
+
|
|
193
|
+
### Server-Side Projection
|
|
194
|
+
```javascript
|
|
195
|
+
import geometryService from "@arcgis/core/rest/geometryService.js";
|
|
196
|
+
import ProjectParameters from "@arcgis/core/rest/support/ProjectParameters.js";
|
|
197
|
+
|
|
198
|
+
const gsUrl = "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer";
|
|
199
|
+
|
|
200
|
+
const params = new ProjectParameters({
|
|
201
|
+
geometries: [geometry],
|
|
202
|
+
outSpatialReference: { wkid: 4326 }
|
|
203
|
+
});
|
|
204
|
+
|
|
205
|
+
const results = await geometryService.project(gsUrl, params);
|
|
206
|
+
const projectedGeometry = results[0];
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
## Coordinate Conversion Utilities
|
|
210
|
+
|
|
211
|
+
### Convert Coordinates
|
|
212
|
+
```javascript
|
|
213
|
+
import webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils.js";
|
|
214
|
+
|
|
215
|
+
// Web Mercator to Geographic
|
|
216
|
+
const geographicPoint = webMercatorUtils.webMercatorToGeographic(webMercatorPoint);
|
|
217
|
+
|
|
218
|
+
// Geographic to Web Mercator
|
|
219
|
+
const webMercatorPoint = webMercatorUtils.geographicToWebMercator(geographicPoint);
|
|
220
|
+
|
|
221
|
+
// Check if can project
|
|
222
|
+
const canProject = webMercatorUtils.canProject(fromSR, toSR);
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
## Display Coordinates
|
|
226
|
+
|
|
227
|
+
### Show Mouse Coordinates
|
|
228
|
+
```javascript
|
|
229
|
+
view.on("pointer-move", (event) => {
|
|
230
|
+
const mapPoint = view.toMap({ x: event.x, y: event.y });
|
|
231
|
+
|
|
232
|
+
if (mapPoint) {
|
|
233
|
+
document.getElementById("coords").textContent =
|
|
234
|
+
`Lat: ${mapPoint.latitude.toFixed(6)}, Lon: ${mapPoint.longitude.toFixed(6)}`;
|
|
235
|
+
}
|
|
236
|
+
});
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
### Format Coordinates
|
|
240
|
+
```javascript
|
|
241
|
+
import coordinateFormatter from "@arcgis/core/geometry/coordinateFormatter.js";
|
|
242
|
+
|
|
243
|
+
await coordinateFormatter.load();
|
|
244
|
+
|
|
245
|
+
// To Degrees Minutes Seconds
|
|
246
|
+
const dms = coordinateFormatter.toLatitudeLongitude(
|
|
247
|
+
point,
|
|
248
|
+
"dms", // or "dm", "dd"
|
|
249
|
+
3 // decimal places
|
|
250
|
+
);
|
|
251
|
+
// Output: "34°29'06.000\"N 117°02'56.400\"W"
|
|
252
|
+
|
|
253
|
+
// To MGRS
|
|
254
|
+
const mgrs = coordinateFormatter.toMgrs(
|
|
255
|
+
point,
|
|
256
|
+
"automatic", // conversion mode
|
|
257
|
+
5, // precision
|
|
258
|
+
false // add spaces
|
|
259
|
+
);
|
|
260
|
+
// Output: "11SNU1234567890"
|
|
261
|
+
|
|
262
|
+
// To UTM
|
|
263
|
+
const utm = coordinateFormatter.toUtm(
|
|
264
|
+
point,
|
|
265
|
+
"north-south-indicators",
|
|
266
|
+
true // add spaces
|
|
267
|
+
);
|
|
268
|
+
// Output: "11S 500000 3800000"
|
|
269
|
+
|
|
270
|
+
// From string to point
|
|
271
|
+
const pointFromDMS = coordinateFormatter.fromLatitudeLongitude(
|
|
272
|
+
"34°29'06\"N 117°02'56\"W"
|
|
273
|
+
);
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
## USNG and MGRS
|
|
277
|
+
|
|
278
|
+
### USNG Conversion
|
|
279
|
+
```javascript
|
|
280
|
+
import coordinateFormatter from "@arcgis/core/geometry/coordinateFormatter.js";
|
|
281
|
+
|
|
282
|
+
await coordinateFormatter.load();
|
|
283
|
+
|
|
284
|
+
// To USNG
|
|
285
|
+
const usng = coordinateFormatter.toUsng(point, 5, false);
|
|
286
|
+
|
|
287
|
+
// From USNG
|
|
288
|
+
const point = coordinateFormatter.fromUsng("11SNU1234567890");
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
## Complete Example
|
|
292
|
+
|
|
293
|
+
```html
|
|
294
|
+
<!DOCTYPE html>
|
|
295
|
+
<html>
|
|
296
|
+
<head>
|
|
297
|
+
<script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>
|
|
298
|
+
<script src="https://js.arcgis.com/4.34/"></script>
|
|
299
|
+
<script type="module" src="https://js.arcgis.com/4.34/map-components/"></script>
|
|
300
|
+
<style>
|
|
301
|
+
html, body { height: 100%; margin: 0; }
|
|
302
|
+
#coordsPanel {
|
|
303
|
+
position: absolute;
|
|
304
|
+
bottom: 50px;
|
|
305
|
+
right: 10px;
|
|
306
|
+
background: white;
|
|
307
|
+
padding: 10px;
|
|
308
|
+
}
|
|
309
|
+
</style>
|
|
310
|
+
</head>
|
|
311
|
+
<body>
|
|
312
|
+
<arcgis-map basemap="topo-vector" center="-117.049, 34.485" zoom="12">
|
|
313
|
+
<arcgis-zoom slot="top-left"></arcgis-zoom>
|
|
314
|
+
<arcgis-coordinate-conversion slot="bottom-left"></arcgis-coordinate-conversion>
|
|
315
|
+
</arcgis-map>
|
|
316
|
+
|
|
317
|
+
<div id="coordsPanel" class="esri-widget">
|
|
318
|
+
<div id="latlon">Move mouse to see coordinates</div>
|
|
319
|
+
<div id="utm"></div>
|
|
320
|
+
<div id="mgrs"></div>
|
|
321
|
+
</div>
|
|
322
|
+
|
|
323
|
+
<script type="module">
|
|
324
|
+
import coordinateFormatter from "@arcgis/core/geometry/coordinateFormatter.js";
|
|
325
|
+
|
|
326
|
+
await coordinateFormatter.load();
|
|
327
|
+
|
|
328
|
+
const viewElement = document.querySelector("arcgis-map");
|
|
329
|
+
await viewElement.viewOnReady();
|
|
330
|
+
|
|
331
|
+
viewElement.addEventListener("arcgisViewPointerMove", (event) => {
|
|
332
|
+
const point = viewElement.view.toMap({
|
|
333
|
+
x: event.detail.x,
|
|
334
|
+
y: event.detail.y
|
|
335
|
+
});
|
|
336
|
+
|
|
337
|
+
if (point) {
|
|
338
|
+
document.getElementById("latlon").textContent =
|
|
339
|
+
`Lat/Lon: ${point.latitude.toFixed(6)}, ${point.longitude.toFixed(6)}`;
|
|
340
|
+
|
|
341
|
+
document.getElementById("utm").textContent =
|
|
342
|
+
`UTM: ${coordinateFormatter.toUtm(point, "north-south-indicators", true)}`;
|
|
343
|
+
|
|
344
|
+
document.getElementById("mgrs").textContent =
|
|
345
|
+
`MGRS: ${coordinateFormatter.toMgrs(point, "automatic", 5, true)}`;
|
|
346
|
+
}
|
|
347
|
+
});
|
|
348
|
+
</script>
|
|
349
|
+
</body>
|
|
350
|
+
</html>
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
## Common Pitfalls
|
|
354
|
+
|
|
355
|
+
1. **Load projection engine**: Must call `projectOperator.load()` before using
|
|
356
|
+
|
|
357
|
+
2. **Coordinate order**: Geographic is (lon, lat), not (lat, lon)
|
|
358
|
+
|
|
359
|
+
3. **WKID vs WKT**: Use WKID when available, WKT for custom projections
|
|
360
|
+
|
|
361
|
+
4. **Datum transformations**: May be needed for accurate results between datums
|
|
362
|
+
|
|
363
|
+
5. **Client vs server**: Use client-side for speed, server for complex transformations
|
|
364
|
+
|
|
365
|
+
---
|
|
366
|
+
|
|
367
|
+
## Deprecated APIs
|
|
368
|
+
|
|
369
|
+
> **DEPRECATED:** The APIs below are deprecated. Use the modern alternatives shown above.
|
|
370
|
+
|
|
371
|
+
### Migration Guide
|
|
372
|
+
|
|
373
|
+
| Deprecated | Modern Replacement |
|
|
374
|
+
|------------|-------------------|
|
|
375
|
+
| `projection.project(geom, sr)` | `projectOperator.execute(geom, { outSpatialReference: sr })` |
|
|
376
|
+
| `projection.load()` | `projectOperator.load()` |
|
|
377
|
+
| `projection.getTransformations(from, to)` | `projectOperator.getTransformations(from, to)` |
|
|
378
|
+
| `geodesicUtils.geodesicDistance(p1, p2, unit)` | `geodesicDistanceOperator.execute(p1, p2, { unit })` |
|
|
379
|
+
| `geodesicUtils.geodesicArea(geom, unit)` | `geodesicAreaOperator.execute(geom, { unit })` |
|
|
380
|
+
| `geodesicUtils.geodesicLength(geom, unit)` | `geodesicLengthOperator.execute(geom, { unit })` |
|
|
381
|
+
|
|
382
|
+
### Legacy projection Module (Deprecated since 4.32)
|
|
383
|
+
```javascript
|
|
384
|
+
// DEPRECATED - Use projectOperator instead
|
|
385
|
+
import projection from "@arcgis/core/geometry/projection.js";
|
|
386
|
+
|
|
387
|
+
await projection.load();
|
|
388
|
+
|
|
389
|
+
const projectedGeometry = projection.project(
|
|
390
|
+
geometry,
|
|
391
|
+
new SpatialReference({ wkid: 4326 })
|
|
392
|
+
);
|
|
393
|
+
```
|
|
394
|
+
|
|
395
|
+
### Legacy geodesicUtils (Deprecated since 4.33)
|
|
396
|
+
```javascript
|
|
397
|
+
// DEPRECATED - Use geodesicDistanceOperator instead
|
|
398
|
+
import geodesicUtils from "@arcgis/core/geometry/support/geodesicUtils.js";
|
|
399
|
+
|
|
400
|
+
const distance = geodesicUtils.geodesicDistance(
|
|
401
|
+
point1,
|
|
402
|
+
point2,
|
|
403
|
+
"kilometers"
|
|
404
|
+
);
|
|
405
|
+
```
|
|
406
|
+
|