ArcGIS API for Javascript4.8 路徑網路分析、最短路徑查詢
阿新 • • 發佈：2019-02-05
程式碼是在官方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>