Exercise 11 3D - Calling a Geoprocessing Service

Instructions:

As cool as JavaScript is, it certainly has limits. There are lots of complex tasks that we may need that are likely already in a geoprocessing tool. So let's use the JS API to call a geoprocessing service and offload all that crazy work to a server!

In this lab, we'll calculate a complex viewshed by reaching out to that geoprocessing service.

Exercise:

1. Update Require
Update your require statement and function definition to include the following:

require([
  "esri/views/SceneView",
  "esri/Map",
  "esri/layers/GraphicsLayer",
  "esri/Graphic",
  "esri/geometry/Point",
  "esri/tasks/Geoprocessor",
  "esri/tasks/support/LinearUnit",
  "esri/tasks/support/FeatureSet",
], function(SceneView, Map, GraphicsLayer, Graphic, Point, Geoprocessor, LinearUnit, FeatureSet) {

2. Add Graphics Layer
We will create a graphic point on the location that we click on, so let's add a graphics layer to the map.

var graphicsLayer = new GraphicsLayer();

scene.add(graphicsLayer);

3. Symbols
This is probably feeling pretty similar to the last exercise at this point!
These symbols are going to be used for the initial click point, but also the returned polygon fill.

var markerSymbol = {
  type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
  color: [255, 0, 0],
  outline: { // autocasts as new SimpleLineSymbol()
    color: [255, 255, 255],
    width: 2
  }
};

var fillSymbol = {
  type: "simple-fill", // autocasts as new SimpleFillSymbol()
  color: [0, 255, 0, 0.75],
  outline: { // autocasts as new SimpleLineSymbol()
    color: [255, 255, 255],
    width: 1
  }
};

4. Define Geoprocessor
Now we can define the geoprocessor and set the url and out spatial reference. And then listen for the view on click trigger to call the function in the next step.

var gp = new Geoprocessor("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/ESRI_Elevation_World/GPServer/Viewshed");
  gp.outSpatialReference = { // autocasts as new SpatialReference()
    wkid: 102100
  };

view.on("click", computeViewshed);

5. Computation
This function allows us to computer everything that the geoprocessing tool needs. We get the click point's lat/long, create graphics, set up parameters, and then pass all of this to the geoprocessing tool to execute.

function computeViewshed(event) {
  graphicsLayer.removeAll();

  var point = new Point({
    longitude: event.mapPoint.longitude,
    latitude: event.mapPoint.latitude
  });

  var inputGraphic = new Graphic({
    geometry: point,
    symbol: markerSymbol
  });

  graphicsLayer.add(inputGraphic);

  var inputGraphicContainer = [];
  inputGraphicContainer.push(inputGraphic);
  var featureSet = new FeatureSet();
  featureSet.features = inputGraphicContainer;

  var vsDistance = new LinearUnit();
  vsDistance.distance = 5;
  vsDistance.units = "miles";

  var params = {
    "Input_Observation_Point": featureSet,
    "Viewshed_Distance": vsDistance
  };

  gp.execute(params).then(drawResultData);
}

5. Handle Results
Finally, we need to actually do something with the data the GP Tool sends back to us. We get the results and need to define their symbol and then add them to the map. And lastly, we obviously don't want them out the map, so we'll zoom to their extent.

function drawResultData(result) {
  var resultFeatures = result.results[0].value.features;

  // Assign each resulting graphic a symbol
  var viewshedGraphics = resultFeatures.map(function(feature) {
    feature.symbol = fillSymbol;
    return feature;
  });

  // Add the resulting graphics to the graphics layer
  graphicsLayer.addMany(viewshedGraphics);

  view.goTo({
    target: viewshedGraphics
  });
}

Now go ahead and click on the map! Give it a few seconds and it'll create a viewshed for you!

Map Solution

Code Solution


Challenges:

Really zoom into the point that you clicked to start your viewshed. In 3D, you should be able to really understand why it calculated the way it did!
Can you think of any other geoprocessing tools that you could use in a JS API?


Final Solution