ArcGIS api for javascript——地理处理任务-计算一个可视域

描述

本例展示了使用一个地理处理计算一个可视域(viewshed) 单击地图上的任意点查看该点5英里内能看见的所有区域。这个模型需要几秒钟来运行并反馈结果。

可视域计算是通过ArcGIS Server 地理处理服务实现。该服务提供访问服务器上的一个包含可视域(viewshed)工具的模型（任务）。 Geoprocessor构造函数需要任务的URL(http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/GPServer/Viewshed)。 可以使用Services Directory查出自己的地理处理服务的URL并使用。

当地图被单击，一个事件监听器调用函数computeViewShed，在单击的位置增加一个SimpleMarkerSymbol。该函数还为任务建立了两个参数。第一个参数是单击的点，第二个参数是维持可视域合理的大小的缓存距离。在本例中可视域被计算到单击点距离为5英里。

下面的第一行为地理处理任务按正确的格式建立参数，第二行代码执行任务。因为任务是同步的，所以使用execute方法，这意味着用户做其他事情以前要等待结果出现。对于大的工作，能够调用submitJob异步地运行工作，过一会再获得结果。

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

gp.execute(params, drawViewshed);

上面的执行方法体的回调函数是drawViewshed，当结果可用时drawViewshed函数被调用。这个函数定义了结果的符号并将它们增加到地图上。下面的循环是必需的以防结果返回的是多个部分的要素。这在可视域图层是很有可能发生的因为不平地形会留下分开的可视区域块。

for (var f=0, fl=features.length; f<fl; f++) {

  var feature = features[f];

  feature.setSymbol(polySymbol);

  map.graphics.add(feature);

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>GP Viewshed Task</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.gp");

      var map, gp;

      //初始化地图，地理处理器
      function init() {
        var startExtent = new esri.geometry.Extent(-122.7268, 37.4557, -122.1775, 37.8649, new esri.SpatialReference({wkid:4326}) );

        map = new esri.Map("mapDiv", { extent: startExtent });
        var streetMap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
        map.addLayer(streetMap);

        gp = new esri.tasks.Geoprocessor("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/GPServer/Viewshed");

        gp.setOutputSpatialReference({wkid:4326});
        dojo.connect(map, "onClick", computeViewShed);
      }

      function computeViewShed(evt) {
      //清除所有图层
        map.graphics.clear();
      //创建点并设置点的样式
        var pointSymbol = new esri.symbol.SimpleMarkerSymbol();
        pointSymbol.setSize(5);
        pointSymbol.setOutline(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1));
        pointSymbol.setColor(new dojo.Color([0,255,0,0.25]));
      //将点的坐标和样式加入到图层中
        var graphic = new esri.Graphic(evt.mapPoint,pointSymbol);
        map.graphics.add(graphic);

        var features= [];
        features.push(graphic);
        var featureSet = new esri.tasks.FeatureSet();
        featureSet.features = features;

        //构造缓冲长度，这里的单位是可以更改的
        var vsDistance = new esri.tasks.LinearUnit();
        vsDistance.distance = 5;
        //该单位根据GP发布的单位进行选择
        vsDistance.units = "esriMiles";
        //设置GP参数
        var params = { "Input_Observation_Point":featureSet, "Viewshed_Distance":vsDistance };
        gp.execute(params, drawViewshed);//同步
      }

      function drawViewshed(results, messages) {
      //设置填充的样式，
        var polySymbol = new esri.symbol.SimpleFillSymbol();
        polySymbol.setOutline(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0,0.5]), 1));
        polySymbol.setColor(new dojo.Color([255,127,0,0.7]));
        var features = results[0].value.features;
        for (var i=0, j=features.length; i<j; i++) {
          var feature = features[i];
          feature.setSymbol(polySymbol);
          map.graphics.add(feature);
        }
      }

      dojo.addOnLoad(init);
    </script>

  </head>
  <body class="tundra">
    <div id="mapDiv" style="width:800px; height:600px; border:1px solid #000;"></div>
      Click on map to execute ViewShed GP Task.
  </body>
</html>