在ArcGIS Server中发布已构建的可视域分析模型发布为空间处理服务中,我们已经将视域分析的计算发布为服务,发布成功后,打开ArcGIS Server管理页面,找到该服务,找到服务的连接地址。使用ArcGIS API for JS调用该服务,即可进行视域分析。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通视分析</title>
<link type="text/css" rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.8/esri/css/main.css"/>
<script src="http://localhost/arcgis_js_api/library/4.8/init.js"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<script>
require(["esri/Map",
"esri/Ground",
"esri/layers/ElevationLayer",
"esri/config",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/tasks/Geoprocessor",
"esri/tasks/support/LinearUnit",
"esri/tasks/support/FeatureSet",
"dojo/domReady"
], function (Map,
Ground,
ElevationLayer,
esriConfig,
SceneView,
GraphicsLayer, Graphic, Point,
Geoprocessor,
LinearUnit, FeatureSet
) {
esriConfig.request.corsEnabledServers.push("localhost:6080");//设置地图服务器已允许跨域
var customElevation = ElevationLayer({
url: "http://localhost:6080/arcgis/rest/services/dem/zzdem/ImageServer"
});
var map = new Map({
// basemap: "streets",//ESRI提供的底 图
basemap: "hybrid",//ESRI提供的影像图
ground: new Ground({
layers: [ customElevation ]
})
});
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: 2
}
};
//可视域填充样式
var fillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [226, 119, 40, 0.75],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
};
var view=new SceneView({
map:map,
container: "viewDiv"
});
view.ui.remove("attribution");//移除底部ESRI logo
//第一次位置跳转
view.when(function () {
view.goTo({
position: {
x: 113.642578125,
y: 34.7222900390625,
z: 700,
spatialReference: {
wkid: 4326
}
},
heading: 50,
tilt: 80
}, {
speedFactor: 0.7
});
});
//地理处理服务的地址,为GPServr地址+模型名称
var gpUrl =
"http://localhost:6080/arcgis/rest/services/gp/view/GPServer/view";
var gp = new Geoprocessor(gpUrl);
gp.outSpatialReference = { // 输出坐标系
wkid: 102100
};
//每一次点击地图,都会根据点的位置进行求解计算
view.on("click", computeViewshed);
function computeViewshed(event) {
graphicsLayer.removeAll();
var point = new Point({
longitude: event.mapPoint.longitude,
latitude: event.mapPoint.latitude
});
var inputGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
graphicsLayer.add(inputGraphic);
var inputGraphicContainer = [];
inputGraphicContainer.push(inputGraphic);
var featureSet = new FeatureSet();
featureSet.features = inputGraphicContainer;
var vsDistance = new LinearUnit();
vsDistance.distance = 1000;
vsDistance.units = "meters";//注意单位
var params = {
point: featureSet,//对应发布服务的point参数,为当前视点平面位置
dis: vsDistance//对应发布服务的dis参数,为可视的距离
};
//同步异步和服务器的设置有关
// 进行异步查询,使用gp.excute为同步查询
gp.submitJob(params).then(drawResultData,outError);
//进行同步查询
// gp.execute(params).then(drawResult,outError);
}
//接收异步结果,进行绘制
function drawResultData(result) {
console.log("分析完成");
console.log(result);
var jobId=result.jobId;
//根据jobID获取分析结果
//下面的第二个参数为,发布服务时,看到的结果参数的名称
gp.getResultData(jobId,"result").then(function (value) {
console.log("查询完成");
var resultFeatures = value.value.features;
// 给每一个结果添加样式
var viewshedGraphics = resultFeatures.map(function(feature) {
feature.symbol = fillSymbol;
return feature;
});
// 从俯视状态看结果
graphicsLayer.addMany(viewshedGraphics);
view.goTo({
target: viewshedGraphics,
tilt: 0
});
},outError)
}
//接收同步结果记性绘制
// function drawResult(result) {
// var resultFeatures = result.results[0].value.features;
// // 配置样式
// var viewshedGraphics = resultFeatures.map(function(feature) {
// feature.symbol = fillSymbol;
// return feature;
// });
//
// // 将结果添加到地图
// graphicsLayer.addMany(viewshedGraphics);
// view.goTo({
// target: viewshedGraphics,
// tilt: 0
// });
// }
//输出错误
function outError(e){
console.error(e);
}
})
</script>
</body>
</html>
结果下入:从点过查询点,到图上出结果需要2-3分钟的时间,耐心等待,不要重复点击。