Hi All,
When solving the route problem with ArcGIS Map SDKs for JavaScript 4.27, I got an unexplained result. There are 3 stops on the map and the 2nd stop should be a non-traversable network element position. However, the api returns the response with a route which curb approach is incorrect for 2nd stop.
<!DOCTYPE html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Network Invalid Location</title>
<style>
html,
body,
#viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; };
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
<style>
/* overwrite esri default css */
.esri-view .esri-view-surface--inset-outline:focus::after {
outline: none;
};
</style>
<script src="https://js.arcgis.com/4.27/"></script>
<script>
require([
"esri/config", "esri/intl", "esri/Map", "esri/views/MapView", "esri/geometry/Point", "esri/geometry/Polyline",
"esri/symbols/SimpleLineSymbol", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/rest/support/FeatureSet",
"esri/symbols/PictureMarkerSymbol", "esri/rest/route", "esri/rest/support/RouteParameters"],
function(
esriConfig, esriIntl, Map, MapView, Point, Polyline,
SimpleLineSymbol, Graphic, GraphicsLayer, FeatureSet,
PictureMarkerSymbol, route, RouteParameters) {
esriConfig.apiKey = "<YOUR_API_KEY>";
esriIntl.setLocale("en");
let _map, _stopLayer, _routeLayer;
let _stop1, _stop2, _stop3;
const CURB_APPROACH = {
EITHER_SIDE: 0,
RIGHT_SIDE: 1,
LEFT_SIDE: 2,
NO_U_TURN: 3
};
const initMap = () =>
{
_map = new Map({
basemap: "arcgis-streets" // Basemap layer service
});
const CREEK_VIEW_PLZ = [-77.519510, 39.042121];
const CONSTRAINT_EXTENT = {
type: "extent",
xmin: -180,
ymin: -70,
xmax: 180,
ymax: 70
};
const view = new MapView({
map: _map,
center: CREEK_VIEW_PLZ,
constraints: {
geometry: CONSTRAINT_EXTENT,
minZoom: 3,
maxZoom: 18
},
zoom: 16, // Zoom level
container: "viewDiv" // Div element
});
_stopLayer = new GraphicsLayer({ id: "stop-layer" });
_routeLayer = new GraphicsLayer({ id: "route-layer" });
_map.addMany([_routeLayer, _stopLayer]);
};
const stopSymbol = (sequence) =>
{
const svgString = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="28" height="28">' +
'<g>' +
'<circle r="12" cy="14" cx="14" stroke-linecap="butt" stroke="#000000" stroke-width="2" fill="#0000FF" />' +
`<text text-anchor="middle" font-size="12" x="50%" y="50%" dy=".3em" stroke-width="0" fill="#FFFFFF" >${sequence}</text>` +
'</g>' +
'</svg >';
const svg = `data:image/svg+xml;charset=UTF-8;base64,${btoa(svgString)}`;
return new PictureMarkerSymbol({ url: svg, height: 28, width: 28 });
};
const createStopGraphic = (location, sequence, curbApproach) =>
{
const { longitude, latitude } = location;
const geometry = new Point({
type: "point",
x: longitude,
y: latitude
});
const symbol = stopSymbol(sequence);
const attributes = {
CurbApproach: curbApproach,
Name: sequence,
Sequence: sequence
};
const graphic = new Graphic({ geometry, symbol, attributes });
return graphic;
};
const addStops = () =>
{
const location1 = { longitude: -77.520401, latitude: 39.043210 };
const location2 = { longitude: -77.5201, latitude: 39.0411 };
const location3 = { longitude: -77.518320, latitude: 39.042180 };
_stop1 = createStopGraphic(location1, 1, CURB_APPROACH.RIGHT_SIDE);
// curb approach is left side. This should be a non-traversable network element position.
_stop2 = createStopGraphic(location2, 2, CURB_APPROACH.LEFT_SIDE);
_stop3 = createStopGraphic(location3, 3, CURB_APPROACH.RIGHT_SIDE);
_stopLayer.addMany([_stop1, _stop2, _stop3]);
};
const calculateRoute = async () =>
{
const url = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World";
const defaultParameters = {
directionsLengthUnits: "kilometers",
findBestSequence: false,
ignoreInvalidLocations: false, // expectation: get errors when there are invalid stops.
impedanceAttribute: null,
outputGeometryPrecision: 0,
outputGeometryPrecisionUnits: "feet",
outputLines: "true-shape",
outSpatialReference: "102100",
pointBarriers: null,
polylineBarriers: null,
polygonBarriers: null,
preserveFirstStop: true,
preserveLastStop: true,
restrictionAttributes: [],
restrictUTurns: "at-dead-ends-only",
returnBarriers: false,
returnDirections: true,
returnPolygonBarriers: false,
returnPolylineBarriers: false,
returnPointBarriers: false,
returnTraversedEdges: false,
returnTraversedJunctions: false,
returnTraversedTurns: false,
returnRoutes: true,
returnStops: true,
returnZ: false,
startTime: new Date()
};
const featureSet = new FeatureSet({ features: [_stop1, _stop2, _stop3]});
const parameters = {
stops: featureSet
};
const params = Object.assign({}, defaultParameters, parameters);
const routeParameters = new RouteParameters(params);
return route.solve(url, routeParameters).then((response) => {
results = response?.routeResults[0];
return results;
}).catch((error) => {
console.log(error);
});
};
const addRoutes = (routeResults) =>
{
const route = routeResults.route;
route.symbol = {
type: "simple-line",
style: "solid",
color: "#0000FF",
width: 5
};
_routeLayer.add(route);
};
initMap();
addStops();
calculateRoute().then((routeResults) =>
{
addRoutes(routeResults);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
attention: the curb approach for 2nd stop is 2 (left-side).
This is the result shows in ArcMap 10.8.1
Is there any missing parameters in solving the problem?
Addition Information:
The response from https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve shows the curb approach is 2 (Left side)
Does it make sense?
Thanks,
Leo
Is there any information for this issue?