arcgis for js路網分析功能實作
1.軟體環境
arcgis server10.1開發
api arcgis server api3.22
tomcat7
路網服務釋出後面教程檢視
2.代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路網分析</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8087/arcgis_js_api/library/3.22/3.22/esri/css/esri.css" />
<script src="http://localhost:8087/arcgis_js_api/library/3.22/3.22/init.js"></script>
<script src="../js/jquery-1.3.1.js"></script>
<style>
html, body, #map {
width: %;
height: %;
margin: ;
padding: ;
}
</style>
<script>
var map;var tb;
require([
"dojo/dom-construct",
"esri/Color",
"esri/dijit/Geocoder",
"esri/dijit/Popup",
"esri/InfoTemplate",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/map",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol", "esri/config",
"esri/layers/agstiled","esri/toolbars/draw",
"esri/tasks/query","esri/symbols/SimpleMarkerSymbol","esri/graphic","esri/geometry/Extent","esri/tasks/QueryTask",
"esri/tasks/RouteTask","esri/tasks/RouteParameters","esri/tasks/FeatureSet",
"dojo/domReady!"
], function(
domConstruct, Color, Geocoder, Popup, InfoTemplate,
ArcGISTiledMapServiceLayer, Map,SimpleFillSymbol,SimpleLineSymbol,Config,
Agstiled,Draw,Query,SimpleMarkerSymbol,Graphic,Extent,QueryTask,RouteTask,RouteParameters,FeatureSet
) {
var map, defaultSymbol, highlightSymbol, resultTemplate,tb;
var stopSymbol;
map = new Map("map", {
extent: new Extent({
"xmin":,"ymin":,"xmax":,"ymax":,
"spatialReference":{"wkid":}})
});
var oilAndGasLayer = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/itms/MapServer");
map.addLayer(oilAndGasLayer);
stopSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CROSS).setSize();
stopSymbol.outline.setWidth();
routeSymbol = new SimpleLineSymbol().setColor(new Color([,,,])).setWidth();
debugger;
var routeTask = new RouteTask("http://localhost:6080/arcgis/rest/services/roadNet/NAServer/Route");
routeParams = new RouteParameters();
routeParams.stops = new FeatureSet();
routeTask.on("solve-complete",function(routeResults, barriers){
debugger
map.graphics.add(routeResults.result.routeResults[].route.setSymbol(routeSymbol));
});
routeTask.on("error",function (err) {
alert("An error occured\n" + err.message + "\n" + err.details.join("\n"));
routeParams.stops.features.splice(, , lastStop);
map.graphics.remove(routeParams.stops.features.splice(, )[]);
})
map.on("click",function(evt){
debugger;
var stop = map.graphics.add(new Graphic(evt.mapPoint, stopSymbol));
routeParams.stops.features.push(stop);
if (routeParams.stops.features.length >= ) {
routeTask.solve(routeParams);
lastStop = routeParams.stops.features.splice(, )[];
}
});
function addStop(evt) {
var stop = map.graphics.add(new esri.Graphic(evt.mapPoint, stopSymbol));
routeParams.stops.features.push(stop);
if (routeParams.stops.features.length >= ) {
routeTask.solve(routeParams);
lastStop = routeParams.stops.features.splice(, )[];
}
}
});
</script>
</head>
<body>
<div id="map" style="width:1000px; height:800px; border:1px solid #000;"></div>
<p>點選兩個點以上可生成路徑</p>
</body>
</html>
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)