本文所使用路径分析服务的数据与服务可以在ArcGIS Desktop 10.3制作网络数据集,并通过ArcGIS Server发布为NAServer中找到。使用ArcGIS API for JavaScript4.8调用该服务进行查询。结果如下图:
代码是在官方demo上修改来的,官方的demo是需要设备代理服务器,才能显示效果的,这里我直接设置了ArcGIS Server允许跨域,所以不需要设置代理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>ArcGIS demo</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/config",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/geometry/Extent",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/tasks/RouteTask",
"esri/tasks/support/RouteParameters",
"esri/tasks/support/FeatureSet",
"dojo/on",
"dojo/domReady"
], function (Map,
esriConfig,
MapView,
MapImageLayer,
Extent,
Graphic,
GraphicsLayer,
RouteTask,
RouteParameters,
FeatureSet,
on
) {
esriConfig.request.corsEnabledServers.push("localhost:6080");//设置地图服务器已允许跨域
var routeLayer = new GraphicsLayer();
//layer为原始路网数据层,可以不添加
var layer=new MapImageLayer({
url:"http://localhost:6080/arcgis/rest/services/route/MapServer"
});
var map = new Map({
basemap: "streets",
layers:[layer,routeLayer]
});
//起始点样式
var stopSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "cross",
size: 15,
outline: { // autocasts as new SimpleLineSymbol()
width: 4
}
};
//返回路线样式
var routeSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [0, 0, 255, 0.5],
width: 5
};
//查询参数
var routeParams = new RouteParameters({
stops: new FeatureSet(),//停靠点
// barriers:new FeatureSet(),//可通过此属性设置障碍点
outSpatialReference: { // 输出投影
wkid: 3857
}
});
//ArcGIS Server NA服务地址,NAServer/后为NAServer里的图层名称,不支持中文,建议在发布服务前改掉
var routeTask = new RouteTask({
url: "http://localhost:6080/arcgis/rest/services/routeService/NAServer/path"
});
// 二维视图
var view = new MapView({
map: map,
container: "viewDiv"
});
view.ui.remove("attribution");//移除底部ESRI logo
//初始化位置
view.when(function () {
view.extent = new Extent({
xmin: 9170813.75677811,
ymin: 5213570.648163019,
xmax: 1.521319180644298E7,
ymax: 8073715.481906304,
spatialReference: {
wkid: 3857
}
})
});
//点击地图添加停靠点
on(view, "click", addStop);
function addStop(event) {
// 将停靠点添加在地图上
var stop = new Graphic({
geometry: event.mapPoint,
symbol: stopSymbol
});
routeLayer.add(stop);
// 将点击点加入到计算参数中,超过两个点则开始计算路线
routeParams.stops.features.push(stop);
if (routeParams.stops.features.length >= 2) {
// 进行查询
routeTask.solve(routeParams).then(showRoute,logError);
}
}
//输出查询的结果
function showRoute(data) {
var routeResult = data.routeResults[0].route;
routeResult.symbol = routeSymbol;
routeLayer.add(routeResult);
}
//输出查询错误信息
function logError(error) {
console.error(error);
}
})
</script>
</body>
</html>