通过arcgis js api 4.9实现调用buffer的gp服务
1.构建模型
2.发布服务，将执行模式设置为同步
3.arcgis js前端调用gp服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>gp_buffer</title>
<link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/4.9/esri/css/main.css">
<script src="http://localhost:8080/arcgis_js_api/library/4.9/init.js"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/Graphic",
"esri/tasks/Geoprocessor",
"esri/tasks/support/FeatureSet",
"esri/tasks/support/LinearUnit",
"esri/geometry/SpatialReference",
"esri/geometry/geometryEngine"
], function(
Map, MapView,GraphicsLayer,Point, Graphic,Geoprocessor, FeatureSet,LinearUnit,SpatialReference,geometryEngine
) {
var gpUrl=
"http://localhost:6080/arcgis/rest/services/Buffer/GPServer/Buffer";
const map = new Map({
basemap: "topo"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 6,
spatialReference:{ wkid: 3857},
center:[0,0]
});
//创建矢量图层并加入到地图上
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
//设置点样式
var markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [255, 0, 0],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
};
//设置面（缓冲区)样式
var fillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [1, 2, 224, 0.75],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 159],
width: 1
}
};
//创建爱你gp服务矢量并设置输出的坐标参考
var gp=new Geoprocessor({
url:gpUrl
});
gp.outSpatialReference = { // autocasts as new SpatialReference()
wkid: 3857
};
//将buffer回调函数注册到单击视图事件上
view.on("click",buffer);
function buffer(event){
var point=event.mapPoint;
//构建矢量数据源，包含几何和样式
var inputGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
//将矢量数据源添加到矢量图层中
graphicsLayer.add(inputGraphic);
var inputGraphicContainer = [];
inputGraphicContainer.push(inputGraphic);
//创建要素集实例，它的features位graphic数组
var featureSet = new FeatureSet();
featureSet.features = inputGraphicContainer;
var bufferDistance = new LinearUnit();
bufferDistance.distance = 150000;
bufferDistance.units = "meters";
//参数名input、dis要与gp服务的参数名保持一致，否则无效
var params = {
input : featureSet,
dis:bufferDistance
};
//同步执行地理处理任务，返回位Promise<Object>类型
gp.execute(params).then(result);
}
function result(data) {
console.log(data);
//data.results[0].value即返回结果为feature-record-set-layer类型对应的是js中的FeatureSet类型
var resultFeatures=data.results[0].value.features;
// 对每个矢量图形进行符号化
var bufferGraphics = resultFeatures.map(function(feature) {
feature.symbol = fillSymbol;
return feature;
});
//将结果加到graphicsLayer图层中
graphicsLayer.addMany(bufferGraphics);
}
})
</script>
<body>
<div id="viewDiv"></div>
</body>
</html>
4.结果
