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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

（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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

（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].

相关阅读:
【家具建模三剑客】3DMAX一键生成软包插件BreadMaker面包机插件使用教程
 PE结构学习(2)_PE结构的组成
 关于数据迁移：解决kettle中mysql的数据是tinyint的kettle查出来后变成boolean问题
 虹科分享 | MKA：基于先进车载网络安全解决方案的密钥协议
 【ECMAScript6】Symbol及其相关使用
 微服务初识
 Tips for training DNN
MySQL----（五）索引、视图以及设计三范式
 Ae 效果：CC Ball Action
RabbitMQ Client (C/C++)
原文地址：https://blog.csdn.net/qq_40640910/article/details/136287270