# 1. 点高程差查询

## 1.1 结果显示

require([
"esri/Map",
"esri/views/SceneView",
"esri/Graphic",
"esri/geometry/Polyline",
"esri/layers/ElevationLayer",
"esri/symbols/PointSymbol3D",
"esri/symbols/ObjectSymbol3DLayer",
"esri/symbols/LineSymbol3D",
"esri/symbols/LineSymbol3DLayer",
"dojo/promise/all",
"dojo/domReady!"
],
function(
Map, SceneView, Graphic, Polyline, ElevationLayer, PointSymbol3D,
ObjectSymbol3DLayer,
LineSymbol3D, LineSymbol3DLayer, all){
...
}
)

## 1.2 骨架

function(...){
var beforeLandslideUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/OsoLandslide/OsoLandslide_Before_3DTerrain/ImageServer/";
var afterLandslideUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/OsoLandslide/OsoLandslide_After_3DTerrain/ImageServer/";
var beforeLandslideLayer = new ElevationLayer({url: beforeLandslideUrl});
var afterLandslideLayer = new ElevationLayer({url: afterLandslideUrl});

var map = new Map({... , ground:{layers:[beforeLandslideLayer, afterLandslideLayer]}});
var view = new View({...});

var afterPointSymbol  = new PointSymbol3D({...});
var beforePointSymbol = new PointSymbol3d({...});
var lineSymbol = new LineSymbol3D({...});

var resultsContainer = document.getElementById("resultsDiv");

view.on("click", function(event){...});
document.getElementById("elevAfter").addEventListener("change", function(evt){...});
}

## 1.3 所以重点就在两个事件上了

### 1.3.1 click事件

view.on("click",function(event){
resultsContainer.innerHTML = "Query elevation ...";

var position = event.mapPoint;
var queryBeforeLandslide = beforeLandslideLayer.queryElevation(position);
var queryAfterLandslide = afterLandslideLayer.queryElevation(position);

all([queryBeforeLandslide,queryAfterLandslide])
.then(function(results){...})
otherwise(function(error){...});
}
);

otherwise的回调函数比较短，仅仅为DOM元素写入“查询失败”的提示信息。所以重点就在回调函数1：

.then(function(results) {
var posBeforeLandslide = results[0].geometry;
var posAfterLandslide = results[1].geometry;

view.graphics.removeAll();

view.graphics.add(new Graphic({
geometry: posBeforeLandslide,
symbol: beforePointSymbol
}));

view.graphics.add(new Graphic({
geometry: posAfterLandslide,
symbol: afterPointSymbol
}));

var lineGeometry = new Polyline({
spatialReference: posBeforeLandslide.spatialReference
});
lineGeometry.addPath([posBeforeLandslide,
posAfterLandslide
]);
view.graphics.add(new Graphic({
geometry: lineGeometry,
symbol: lineSymbol
}));

var elevationDifference = Math.abs(posBeforeLandslide.z -
posAfterLandslide.z);
resultsContainer.innerHTML = "Elevation difference: " +
elevationDifference.toFixed(2) + " m";
})

### 1.3.2 复选框的change监听事件

document.getElementById("elevAfter").addEventListener("change",
function(evt) {
afterLandslideLayer.visible = evt.target.checked;
beforeOrAfter = evt.target.checked ? "after" : "before";
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Query Elevation (Points) - 4.2</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

#paneDiv {
position: absolute;
top: 12px;
left: 62px;
width: 80%;
padding: 0 12px 0 12px;
background-color: rgba(255, 255, 255, 0.85);
border: 1px solid white;
color: black;
}

#resultsDiv {
font-size: 1.2em;
text-align: center;
border-bottom: 1px solid gray;
padding: 10px 0px;
}

#activeElevationLayerDiv {
margin: 10px 0;
}

ul #red {
color: rgb(150, 26, 15);
}

ul #green {
color: rgb(21, 150, 15);
}

ul span {
color: black;
}

ul {
margin: 0 0 10px 0;
}
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script>

<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/Graphic",
"esri/geometry/Polyline",
"esri/layers/ElevationLayer",
"esri/symbols/PointSymbol3D",
"esri/symbols/ObjectSymbol3DLayer",
"esri/symbols/LineSymbol3D",
"esri/symbols/LineSymbol3DLayer",
"dojo/promise/all",
"dojo/domReady!"
], function(
Map, SceneView, Graphic, Polyline, ElevationLayer, PointSymbol3D,
ObjectSymbol3DLayer,
LineSymbol3D, LineSymbol3DLayer, all
) {

// Create elevation layers
var beforeLandslideUrl =
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/OsoLandslide/OsoLandslide_Before_3DTerrain/ImageServer/";
var afterLandslideUrl =
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/OsoLandslide/OsoLandslide_After_3DTerrain/ImageServer/";

var beforeLandslideLayer = new ElevationLayer({
url: beforeLandslideUrl
});
var afterLandslideLayer = new ElevationLayer({
url: afterLandslideUrl
});

// Create Map and View
var map = new Map({
basemap: "satellite",
ground: {
layers: [beforeLandslideLayer, afterLandslideLayer]
}
});

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

// Initialize symbols
var afterPointSymbol = new PointSymbol3D({
symbolLayers: [new ObjectSymbol3DLayer({
material: {
color: [150, 26, 15]
},
resources: {
primitive: "sphere"
},
width: 8
})]
});

var beforePointSymbol = new PointSymbol3D({
symbolLayers: [new ObjectSymbol3DLayer({
material: {
color: [21, 150, 15]
},
resources: {
primitive: "sphere"
},
width: 8
})]
});

var lineSymbol = new LineSymbol3D({
symbolLayers: [new LineSymbol3DLayer({
material: {
color: [150, 26, 15]
},
size: 1.5
})]
});

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 queryBeforeLandslide = beforeLandslideLayer.queryElevation(
position);
var queryAfterLandslide = afterLandslideLayer.queryElevation(
position);

// When both query promises resolve execute the following code
all([queryBeforeLandslide, queryAfterLandslide])
.then(function(results) {
var posBeforeLandslide = results[0].geometry;
var posAfterLandslide = results[1].geometry;

// Clear graphics from previous result (if applicable)
view.graphics.removeAll();

// Draw a point graphic for position before landslide
view.graphics.add(new Graphic({
geometry: posBeforeLandslide,
symbol: beforePointSymbol
}));

// Draw a point graphic for position after landslide
view.graphics.add(new Graphic({
geometry: posAfterLandslide,
symbol: afterPointSymbol
}));

// Draw a vertical line that illustrates the elevation difference
var lineGeometry = new Polyline({
spatialReference: posBeforeLandslide.spatialReference
});
lineGeometry.addPath([posBeforeLandslide,
posAfterLandslide
]);
view.graphics.add(new Graphic({
geometry: lineGeometry,
symbol: lineSymbol
}));

// Compute and display the difference in elevation
var elevationDifference = Math.abs(posBeforeLandslide.z -
posAfterLandslide.z);
resultsContainer.innerHTML = "Elevation difference: " +
elevationDifference.toFixed(2) + " m";
})
.otherwise(function(error) {
resultsContainer.innerHTML = "Elevation query failed (" +
error.message + ")";
});
});

// When both elevation layers are set "visible", the surface is defined by the latter layer (afterLandslideLayer).
// Thus we can toggle between "before" and "after" by toggling the visibility of afterLandslideLayer.
document.getElementById("elevAfter").addEventListener("change",
function(evt) {
afterLandslideLayer.visible = evt.target.checked;
beforeOrAfter = evt.target.checked ? "after" : "before";
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="paneDiv">
<div id="resultsDiv">Click on the map to see the difference in elevation before and after the landslide.</div>
<div id="activeElevationLayerDiv">
Legend:
<ul>
<li id="green"><span>Surface point before landslide</span></li>
<li id="red"><span>Surface point after landslide</span></li>
</ul>
<input type="checkbox" id="elevAfter" checked><label for="elevAfter">Show surface after landslide</label>
</div>
</div>
</body>
</html>
Query Elevation (Points)

# 2. 线路高程查询

## 2.2 重点代码（与RouteTask有别的部分）

on(view, "click", addStop);

function addStop(event){...}
function onRouteUpdate(data){...}

function addStop(event) {
if (!event.mapPoint) {
return;
}

var stop = new Graphic({
geometry: event.mapPoint,
symbol: markerSymbol
});
routeLayer.add(stop);

routeParams.stops.features.push(stop);
if (routeParams.stops.features.length >= 2) {
routeTask.solve(routeParams)
.then(onRouteUpdated)
.otherwise(function(err) {
routeLayer.remove(stop);
routeParams.stops.features.pop();
console.error(err);
});
}
}

function onRouteUpdated(data) {
var route = data.routeResults[0].route
var geometry = route.geometry;

var elevationPromise = map.ground.queryElevation(geometry);

elevationPromise.then(function(result) {
var path = result.geometry.paths[0];
var ascent = 0;
var descent = 0;

for (var i = 1; i < path.length; i++) {
var d = path[i][2] - path[i - 1][2];
if (d > 0) {
ascent += d;
}
else {
descent -= d;
}
}

document.getElementById("distanceDiv").innerHTML =
"<p>total distance: " + Math.round(route.attributes.Total_Kilometers *
1000) / 1000 + " km</p>";
document.getElementById("ascDiv").innerHTML =
"<p>total ascent: " + Math.round(ascent * 100) / 100 +
" m</p>";
document.getElementById("descDiv").innerHTML =
"<p>total descent: " + Math.round(descent * 100) / 100 +
" m</p>";

routeLayer.add(new Graphic({
geometry: result.geometry,
symbol: pathSymbol
}));

}, function(error) {
console.error(error);
})
}
onRouteUpdate()

elevationPromise.then(function(result) {
var path = result.geometry.paths[0];
var ascent = 0;
var descent = 0;

for (var i = 1; i < path.length; i++) {...}

document.getElementById("distanceDiv").innerHTML = ... ;
document.getElementById("ascDiv").innerHTML = ... ;
document.getElementById("descDiv").innerHTML = ... ;

routeLayer.add(new Graphic({
geometry: result.geometry,
symbol: pathSymbol
}));
},
function(error) {
console.error(error);
}
)

# AJS4.2 基础部分学习结语

posted @ 2017-04-09 09:47  四季留歌  阅读(2744)  评论(2编辑  收藏  举报