ArcGIS API For JavaScript（五）呼叫GP服務--簡單網路路徑分析
ArcGIS API For JavaScript（五）呼叫GP服務--簡單網路路徑分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網路路徑分析</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
<link
<script src="http://js.arcgis.com/3.9/"></script>
<style>
#mapDiv {
height: 600px;
width: 900px;
border:1px solid red;
}
</style>
<script>
require(["esri/map",
"dojo/on"
"dojo/dom",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/RouteTask",
"esri/tasks/FeatureSet",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/TextSymbol",
"esri/toolbars/draw",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/RouteParameters",
"dojo/colors",
"esri/graphic",
"dojo/domReady!"],
function
ArcGISDynamicMapServiceLayer,
RouteTask,
FeatureSet,
SimpleMarkerSymbol,
TextSymbol,
Draw,
SimpleLineSymbol,
RouteParameters,
Color,
Graphic
) {
var map = new Map("mapDiv");
var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/%E8%B7%AF%E5%BE%84%E5%88%86%E6%9E%90/MapServer");
map.addLayer(layer)
//建立路徑分析物件
var shortestAnalyst = new RouteTask("http://localhost:6080/arcgis/rest/services/test/%E8%B7%AF%E5%BE%84%E5%88%86%E6%9E%90/NAServer/Route");
//建立路徑引數物件
var routeParas = new RouteParameters();
//障礙點，但是此時障礙點為空
routeParas.barriers = new FeatureSet();
//停靠點，但是此時停靠點為空
routeParas.stops = new FeatureSet();
//路徑是否有方向
routeParas.returnDirections = false;
//是否返回路徑，此處必須返回
routeParas.returnRoutes = true;
//空間參考
routeParas.outSpatialReference = map.SpatialReference;
//定義一個標誌
//selectPointID=0什麼都不做
//selectPointID=1說明是新增停靠點
//selectPointID=2說明是新增障礙點
var selectPointID;
//給停靠點按鈕新增點選事件
on(dom.byId("stop"),"click",function(){
selectPointID = 1;
})
//給障礙點按鈕新增點選事件
on(dom.byId("barriers"),"click",function(){
selectPointID = 2;
})
//定義停靠點的符號
var stopSymbol = new SimpleMarkerSymbol();
stopSymbol.style = SimpleMarkerSymbol.STYLE_CIRCLE;
stopSymbol.setSize(14);
stopSymbol.setColor(new Color("#FFFF00"));
//定義障礙點的符號
var barrierSymbol = new SimpleMarkerSymbol();
barrierSymbol.style = SimpleMarkerSymbol.STYLE_CIRCLE;
barrierSymbol.setSize(14);
barrierSymbol.setColor(new Color("#ff2200"));
on(map, "mouse-down", function(evt){
//通過selectPointID判斷是新增是停靠點還是障礙點
switch (selectPointID) {
case 0:
break;
case 1:
//獲得停靠點的座標
var pointStop=evt.mapPoint;
var gr=new Graphic(pointStop,stopSymbol);
//構建停靠點的引數
routeParas.stops.features.push(gr);
break;
case 2:
//獲得障礙點的座標
var pointBarrier=evt.mapPoint;
var gr=new Graphic(pointBarrier,barrierSymbol);
//構建障礙點的引數
routeParas.barriers.features.push(gr);
break;
}
//如果selectPointID不等於0，將點的座標在地圖上顯示出來
if (selectPointID != 0) {
addTextPoint("停靠點", pointStop, stopSymbol);
addTextPoint("障礙點", pointBarrier, barrierSymbol);
//selectPointID = 0;
}
});
//文字符號：文字資訊，點座標，符號
function addTextPoint(text,point,symbol) {
var textSymbol = new TextSymbol(text);
textSymbol.setColor(new Color([128, 0, 0]));
var graphicText = Graphic(point, textSymbol);
var graphicpoint = new Graphic(point, symbol);
//用預設的圖層新增
map.graphics.add(graphicpoint);
map.graphics.add(graphicText);
}
//給分析按鈕新增點選事件
on(dom.byId("analyse"),"click",function(){
//如果障礙點或者停靠點的個數有一個為0，提示使用者引數輸入不對
if (routeParas.stops.features.length == 0 )
{
alert("輸入引數不全，無法分析");
return;
}
//執行路徑分析函式
shortestAnalyst.solve(routeParas, showRoute)
})
//處理路徑分析返回的結果。
function showRoute(solveResult) {
//路徑分析的結果
var routeResults = solveResult.routeResults;
//路徑分析的長度
var res = routeResults.length;
//路徑的符號
routeSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([56, 168, 10]), 3);
if (res > 0) {
for (var i = 0; i < res; i++) {
var graphicroute = routeResults[i];
var graphic = graphicroute.route;
graphic.setSymbol(routeSymbol);
map.graphics.add(graphic);
}
}
else {
alert("沒有返回結果");
}
}
});
</script>
</head>
<body class="tundra">
<div id="mapDiv" class="MapClass"></div>
<input id="stop" type="button" value="停靠點" />
<input id="barriers" type="button" value="障礙點" />
<input id="analyse" type="button" value="分析" />
</body>
</html>
地理資訊科學
Writed By NX
QQ:1051926720