Hi all,
like a say, I try to make custom wab widget for my app, can help me someone. I have ArcGIS API for JavaScript Sandbox code and need code for WAB..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>CoordinateConversion widget - Custom Formats - 4.14</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
<script src="https://js.arcgis.com/4.14/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/widgets/CoordinateConversion",
"esri/widgets/CoordinateConversion/support/Format",
"esri/widgets/CoordinateConversion/support/Conversion",
"esri/geometry/Point",
"esri/geometry/support/webMercatorUtils",
"esri/geometry/SpatialReference"
], function(
Map,
SceneView,
CoordinateConversion,
Format,
Conversion,
Point,
webMercatorUtils,
SpatialReference
) {
var map = new Map({
basemap: "hybrid",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
clippingArea: {
xmin: -124.45,
xmax: -119.99,
ymax: 43.01,
ymin: 39.59
},
center: {
x: -122.22,
y: 41.3
},
zoom: 10,
viewingMode: "local"
});
view.when(function(view) {
view.goTo({ tilt: 45 });
});
var ccWidget = new CoordinateConversion({
view: view
});
view.ui.add(ccWidget, "top-right");
var numberSearchPattern = /-?\d+[\.]?\d*/;
var newFormat = new Format({
name: "XYZ",
conversionInfo: {
convert: function(point) {
var returnPoint = point.spatialReference.isWGS84
? point
: webMercatorUtils.webMercatorToGeographic(point);
var x = returnPoint.x.toFixed(4);
var y = returnPoint.y.toFixed(4);
var z = returnPoint.z.toFixed(4);
return {
location: returnPoint,
coordinate: `${x}, ${y}, ${z}`
};
},
reverseConvert: function(string) {
var parts = string.split(",");
return new Point({
x: parseFloat(parts[0]),
y: parseFloat(parts[1]),
z: parseFloat(parts[2]),
spatialReference: { wkid: 4326 }
});
}
},
coordinateSegments: [
{
alias: "X",
description: "Longitude",
searchPattern: numberSearchPattern
},
{
alias: "Y",
description: "Latitude",
searchPattern: numberSearchPattern
},
{
alias: "Z",
description: "Elevation",
searchPattern: numberSearchPattern
}
],
defaultPattern: "X°, Y°, Z"
});
ccWidget.formats.add(newFormat);
var stateplaneCA = new Format({
name: "SPS I",
conversionInfo: {
spatialReference: new SpatialReference({ wkid: 102241 }),
reverseConvert: function(string, format) {
var 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"
});
ccWidget.formats.add(stateplaneCA);
ccWidget.conversions.splice(
0,
0,
new Conversion({
format: newFormat
}),
new Conversion({
format: stateplaneCA
})
);
});
</script>
</head>
<body class="calcite">
<div id="viewDiv"></div>
</body>
</html>