文章目录
- 0.引言
- 1.ArcGIS创建GP服务
- [2.ArcGIS Server发布GP服务](#2.ArcGIS Server发布GP服务)
- [3.ArcgisForJS使用ArcGIS Server发布的GP服务](#3.ArcgisForJS使用ArcGIS Server发布的GP服务)
0.引言
ArcGIS for JavaScript(或简称AGJS)是一个强大的工具,它允许开发者使用JavaScript在Web浏览器中创建和运行ArcGIS应用程序。ArcGIS Server是一个强大的服务器产品,它提供了许多服务,包括地理处理服务(GP服务)。GP服务是一种服务,它允许开发者在ArcGIS Server上运行各种地理处理任务等。ArcGIS for JS可以使用ArcGIS Server发布的GP服务来执行各种地理处理任务。
1.ArcGIS创建GP服务
(1)创建mxd地图文档,命名为bufferGP。
![](https://file.jishuzhan.net/article/1761995169915211778/6adc299e3016c8f65acc7a8685250f77.webp)
(2)创建点要素
![](https://file.jishuzhan.net/article/1761995169915211778/e9ef750b7da76e26d9b3849dd5abad55.webp)
(3)创建模型
![](https://file.jishuzhan.net/article/1761995169915211778/a428092afeb51a880e7a460d0179ab50.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/75c37246753e99490e89a8a9166523cd.webp)
构建点生成缓冲区的模型。
![](https://file.jishuzhan.net/article/1761995169915211778/afa7d48e30d060689dc1d203f5ea3ad4.webp)
设置heatPoints。
![](https://file.jishuzhan.net/article/1761995169915211778/9a81a6beb79f4028b2541196c05b6f35.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/d07f5478aaa2587ccd4ac9395856ff66.webp)
设置距离[值或字段]。
![](https://file.jishuzhan.net/article/1761995169915211778/500edcf574c11705ce0803c24f13a392.webp)
设置各组件显示模型参数。
![](https://file.jishuzhan.net/article/1761995169915211778/ac19962b54a0964fad2c1cd47d14bf89.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/2be7f17c027e6df27ed56f6a8f587eb5.webp)
同理设置其他组件的模型参数。
![](https://file.jishuzhan.net/article/1761995169915211778/af28d00b2ba81ce1f16ed7731ad60d2c.webp)
重命名各组件。
![](https://file.jishuzhan.net/article/1761995169915211778/d6e50f4b42280189e266cfb3b6efce2e.webp)
运行成功并退出。
2.ArcGIS Server发布GP服务
打开模型,执行一次模型。
![](https://file.jishuzhan.net/article/1761995169915211778/0107e33499d3efac90d7c50570247219.webp)
打开结果查看会话。
![](https://file.jishuzhan.net/article/1761995169915211778/f3c9eca155ffbaf3e882e2043a805f5b.webp)
发布地理处理服务。
![](https://file.jishuzhan.net/article/1761995169915211778/00c13487140040e16ea39b3d4625dc39.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/1777369e7e50dd38307df75c3283a70a.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/8d154bd76a965f360ed21b181b8729f9.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/b6251a8f5b7b38764ce0c07916fe66c7.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/2c53f8d2c917cf09bb73c88979dbd8ef.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/795a60d3179fe1385680d75ad59bf94d.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/fabe1c191a19ef7477d652e5b994663a.webp)
在ArcGIS Server查看GP服务。
![](https://file.jishuzhan.net/article/1761995169915211778/833f3cd2868fc1db99da3669e35f0b95.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/77e08c8207f1a5944deb9655a15c5145.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/c4b8799446aa2997b7ddaa4f830c1381.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/f5014da2672d3552f49ea554dea5f85b.webp)
地理处理服务地址:http://localhost:6080/arcgis/rest/services/gp/bufferService1/GPServer/bufferGPModel
3.ArcgisForJS使用ArcGIS Server发布的GP服务
(1)实现代码
csharp
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GP服务</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.28/"></script>
<style type="text/css">
.MapClass {
width: 100%;
height: 600px;
border: 1px solid #000;
}
</style>
<script type="text/javascript" charset="utf-8">
require(["esri/Map",
"esri/views/MapView",
"esri/rest/geoprocessor",
"esri/rest/support/FeatureSet",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/rest/support/LinearUnit"
], (Map,
MapView,
geoprocessor,
FeatureSet,
Graphic,
GraphicsLayer,
LinearUnit) => {
var MyMap = new Map({
basemap: "gray-vector",
});
var inputGraphicContainer = [];
var graphicsLayer = new GraphicsLayer();
MyMap.add(graphicsLayer);
var view = new MapView({
container: "MyMapDiv",
center: [106.49446091380375, 29.559187456407138],
zoom: 10,
map: MyMap
});
const markerSymbol = {
type: "simple-marker",
color: [255, 0, 0],
outline: {
color: [255, 255, 255],
width: 2
}
};
const fillSymbol = {
type: "simple-fill",
color: [226, 119, 40, 0.75],
outline: {
color: [255, 255, 255],
width: 1
}
};
//点击绘点
view.on("click", createGraphic);
function createGraphic(event) {
const point = {
type: "point",
longitude: event.mapPoint.longitude,
latitude: event.mapPoint.latitude
};
const inputGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
graphicsLayer.add(inputGraphic);
inputGraphicContainer.push(inputGraphic);
}
//清除点
document.getElementById("Btn").onclick = () => {
view.graphics.removeAll();
graphicsLayer.removeAll();
inputGraphicContainer = [];
};
//调用GP服务生成缓冲区
document.getElementById("buffer").onclick = () => {
const gpUrl="http://localhost:6080/arcgis/rest/services/gp/bufferService1/GPServer/bufferGPModel";
const featureSet = new FeatureSet();
featureSet.features = inputGraphicContainer;
const dis = new LinearUnit({
"distance": 5,
"units": "miles"
});
const params = {
input: featureSet,
dis: dis
};
const options = {
outSpatialReference: {
wkid: 102100
}
};
geoprocessor.execute(gpUrl, params, options).then(drawResultData);
}
function drawResultData(result) {
const resultFeatures = result.results[0].value.features;
const bufferGraphics = resultFeatures.map((feature) => {
feature.symbol = fillSymbol;
return feature;
});
graphicsLayer.addMany(bufferGraphics);
view.goTo({
target: bufferGraphics,
tilt: 0
}).catch((error) => {
if (error.name != "AbortError") {
console.error(error);
}
});
}
});
</script>
</head>
<body>
<div id="MyMapDiv" class="MapClass" style="width:900px;height:600px;"></div>
<input id="Btn" type="button" value="清除" />
<input id="buffer" type="button" value="缓冲区分析" />
</body>
</html>
(2)实现结果
![](https://file.jishuzhan.net/article/1761995169915211778/d96210fc48ab3e1ff3d9be7b935679e4.webp)
![](https://file.jishuzhan.net/article/1761995169915211778/b5e36278912a6c5ba7fd75207d8f50f8.webp)
参考资料:
[1] 一入GIS深似海. 不一样的前端,JavaScript之arcgis api教程; 2020-11-02 [accessed 2024-02-25].
[2] 码农阿焦. ArcGIS API For JavaScript使用自定义GP服务; 2019-03-14 [accessed 2024-02-25].
[3] gis_morningsun. Arcgis javascript那些事儿(十六)------GP服务的发布与使用; 2017-08-10 [accessed 2024-02-25].
[4] 爱睡懒觉的老舅. 07-ArcGIS API For JavaScript之调用GP服务; 2019-11-26 [accessed 2024-02-25].
[5] No8g攻城狮. 【前端用法】jQuery在线引用地址(全); 2023-12-16 [accessed 2024-02-25].
[6] lqdcanty. jquery中click点击事件嵌套后多次触发的解决方案; 2017-06-01 [accessed 2024-02-25].
[7] 小苗吃不够 . jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件; 2022-09-05 [accessed 2024-02-25].
[8] 孙霸天. GP服务的使用详解; 2022-01-28 [accessed 2024-02-25].
[9] 不断学习的GISer. arcgis js 4.x 调用gp栅格计算将结果渲染后叠加到天地图; 2021-11-11 [accessed 2024-02-25].
[10] 数据库及DotNet开发. 图解ArcGIS Server之发布GP服务-返回矢量数据; 2016-12-14 [accessed 2024-02-25].
[11] zhoutaotao0509. 基于ArcGIS API For JavaScript调用GP服务实现动态插值分析实现; 2016-08-28 [accessed 2024-02-25].
[12] HPhone. 使用ArcGIS GP服务之五 JavaScript的调用; 2012-11-18 [accessed 2024-02-25].