ArcgisForJS如何使用ArcGIS Server的缓冲区几何服务？

来吧!我在未来等你!2024-02-26 9:42

文章目录

0.引言

ArcGIS For JS是一款强大的JavaScript库，它提供了许多功能，包括使用ArcGIS Server的缓冲区几何服务。缓冲区几何服务是一种服务，它允许你在地理空间数据上创建一个缓冲区，这个缓冲区是一个多边形区域，它围绕在特定距离内的所有点。这种服务在许多应用中都非常有用，例如在地理信息系统（GIS）中，它可以用于分析某个区域内的所有点。

1.使用geometryService生成缓冲区

（1）查看ArcGIS Server的几何服务

以下上面红框网址为服务地址，下面红框为操作方法。

url:http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer

（2）实现代码

csharp 复制代码 
<html lang="en">
  
<head>  
  <meta charset="utf-8" />  
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />  
  <title>GeometryEngine - geodesic buffers | Sample | ArcGIS Maps SDK for JavaScript 4.28</title>  
  
  <style>  
    html,  
    body {  
      padding: 0;  
      margin: 0;  
      height: 100%;  
    }  
  
    .viewDivBase {  
      padding: 0;  
      margin: 0;  
      height: 100%;  
      width: 49.9%;  
    }  
  
    #viewDiv2d {  
      height: 100%;  
      width: 100%;  
    }  
  
    #info {  
      padding: 5px;  
      margin: 5px;  
      width: 120px;  
      text-align: center;  
    }  
  </style>  
  
  <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />  
  <script src="https://js.arcgis.com/4.28/"></script>  
  
  <script>  
    require([  
      "esri/Map",  
      "esri/views/SceneView",  
      "esri/views/MapView",  
      "esri/layers/GraphicsLayer",  
      "esri/Graphic",  
      "esri/geometry/geometryEngine",  
      "esri/rest/geometryService",  
      "esri/rest/support/BufferParameters",  
      "esri/geometry/SpatialReference"  
    ], (Map,  
      SceneView,  
      MapView,  
      GraphicsLayer,  
      Graphic,  
      geometryEngine,  
      geometryService,  
      BufferParameters,  
      SpatialReference) => {  
      const map = new Map({  
        basemap: "satellite"  
      });  
  
      const bufferLayer = new GraphicsLayer();  
      const pointLayer = new GraphicsLayer();  
      map.addMany([bufferLayer, pointLayer]);  
  
      const viewOptions = {  
        map: map,  
        zoom: 3,  
        center: [0, 60]  
      };  
  
      const view2d = new MapView(viewOptions);  
      view2d.container = "viewDiv2d";  
  
      const polySym = {  
        type: "simple-fill", // autocasts as new SimpleFillSymbol()  
        color: [140, 140, 222, 0.5],  
        outline: {  
          color: [0, 0, 0, 0.5],  
          width: 2  
        }  
      };  
  
      const pointSym = {  
        type: "simple-marker",  
        color: [255, 0, 0],  
        outline: {  
          color: [255, 255, 255],  
          width: 1  
        },  
        size: 7  
      };  
  
      let bufferEnabled = true;  
      view2d.on(["click"], event => {  
        if (bufferEnabled) {  
          createBuffer(event, view2d);  
        }  
      });  
  
      function createBuffer(event, view) {  
        event.stopPropagation();  
        const point = view.toMap(event);  
  
        if (point) {  
          bufferPoint(point);  
        }  
      }  
  
      function bufferPoint(point) {  
        if (!bufferEnabled) {  
          console.log("buffering not enabled. Hit the b key and click/drag to buffer.");  
          return;  
        }  
  
        point.hasZ = false;  
        point.z = undefined;  
  
        if (pointLayer.graphics.length === 0) {  
          pointLayer.add(  
            new Graphic({  
              geometry: point,  
              symbol: pointSym  
            })  
          );  
        } else {  
          const graphic = pointLayer.graphics.getItemAt(0);  
          graphic.geometry = point;  
        }  
  
        //使用geometryService生成缓冲区  
        var url="http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer/";  
        const params = new BufferParameters({  
          distances: [560],  
          unit: "kilometers",  
          geodesic: true,  
          bufferSpatialReference: new SpatialReference({ wkid: 3857 }),  
          outSpatialReference: view2d.spatialReference,  
          geometries: [point]  
        });  
        geometryService.buffer(url, params).then(function (results) {  
          const buffer = results[0];  
          if (bufferLayer.graphics.length === 0) {  
            bufferLayer.add(  
              new Graphic({  
                geometry: buffer,  
                symbol: polySym  
              })  
            );  
          } else {  
            const graphic = bufferLayer.graphics.getItemAt(0);  
            graphic.geometry = buffer;  
          }  
        });  
  
        //使用geometryEngine生成缓冲区  
        // const buffer = geometryEngine.geodesicBuffer(point, 560, "kilometers");  
        // if (bufferLayer.graphics.length === 0) {  
        //   bufferLayer.add(  
        //     new Graphic({  
        //       geometry: buffer,  
        //       symbol: polySym  
        //     })  
        //   );  
        // } else {  
        //   const graphic = bufferLayer.graphics.getItemAt(0);  
        //   graphic.geometry = buffer;  
        // }  
      }  
    });  
  </script>  
</head>  
  
<body>  
  <div class="viewDivBase" id="viewDiv2d"></div>  
</body>  
  
</html>

（3）实现结果

2.使用geometryEngine生成缓冲区

（1）实现代码

csharp 复制代码 
<html lang="en">
  
<head>  
  <meta charset="utf-8" />  
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />  
  <title>GeometryEngine - geodesic buffers | Sample | ArcGIS Maps SDK for JavaScript 4.28</title>  
  
  <style>  
    html,  
    body {  
      padding: 0;  
      margin: 0;  
      height: 100%;  
    }  
  
    .viewDivBase {  
      padding: 0;  
      margin: 0;  
      height: 100%;  
      width: 49.9%;  
    }  
  
    #viewDiv2d {  
      height: 100%;  
      width: 100%;  
    }  
  
    #info {  
      padding: 5px;  
      margin: 5px;  
      width: 120px;  
      text-align: center;  
    }  
  </style>  
  
  <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />  
  <script src="https://js.arcgis.com/4.28/"></script>  
  
  <script>  
    require([  
      "esri/Map",  
      "esri/views/SceneView",  
      "esri/views/MapView",  
      "esri/layers/GraphicsLayer",  
      "esri/Graphic",  
      "esri/geometry/geometryEngine",  
      "esri/rest/geometryService",  
      "esri/rest/support/BufferParameters",  
      "esri/geometry/SpatialReference"  
    ], (Map,  
      SceneView,  
      MapView,  
      GraphicsLayer,  
      Graphic,  
      geometryEngine,  
      geometryService,  
      BufferParameters,  
      SpatialReference) => {  
      const map = new Map({  
        basemap: "satellite"  
      });  
  
      const bufferLayer = new GraphicsLayer();  
      const pointLayer = new GraphicsLayer();  
      map.addMany([bufferLayer, pointLayer]);  
  
      const viewOptions = {  
        map: map,  
        zoom: 3,  
        center: [0, 60]  
      };  
  
      const view2d = new MapView(viewOptions);  
      view2d.container = "viewDiv2d";  
  
      const polySym = {  
        type: "simple-fill", // autocasts as new SimpleFillSymbol()  
        color: [140, 140, 222, 0.5],  
        outline: {  
          color: [0, 0, 0, 0.5],  
          width: 2  
        }  
      };  
  
      const pointSym = {  
        type: "simple-marker",  
        color: [255, 0, 0],  
        outline: {  
          color: [255, 255, 255],  
          width: 1  
        },  
        size: 7  
      };  
  
      let bufferEnabled = true;  
      view2d.on(["click"], event => {  
        if (bufferEnabled) {  
          createBuffer(event, view2d);  
        }  
      });  
  
      function createBuffer(event, view) {  
        event.stopPropagation();  
        const point = view.toMap(event);  
  
        if (point) {  
          bufferPoint(point);  
        }  
      }  
  
      function bufferPoint(point) {  
        if (!bufferEnabled) {  
          console.log("buffering not enabled. Hit the b key and click/drag to buffer.");  
          return;  
        }  
  
        point.hasZ = false;  
        point.z = undefined;  
  
        if (pointLayer.graphics.length === 0) {  
          pointLayer.add(  
            new Graphic({  
              geometry: point,  
              symbol: pointSym  
            })  
          );  
        } else {  
          const graphic = pointLayer.graphics.getItemAt(0);  
          graphic.geometry = point;  
        }  
  
        // //使用geometryService生成缓冲区  
        // var url="http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer/";  
        // const params = new BufferParameters({  
        //   distances: [560],  
        //   unit: "kilometers",  
        //   geodesic: true,  
        //   bufferSpatialReference: new SpatialReference({ wkid: 3857 }),  
        //   outSpatialReference: view2d.spatialReference,  
        //   geometries: [point]  
        // });  
        // geometryService.buffer(url, params).then(function (results) {  
        //   const buffer = results[0];  
        //   if (bufferLayer.graphics.length === 0) {  
        //     bufferLayer.add(  
        //       new Graphic({  
        //         geometry: buffer,  
        //         symbol: polySym  
        //       })  
        //     );  
        //   } else {  
        //     const graphic = bufferLayer.graphics.getItemAt(0);  
        //     graphic.geometry = buffer;  
        //   }  
        // });  
  
        使用geometryEngine生成缓冲区  
        const buffer = geometryEngine.geodesicBuffer(point, 560, "kilometers");  
        if (bufferLayer.graphics.length === 0) {  
          bufferLayer.add(  
            new Graphic({  
              geometry: buffer,  
              symbol: polySym  
            })  
          );  
        } else {  
          const graphic = bufferLayer.graphics.getItemAt(0);  
          graphic.geometry = buffer;  
        }  
      }  
    });  
  </script>  
</head>  
  
<body>  
  <div class="viewDivBase" id="viewDiv2d"></div>  
</body>  
  
</html>

（2）实现结果

参考资料：

1\] 一入GIS深似海. [不一样的前端，JavaScript之arcgis api教程](https://www.bilibili.com/video/BV11D4y197wM/?spm_id_from=333.337.search-card.all.click&vd_source=1ed485bfa4061f1a098f425106373a4b); 2020-11-02 \[accessed 2024-02-25\]. \[2\] 牛老师讲GIS. [Arcgis for Js之GeometryService实现测量距离和面积](https://blog.csdn.net/gisshixisheng/article/details/40540601); 2014-10-28 \[accessed 2024-02-25\]. \[3\] 带着天使反上帝 - Kaybee. [arcgis api for javascript 计算长度和面积](https://blog.csdn.net/sinat_25295611/article/details/78511867); 2017-11-12 \[accessed 2024-02-25\]. \[4\] GISer.Wang. [（十四）ArcGIS API For Javascript之几何服务](https://blog.csdn.net/lovecarpenter/article/details/53023217); 2016-11-26 \[accessed 2024-02-25\].

相关推荐
三巧10 分钟前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
SummerGao.11 分钟前
【解决】layui layer的提示框，弹出框一闪而过的问题
前端·layui
软件技术NINI27 分钟前
html css js网页制作成品——HTML+CSS+js美甲店网页设计（5页）附源码
javascript·css·html
天天扭码39 分钟前
从数组到对象：JavaScript 遍历语法全解析（ES5 到 ES6 + 超详细指南）
前端·javascript·面试
拉不动的猪40 分钟前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&41 分钟前
css word
前端·css
Мартин.44 分钟前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox
冰镇生鲜44 分钟前
快速静态界面 MDC规则约束 示范
前端
技术与健康1 小时前
【解读】Chrome 浏览器实验性功能全景
前端·chrome
Bald Monkey1 小时前
【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时，子菜单需要点击两次才会隐藏的问题
前端·elementui·vue·element plus
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07西电B测-计算机网络综合实验(含验收问题)08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09苍穹外卖面试总结10最新 Kubernetes 集群部署 + flannel 网络插件（保姆级教程，最新 K8S 版本）