查找路径和方向
了解如何使用路径服务查找路径和方向。
路径分析是在街道网络中查找从起点到终点路径的过程。您可以使用路径服务查找路径、获取行驶方向、计算行驶时间，并解决复杂的多车辆配送问题。要创建路径，通常需要定义一组停靠点 (起点和一个或多个目的地)，并使用服务查找带有方向的路径。您还可以使用许多附加参数（如障碍和行驶模式）来优化结果。
在本教程中，您可以通过在地图上单击以定义起点和目的地。这些值可用于从路径服务获取路径和方向。方向也会显示在地图上。
步骤
创建新 Pen
添加模块
在
require语句中，添加Graphic、route、RouteParameters和FeatureSet模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。Add line. Add line. Add line. Add line. Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
更新地图
街道底图图层通常用于路径分析应用程序。更新 basemap 属性以使用 geoscene-navigation 底图图层，并将地图的位置更改为以 Los Angeles 为中心。
将
basemap属性更新为geoscene-navigation。Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //底图图层服务 }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>将
center属性更新为-118.24532,34.05398，并将zoom属性设置为12以便以 Los Angeles 为中心。Change line Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //底图图层服务 }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //经度、纬度 zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
定义服务 url
Rest 模块可向服务发出请求并返回结果。使用 route 模块访问路径服务。
创建一个名为
routeUrl的变量以引用路径服务。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //经度、纬度 zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
获取起点和终点
route 模块使用 stops 参数来查找路径。Stops 是表示路径起点和终点位置的图形。单击地图时，使用 View 中的 click 处理程序添加图形。图形将定义路径的 stops。
添加
click处理程序以将图形添加至视图。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>创建
addGraphic函数以显示起点位置处的白色标记以及终点位置处的黑色标记。将graphic添加到view中。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>更新
click处理程序以引用addGraphic函数。第一次单击将创建起点，第二次单击将创建目的地。后续单击将清除图形以定义新的起点和目的地。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>单击地图两次以确保创建图形。
查找路径
要求解路径，请将起点和终点图形作为 FeatureSet 添加到 stops 参数，然后使用 solve 方法。生成的路径将作为 Graphic 添加到地图中。
输入参数是求解路径所必需的。虽然您可以添加许多参数，例如停靠点和障碍，但您至少需要提供起点和终点。
创建
getRoute函数以添加RouteParameters并传入点图形。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>调用
solve方法以获取路径。当该方法返回时，从routeResults获取路径，并将其作为带有蓝线的Graphic添加到视图中。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>在传入第二个图形后 (
destination)，使用getRoute函数更新click处理程序。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // 调用路径服务 } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>在地图上单击两个位置以显示路径。
获取方向
您可以通过 RouteParameters 上的 returnDirections 属性从路径服务获取行驶方向。使用此属性可以返回方向，并将其作为 HTML 元素添加到地图中。
返回至
getRoute函数并将returnDirections属性设置为true。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>解析
solve方法后，创建一个directions有序列表元素，如果返回了生成路径的结果，该元素将显示出来。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // 显示方向 if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // Show each direction features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>为每个路径要素创建
li元素，以生成方向的有序列表，其距离以英里为单位。将每个direction附加到directions元素。Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // 显示方向 if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // 显示每个方向 features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>对于创建的每条新路径，请使用
empty方法从视图中移除所有现有 HTML 元素。将direction元素（其方向为列表项目）添加到视图的右上角。Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // Display directions if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // 显示每个方向 features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>添加
catch语句以在控制台中显示任何错误。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找路径和方向</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic", "geoscene/rest/route", "geoscene/rest/support/RouteParameters", "geoscene/rest/support/FeatureSet" ], function(geosceneConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.24532,34.05398], //Longitude, latitude zoom: 12 }); const routeUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/Route/NAServer/Route_World"; view.on("click", function(event){ if (view.graphics.length === 0) { addGraphic("origin", event.mapPoint); } else if (view.graphics.length === 1) { addGraphic("destination", event.mapPoint); getRoute(); // Call the route service } else { view.graphics.removeAll(); addGraphic("origin",event.mapPoint); } }); function addGraphic(type, point) { const graphic = new Graphic({ symbol: { type: "simple-marker", color: (type === "origin") ? "white" : "black", size: "8px" }, geometry: point }); view.graphics.add(graphic); } function getRoute() { const routeParams = new RouteParameters({ stops: new FeatureSet({ features: view.graphics.toArray() }), returnDirections: true }); route.solve(routeUrl, routeParams) .then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: [5, 150, 255], width: 3 }; view.graphics.add(result.route); }); // 显示方向 if (data.routeResults.length > 0) { const directions = document.createElement("ol"); directions.classList = "esri-widget esri-widget--panel esri-directions__scroller"; directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = data.routeResults[0].directions.features; // 显示每个方向 features.forEach(function(result,i){ const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }) .catch(function(error){ console.log(error); }) } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
运行应用程序
在 CodePen 中，运行代码以显示地图。
在地图上单击两次以显示路径方向。地图应支持两次单击以创建起点和终点，然后使用路径服务显示生成的路径和转弯方向。
下一步是什么？
要了解如何使用其他API 功能，请参阅以下教程：
解决方案
估计时间
10 分钟