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