ArcgisForJS如何使用ArcGIS Server的缓冲区几何服务？-编程知识

文章目录

0.引言
1.使用geometryService生成缓冲区
2.使用geometryEngine生成缓冲区

0.引言

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

1.使用geometryService生成缓冲区

（1）查看ArcGIS Server的几何服务
在这里插入图片描述

在这里插入图片描述
以下上面红框网址为服务地址，下面红框为操作方法。

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

（2）实现代码

<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）实现代码

<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教程; 2020-11-02 [accessed 2024-02-25].
[2] 牛老师讲GIS. Arcgis for Js之GeometryService实现测量距离和面积; 2014-10-28 [accessed 2024-02-25].
[3] 带着天使反上帝 - Kaybee. arcgis api for javascript 计算长度和面积; 2017-11-12 [accessed 2024-02-25].
[4] GISer.Wang. （十四）ArcGIS API For Javascript之几何服务; 2016-11-26 [accessed 2024-02-25].