<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>RouteTask - 4.6</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #paneDiv { position: absolute; top: 10px; left: 62px; padding: 0 12px 0 12px; background-color: rgba(0, 0, 0, 0.5); color: white; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css"> <script src="https://js.arcgis.com/4.6/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/tasks/RouteTask", "esri/tasks/support/RouteParameters", "esri/tasks/support/FeatureSet", "esri/core/urlUtils", "dojo/on", "dojo/domReady!" ], function( Map, MapView, Graphic, GraphicsLayer, RouteTask, RouteParameters, FeatureSet, urlUtils, on ) { // Proxy the route requests to avoid prompt for log in urlUtils.addProxyRule({ urlPrefix: "route.arcgis.com", proxyUrl: "/sproxy/" }); // Point the URL to a valid route service var routeTask = new RouteTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World" }); // The stops and route result will be stored in this layer var routeLyr = new GraphicsLayer(); // Setup the route parameters var routeParams = new RouteParameters({ stops: new FeatureSet(), outSpatialReference: { // autocasts as new SpatialReference() wkid: 3857 } }); // Define the symbology used to display the stops var stopSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() style: "cross", size: 15, outline: { // autocasts as new SimpleLineSymbol() width: 4 } }; // Define the symbology used to display the route var routeSymbol = { type: "simple-line", // autocasts as SimpleLineSymbol() color: [0, 0, 255, 0.5], width: 5 }; var map = new Map({ basemap: "streets", layers: [routeLyr] // Add the route layer to the map }); var view = new MapView({ container: "viewDiv", // Reference to the scene div created in step 5 map: map, // Reference to the map object created before the scene center: [-117.195, 34.057], zoom: 14 }); // Adds a graphic when the user clicks the map. If 2 or more points exist, route is solved. on(view, "click", addStop); function addStop(event) { // Add a point at the location of the map click var stop = new Graphic({ geometry: event.mapPoint, symbol: stopSymbol }); routeLyr.add(stop); // Execute the route task if 2 or more stops are input routeParams.stops.features.push(stop); if (routeParams.stops.features.length >= 2) { routeTask.solve(routeParams).then(showRoute); } } // Adds the solved route to the map as a graphic function showRoute(data) { var routeResult = data.routeResults[0].route; routeResult.symbol = routeSymbol; routeLyr.add(routeResult); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="paneDiv"> <div> <p>Click on the map to add stops to the route. The route from the last stop to the newly added stop is calculated. If a stop is not reachable, it is removed and the last valid point is set as the starting point.</p> </div> </div> </body> </html>
这是官网找的一个路劲分析的demo 不知怎么不能运行
控制台打印错误是:
XMLHttpRequest cannot load file:///C:/sproxy/?https://route.arcgis.com/arcgis/rest/services/World/Rout…ibutes%22%3A%7B%7D%7D%5D%2C%22doNotLocateOnRestrictedElements%22%3Atrue%7D. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
很难受