Thank you. This is the almost clean version, where I haven’t any queryElevation() stuff in there:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Add Graphics to a SceneView - 4.10</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#outputMessages {
position: absolute;
z-index: 70;
top: 0px;
right: 0;
bottom: 0;
box-sizing: border-box;
padding: 20px;
height: 100%;
width: 350px;
background: rgba(0, 0, 0, 0.7);
color: white;
font-size: 14px;
line-height: 30px;
overflow: auto;
}
#outputMessages span {
color: #f7be81;
font-weight: bold;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/Graphic",
"esri/geometry/Polyline",
"esri/layers/ElevationLayer",
"esri/core/promiseUtils",
"esri/core/watchUtils",
"esri/layers/GraphicsLayer",
], function(
Map,
SceneView,
Graphic,
Polyline,
ElevationLayer,
promiseUtils,watchUtils, GraphicsLayer
) {
// Create elevation layers
var beforeLandslideUrl =
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/OsoLandslide/OsoLandslide_Before_3DTerrain/ImageServer/";
var beforeLandslideLayer = new ElevationLayer({
url: beforeLandslideUrl
});
// Create Map and View
var map = new Map({
basemap: "satellite",
ground: {
layers: [beforeLandslideLayer]
}
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
// initial view:
heading: 332.8,
tilt: 65.5,
position: {
x: -13563643,
y: 6153016,
z: 577,
spatialReference: {
wkid: 3857
}
},
heading: 0.34445102566290225,
tilt: 82.95536300536367
}
});
var outputMessages = document.getElementById("outputMessages");
var cameraX, cameraY, point, markerSymbol;
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
size : 100,
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 0.2
}
};
watchUtils.whenTrue(view, "stationary", function() {
graphicsLayer.removeAll();
cameraX = view.camera.position.longitude;
cameraY = view.camera.position.latitude + 0.20;
point = {
type: "point", // autocasts as new Point()
x: cameraX,
y: cameraY
};
graphicsLayer.add(new Graphic({
geometry: point,
symbol: markerSymbol,
}));
});
watchUtils.whenTrue(view, "stationary", function() {
// Get the new center of the view only when view is stationary.
var info = "<br> <span> the view center changed. </span> x: " +
cameraX + " y: " +
cameraY + " Z: " +
" Camera Z " + view.camera.position.z
displayMessage(info);
});
function displayMessage(info) {
outputMessages.innerHTML += info;
outputMessages.scrollTop = outputMessages.scrollHeight;
}
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="outputMessages"></div>
<div id="titleDiv"></div>
</div>
</body>
</html>
I’m trying to get this implemented, in some way, but yea, it fails:
var cameraX, cameraY, DefindePoint, markerSymbol;
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
size : 10,
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 0.2
}
};
watchUtils.whenTrue(view, "stationary", function(event) {
// var position = event;
// var queryBeforeLandslide = beforeLandslideLayer.queryElevation(
// position
// );
graphicsLayer.removeAll();
cameraX = view.camera.position.longitude;
cameraY = view.camera.position.latitude + 0.02;
DefindePoint = {
// type: "point", // autocasts as new Point()
x: cameraX,
y: cameraY,
// mode: "on-the-ground",
};
beforeLandslideLayer.queryElevation(new Point(DefindePoint))
.then(function(result) {
// Print result of each sampled point to the console
result.geometry.DefindePoint.forEach(function(point, index) {
var elevation = Math.round(point[2]);
var resolution = result.sampleInfo[index].demResolution;
var coordinateText = "(" + point[0] + ", " + point[1] + ")";
var resolutionText = Math.round(resolution) + " meter resolution";
console.log("Sampled " + coordinateText + ": " + elevation + " at " + resolutionText);
});
})
// Failed to sample (e.g. service unavailable)
.catch(function(error) {
console.error("Failed to query elevation:", error);
});
graphicsLayer.add(new Graphic({
geometry: DefindePoint,
symbol: markerSymbol,
}));
});
watchUtils.whenTrue(view, "stationary", function() {
// Get the new center of the view only when view is stationary.
var info = "<br> <span> the view center changed. </span> x: " +
cameraX + " y: " + " Ponit = " + + " " +
cameraY + " Z: " +
" Camera Z " + view.camera.position.z
displayMessage(info);
});
function displayMessage(info) {
outputMessages.innerHTML += info;
outputMessages.scrollTop = outputMessages.scrollHeight;
}
});
