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, }), );