1、这里引用官方的例子:Geoprocessing - viewshed analysis | ArcGIS API for JavaScript
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Geoprocessing - viewshed analysis | Sample | ArcGIS API for JavaScript
4.20
</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#paneDiv {
position: absolute;
top: 18px;
right: 18px;
padding: 12px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
width: 200px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/rest/geoprocessor",
"esri/rest/support/LinearUnit",
"esri/rest/support/FeatureSet"
], (
Map,
SceneView,
GraphicsLayer,
Graphic,
Point,
geoprocessor,
LinearUnit,
FeatureSet
) => {
const gpUrl =
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/ESRI_Elevation_World/GPServer/Viewshed";
const map = new Map({
basemap: "hybrid",
ground: "world-elevation"
});
const view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: [7.59564, 46.06595, 5184],
tilt: 70
}
});
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
const markerSymbol = {
type: "simple-marker",
color: [255, 0, 0],
outline: {
color: [255, 255, 255],
width: 2
}
};
const fillSymbol = {
type: "simple-fill",
color: [226, 119, 40, 0.75],
outline: {
color: [255, 255, 255],
width: 1
}
};
const options = {
outSpatialReference: {
wkid: 102100
}
};
view.on("click", computeViewshed);
function computeViewshed(event) {
graphicsLayer.removeAll();
const point = new Point({
longitude: event.mapPoint.longitude,
latitude: event.mapPoint.latitude
});
const inputGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
graphicsLayer.add(inputGraphic);
const inputGraphicContainer = [];
inputGraphicContainer.push(inputGraphic);
const featureSet = new FeatureSet();
featureSet.features = inputGraphicContainer;
const vsDistance = new LinearUnit();
vsDistance.distance = 5;
vsDistance.units = "miles";
const params = {
Input_Observation_Point: featureSet,
Viewshed_Distance: vsDistance
};
geoprocessor.execute(gpUrl, params, options).then(drawResultData);
}
function drawResultData(result) {
const resultFeatures = result.results[0].value.features;
// Assign each resulting graphic a symbol
const viewshedGraphics = resultFeatures.map((feature) => {
feature.symbol = fillSymbol;
return feature;
});
// Add the resulting graphics to the graphics layer
graphicsLayer.addMany(viewshedGraphics);
view
.goTo({
target: viewshedGraphics,
tilt: 0
})
.catch((error) => {
if (error.name != "AbortError") {
console.error(error);
}
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="paneDiv" class="esri-widget">
Click on map to execute ViewShed GP Task
</div>
</body>
</html>
2、效果: