arcgis js（九）地理处理任务 缓冲区分析

待我称王封你为后i 2022-09-07 09:13 275阅读 0赞

1、基于上一节的讲解我们已经知道如何发布GP服务，arcgis js（九）地理处理任务0 发布GP服务_郝大大的博客-CSDN博客，接下来进入正题，后面会分节介绍如何进行调用和处理众多的地理任务，给从事本专业的高校学生或者对GIS感兴趣的开发者提供一个学习思路，满足大家对地理信息处理的迫切需求。

2、在查看了各种资料后发现esri在api提供了两种方式，一个是Geoprocessor，位于esri/tasks，另一个是geoprocessor，位于esri/rest，我们来看看它们的区别： Geoprocessor自从4.0版本后支持，但是自从4.20版本之后被舍弃掉了，geoprocessor自从4.19版本后支持，所以根据版本自行选择。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 1

3、依然是基于天地图底图，我们分别介绍synchronous同步和asynchronous异步执行方法，显示速度和网速也有关系。同步的url是http://localhost:6080/arcgis/rest/services/buf/GPServer，在浏览器打开，可以看到执行方式，同时要注意Tasks:模型，在调用的时候一定要加上任务的名字，否则会失败，在代码中设置的url为：http://localhost:6080/arcgis/rest/services/buf/GPServer/模型

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 2

4、同步方法

  1. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  6.     <title> Geoprocessing </title>
  7.     <style>
  8.         html,
  9.         body,
  10.         #viewDiv {
  11.             padding: 0;
  12.             margin: 0;
  13.             height: 100%;
  14.             width: 100%;
  15.         }
  17.         #paneDiv {
  18.             position: absolute;
  19.             top: 18px;
  20.             right: 18px;
  21.             padding: 12px;
  22.             background-color: rgba(0, 0, 0, 0.5);
  23.             color: white;
  24.             width: 200px;
  25.         }
  26.     </style>
  28.     <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
  29.     <script src="https://js.arcgis.com/4.20/"></script>
  31.     <script>
  32.         require([
  33.             "esri/Map",
  34.             "esri/views/MapView",
  35.             "esri/layers/GraphicsLayer",
  36.             "esri/Graphic",
  37.             "esri/geometry/Point",
  38.             "esri/rest/geoprocessor",
  39.             "esri/rest/support/LinearUnit",
  40.             "esri/rest/support/FeatureSet",
  41.             "esri/layers/WebTileLayer",
  42.             "esri/layers/support/TileInfo",
  43.             "esri/geometry/SpatialReference",
  44.         ], (
  45.             Map,
  46.             MapView,
  47.             GraphicsLayer,
  48.             Graphic,
  49.             Point,
  50.             geoprocessor,
  51.             LinearUnit,
  52.             FeatureSet,
  53.             WebTileLayer,
  54.             TileInfo,
  55.             SpatialReference
  56.         ) => {
  58.             var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
  59.             var token = ""; //天地图token，在官网申请
  60.             var tileInfo = new TileInfo({
  61.                 "rows": 256,
  62.                 "cols": 256,
  63.                 "origin": {
  64.                     "x": -180,
  65.                     "y": 90
  66.                 },
  67.                 "spatialReference": {
  68.                     "wkid": 4490
  69.                 },
  70.                 "lods": [
  71.                     { "level": "1", "scale": 295829355.45, "resolution": 0.703125 },
  72.                     { "level": "2", "scale": 147914677.725, "resolution": 0.3515625 },
  73.                     { "level": "3", "scale": 73957338.8625, "resolution": 0.17578125 },
  74.                     { "level": "4", "scale": 36978669.43125, "resolution": 0.087890625 },
  75.                     { "level": "5", "scale": 18489334.715625, "resolution": 0.0439453125 },
  76.                     { "level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625 },
  77.                     { "level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125 },
  78.                     { "level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625 },
  79.                     { "level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125 },
  80.                     { "level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625 },
  81.                     { "level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },
  82.                     { "level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },
  83.                     { "level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125 },
  84.                     { "level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },
  85.                     { "level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125 },
  86.                     { "level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625 },
  87.                     { "level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312 },
  88.                     { "level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156 },
  89.                     { "level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578 }
  90.                 ]
  91.             });
  93.             //影像地图
  94.             var tdtImageLayer = new WebTileLayer({
  95.                 urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,
  96.                 subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
  97.                 tileInfo: tileInfo,
  98.                 spatialReference: { wkid: 4490 },
  99.             });
  101.             //影像注记
  102.             var tdtAnnoImageLayer = new WebTileLayer({
  103.                 urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,
  104.                 subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
  105.                 tileInfo: tileInfo,
  106.                 spatialReference: { wkid: 4490 },
  107.             });
  109.             const gpUrl = "http://localhost:6080/arcgis/rest/services/buf/GPServer/模型";
  111.             //定位到济南市中心
  112.             var cityCenter = new Point(116.985, 36.671, new SpatialReference({ wkid: 4490 }));
  114.             // 创建地图
  115.             var map = new Map({
  116.                 basemap: {
  117.                     baseLayers: [tdtImageLayer, tdtAnnoImageLayer]
  118.                 },
  119.             });
  121.             //添加到view
  122.             var view = new MapView({
  123.                 container: "viewDiv",
  124.                 map: map,
  125.                 center: cityCenter,
  126.                 zoom: 14,
  127.                 ui: {
  128.                     components: ["zoom", "compass"]
  129.                 }
  130.             });
  132.             //创建显示图层
  133.             const graphicsLayer = new GraphicsLayer();
  134.             map.add(graphicsLayer);
  136.             //创建点符号样式
  137.             const markerSymbol = {
  138.                 type: "simple-marker",
  139.                 color: [255, 0, 0],
  140.                 outline: {
  141.                     color: [255, 255, 255],
  142.                     width: 2
  143.                 }
  144.             };
  146.             //创建面符号样式
  147.             const fillSymbol = {
  148.                 type: "simple-fill",
  149.                 color: [226, 119, 40, 0.75],
  150.                 outline: {
  151.                     color: [255, 255, 255],
  152.                     width: 1
  153.                 },
  154.             };
  156.             //输出参考
  157.             const options = {
  158.                 outSpatialReference: {
  159.                     wkid: 4490
  160.                 }
  161.             };
  163.             //单击事件
  164.             view.on("click", computeViewshed);
  166.             function computeViewshed(event) {
  167.                 graphicsLayer.removeAll();
  169.                 const point = new Point({
  170.                     longitude: event.mapPoint.longitude,
  171.                     latitude: event.mapPoint.latitude
  172.                 });
  174.                 const inputGraphic = new Graphic({
  175.                     geometry: point,
  176.                     symbol: markerSymbol
  177.                 });
  179.                 graphicsLayer.add(inputGraphic);
  181.                 //设置输入数据集
  182.                 const inputGraphicContainer = [];
  183.                 inputGraphicContainer.push(inputGraphic);
  184.                 const featureSet = new FeatureSet();
  185.                 featureSet.features = inputGraphicContainer;
  187.                 //设置缓冲区距离
  188.                 const dis = new LinearUnit();
  189.                 dis.distance = 100;
  190.                 dis.units = "meters";
  192.                 const params = {
  193.                     input: featureSet,
  194.                     dis: dis
  195.                 };
  197.                 //执行gp task
  198.                 geoprocessor.execute(gpUrl, params, options).then(drawResultData);
  199.             }
  201.             //执行结果
  202.             function drawResultData(result) {
  203.                 const resultFeatures = result.results[0].value.features;
  205.                 //显示缓冲区
  206.                 const graphic = resultFeatures.map((feature) => {
  207.                     feature.symbol = fillSymbol;
  208.                     return feature;
  209.                 });
  210.                 graphicsLayer.addMany(graphic);
  212.                 view.goTo({
  213.                     target: graphic,
  214.                     tilt: 0
  215.                 }).catch((error) => {
  216.                     if (error.name != "AbortError") {
  217.                         console.error(error);
  218.                     }
  219.                 });
  220.             }
  221.         });
  222.     </script>
  223. </head>
  225. <body>
  226.     <div id="viewDiv"></div>
  227.     <div id="paneDiv" class="esri-widget">
  228.         在地图上单击执行 GP Task
  229.     </div>
  230. </body>
  232. </html>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 3

5、异步方法

打开链接http://localhost:6080/arcgis/rest/services/bufferpoint/GPServer可以看到执行类型是异步的：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70 4

发表评论

表情：
评论列表 （有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

    相关 arcgis js（九）天际线分析

    1、城市环境具有复杂的空间组成 - 既包含建筑物、树木、街道设施等实体结构的密集集合，也包含公园或公共城市广场等城市开放空间。使用天际线来更好的分析城市空间及其涵盖的空间区域，

    ╰半橙微兮°╰半橙微兮°/ 0 赞/ 459 阅读

    相关 arcgis js（八）地理查询

    1、地理查询主要是查询该图层的每个图斑的属性，分为基本查询和按距离查询，基本查询指的是如果鼠标选择的点在图斑上或内才有效，按距离查询指的是在给定距离内如果查询到了图斑就把该图斑

    偏执的太偏执、偏执的太偏执、/ 0 赞/ 344 阅读

    相关 如何定义ArcGIS地理数据库方案

    我们知道，要素数据集和要素类是存储在数据库中的。地理数据库方案定义了存储在地理数据库中每个数据集和要素类的规则、关系和属性。简单来说，地理数据库中要创建哪些类型的要素类，创建哪

    蔚落蔚落/ 0 赞/ 416 阅读