This sample demonstrates how to add custom formats to the Coordinate Conversion component in a 3D Scene.
First, we need to import some classes to help with the new formatting and conversion options.
const [Conversion, Format, Point, SpatialReference, webMercatorUtils] = await $arcgis.import([
"@arcgis/core/widgets/CoordinateConversion/support/Conversion.js",
"@arcgis/core/widgets/CoordinateConversion/support/Format.js",
"@arcgis/core/geometry/Point.js",
"@arcgis/core/geometry/SpatialReference.js",
"@arcgis/core/geometry/support/webMercatorUtils.js",
]);
Create a new custom Format to define a convert function and a reverse convert function, or a SpatialReference and a reverse convert function. If a SpatialReference is provided, a convert function is not required; the Geometry Service will be used to project as needed. Adding this new format will allow elevation information to be displayed.
const coordinateConversion = document.querySelector("arcgis-coordinate-conversion");
await coordinateConversion.componentOnReady();
// Regular expression to find a number
const numberSearchPattern = /-?\d+[\.]?\d*/;
/**
* Create a new Format called XYZ, which looks like: "<Latitude>, <Longitude>, <Z>"
*
* We need to define a convert function, a reverse convert function,
* and some formatting information.
*/
const newFormat = new Format({
// The format's name should be unique with respect to other formats used by the component
name: "XYZ",
conversionInfo: {
// Define a convert function
// Point -> Position
convert: function (point) {
const returnPoint = point.spatialReference.isWGS84
? point
: webMercatorUtils.webMercatorToGeographic(point);
const x = returnPoint.x.toFixed(4);
const y = returnPoint.y.toFixed(4);
const z = returnPoint.z.toFixed(4);
return {
location: returnPoint,
coordinate: `${x}, ${y}, ${z}`,
};
},
// Define a reverse convert function
// String -> Point
reverseConvert: function (string) {
const parts = string.split(",");
return new Point({
x: parseFloat(parts[0]),
y: parseFloat(parts[1]),
z: parseFloat(parts[2]),
spatialReference: { wkid: 4326 },
});
},
},
// Define each segment of the coordinate
coordinateSegments: [
{
alias: "X",
description: "Longitude",
searchPattern: numberSearchPattern,
},
{
alias: "Y",
description: "Latitude",
searchPattern: numberSearchPattern,
},
{
alias: "Z",
description: "Elevation",
searchPattern: numberSearchPattern,
},
],
defaultPattern: "X°, Y°, Z",
});
Now we add another new custom Format in the California StatePlane Zone I Spatial Reference, which will be useful as our map is centered around Sequoia National Park.
/**
* Create a new Format 'SPS I', which looks like: "<X>, <Y>" in the
* California StatePlane Zone I Spatial Reference, described by wkid 102241
*
* For this Format, we only need to provide a spatialReference with the correct
* wkid. The geometry service can take care of the rest.
*/
const stateplaneCA = new Format({
name: "SPS I",
conversionInfo: {
spatialReference: new SpatialReference({ wkid: 102241 }),
reverseConvert: function (string, format) {
const parts = string.split(",");
return new Point({
x: parseFloat(parts[0]),
y: parseFloat(parts[1]),
spatialReference: { wkid: 102241 },
});
},
},
coordinateSegments: [
{
alias: "X",
description: "easting",
searchPattern: numberSearchPattern,
},
{
alias: "Y",
description: "northing",
searchPattern: numberSearchPattern,
},
],
defaultPattern: "X, Y",
});
Lastly, we set-up our new spatial references, add the new formats to the Coordinate Conversion component, and then move the new formats to the top of the list. We set-up our Coordinate Conversion component to be expanded by default, so we should see these new formats available immediately.
// set custom spatial references
coordinateConversion.spatialReferences = [
new SpatialReference({ wkid: 2263 }), // State Plane New York Long Island (ftUS)
new SpatialReference({ wkid: 26918 }), // UTM Zone 18N
];
coordinateConversion.formats.add(newFormat);
coordinateConversion.formats.add(stateplaneCA);
// Add the two custom formats to the top of the component's display
coordinateConversion.conversions.splice(
0,
0,
new Conversion({
format: newFormat,
}),
new Conversion({
format: stateplaneCA,
}),
);