Is there a way to click the SceneView to capture the elevation info of the the default "world-elevation" layer ?
Getting coordinates can be done fairly easily (see code below) but can the same kind of thing be done to get an elevation reading when the user clicks on the SceneView? The ImageServiceIdentifyTask seems to be only for an added custom ElevationLayer and the documentation is a bit confusing.
//Click on View for coordinates to display
view.on("click", function (event) {
// Get the coordinates of the click on the view
var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
setTimeout(function () {
dom.byId("info").innerHTML = lat + ", " + lon;
}, 50);
});
Solved! Go to Solution.
Rene,
Ok this is great! Thanks so much for pointing me in the right direction. Here is my code snippet for clicking on the SceneView and getting elevation to apear in text display in lower-right corner of map.
In Require([....
"esri/layers/FeatureLayer",
"dojo/promise/all",
Get that handy World Elevation Layer:
// Create elevation layer
var worldGround = new ElevationLayer({
url: "http://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
});
//Construct Map
var map = new Map({
basemap: "streets-relief-vector",
showAttribution: false,
//ground: "world-elevation"
ground: {
layers: [worldGround]
}
});
Code that gets elevation:
//Click on View for elevation to display
var resultsContainer = document.getElementById("resultsDiv");
view.on("click", function (event) {
resultsContainer.innerHTML = "Querying elevation...";
// Query both elevation layers for the elevation at the clicked map position
var position = event.mapPoint;
var queryWorldElevation = worldGround.queryElevation(
position);;
// When both query promises resolve execute the following code
all([queryWorldElevation])
.then(function (results) {
var posBeforeLandslide = results[0].geometry;
// Compute and display the difference in elevation
var elevationMeters = Math.abs(posBeforeLandslide.z);
elevationFeet = (elevationMeters / 0.3048);
resultsContainer.innerHTML = "Elevation: " +
elevationMeters.toFixed(2) + " meters, " + elevationFeet.toFixed(0) + " feet";
})
.otherwise(function (error) {
resultsContainer.innerHTML = "Elevation query failed (" +
error.message + ")";
});
});
My elevation display div in <body>:
<!-- Display coordinates -->
<span id="resultsDiv" style="position:absolute; right:15px; bottom:30px; font-size:15px; color: cornflowerblue; font-weight: bold; color:#759dc0; z-index:50;">Click map for elevation</span>
I'm not sure if ESRI provides this capability in a free service, like geocoding a single address. I ran into this while trying to build an app and ultimately decided to build a Google Maps based app because of this.
If your area of interest lies solely within the U.S., you can use the USGS Elevation Point Query Service to return an elevation given a lat/long. It works quite well (but I wanted to ensure worldwide coverage). I'd have to dig to find the code I did write to take advantage of this. You basically query it like a REST endpoint query (AJAX call, etc).
http://ned.usgs.gov/epqs/pqs.php?x=-120&y=47&units=Feet&output=json
Steve
In 4.2, we introduced the ElevationLayer Query API
ElevationLayer | API Reference | ArcGIS API for JavaScript 4.2
Query Elevation (Points) | ArcGIS API for JavaScript 4.2
I think that will do what you are looking for.
Rene,
Ok this is great! Thanks so much for pointing me in the right direction. Here is my code snippet for clicking on the SceneView and getting elevation to apear in text display in lower-right corner of map.
In Require([....
"esri/layers/FeatureLayer",
"dojo/promise/all",
Get that handy World Elevation Layer:
// Create elevation layer
var worldGround = new ElevationLayer({
url: "http://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
});
//Construct Map
var map = new Map({
basemap: "streets-relief-vector",
showAttribution: false,
//ground: "world-elevation"
ground: {
layers: [worldGround]
}
});
Code that gets elevation:
//Click on View for elevation to display
var resultsContainer = document.getElementById("resultsDiv");
view.on("click", function (event) {
resultsContainer.innerHTML = "Querying elevation...";
// Query both elevation layers for the elevation at the clicked map position
var position = event.mapPoint;
var queryWorldElevation = worldGround.queryElevation(
position);;
// When both query promises resolve execute the following code
all([queryWorldElevation])
.then(function (results) {
var posBeforeLandslide = results[0].geometry;
// Compute and display the difference in elevation
var elevationMeters = Math.abs(posBeforeLandslide.z);
elevationFeet = (elevationMeters / 0.3048);
resultsContainer.innerHTML = "Elevation: " +
elevationMeters.toFixed(2) + " meters, " + elevationFeet.toFixed(0) + " feet";
})
.otherwise(function (error) {
resultsContainer.innerHTML = "Elevation query failed (" +
error.message + ")";
});
});
My elevation display div in <body>:
<!-- Display coordinates -->
<span id="resultsDiv" style="position:absolute; right:15px; bottom:30px; font-size:15px; color: cornflowerblue; font-weight: bold; color:#759dc0; z-index:50;">Click map for elevation</span>