How to draw routes on arcgis map using javascript API?
Question
I am trying to use VRP API from Arcgis. The API returns routes in response in json format. Can some guide me how to visualize these routes on map using Arcgis javascript API.
Here is the response json:
{ "paramName": "out_routes", "dataType": "GPFeatureRecordSetLayer", "value": { "displayFieldName": "", "geometryType": "esriGeometryPolyline", "spatialReference": { "wkid": 4326, "latestWkid": 4326 }, "fields": [ { "name": "ObjectID", "type": "esriFieldTypeOID", "alias": "ObjectID" }, { "name": "Name", "type": "esriFieldTypeString", "alias": "Name", "length": 128 }, { "name": "ViolatedConstraints", "type": "esriFieldTypeInteger", "alias": "ViolatedConstraints" }, { "name": "OrderCount", "type": "esriFieldTypeInteger", "alias": "OrderCount" }, { "name": "TotalCost", "type": "esriFieldTypeDouble", "alias": "TotalCost" }, { "name": "RegularTimeCost", "type": "esriFieldTypeDouble", "alias": "RegularTimeCost" }, { "name": "OvertimeCost", "type": "esriFieldTypeDouble", "alias": "OvertimeCost" }, { "name": "DistanceCost", "type": "esriFieldTypeDouble", "alias": "DistanceCost" }, { "name": "TotalTime", "type": "esriFieldTypeDouble", "alias": "TotalTime" }, { "name": "TotalOrderServiceTime", "type": "esriFieldTypeDouble", "alias": "TotalOrderServiceTime" }, { "name": "TotalBreakServiceTime", "type": "esriFieldTypeDouble", "alias": "TotalBreakServiceTime" }, { "name": "TotalTravelTime", "type": "esriFieldTypeDouble", "alias": "TotalTravelTime" }, { "name": "TotalDistance", "type": "esriFieldTypeDouble", "alias": "TotalDistance" }, { "name": "StartTime", "type": "esriFieldTypeDate", "alias": "StartTime", "length": 16 }, { "name": "EndTime", "type": "esriFieldTypeDate", "alias": "EndTime", "length": 16 }, { "name": "TotalWaitTime", "type": "esriFieldTypeDouble", "alias": "TotalWaitTime" }, { "name": "TotalViolationTime", "type": "esriFieldTypeDouble", "alias": "TotalViolationTime" }, { "name": "RenewalCount", "type": "esriFieldTypeInteger", "alias": "RenewalCount" }, { "name": "TotalRenewalServiceTime", "type": "esriFieldTypeDouble", "alias": "TotalRenewalServiceTime" }, { "name": "Shape_Length", "type": "esriFieldTypeDouble", "alias": "Shape_Length" } ], "features": [ { "attributes": { "ObjectID": 1, "Name": "Truck_1", "ViolatedConstraints": null, "OrderCount": 2, "TotalCost": 55.12577115597857, "RegularTimeCost": 32.368821966275576, "OvertimeCost": 0, "DistanceCost": 22.756949189702993, "TotalTime": 161.84410983137786, "TotalOrderServiceTime": 49, "TotalBreakServiceTime": 0, "TotalTravelTime": 52.844109831377864, "TotalDistance": 15.171299459801997, "StartTime": 1355241600000, "EndTime": 1355251310647, "TotalWaitTime": 0, "TotalViolationTime": 0, "RenewalCount": 0, "TotalRenewalServiceTime": 0, "Shape_Length": 0.27770417275136994 }, "geometry": { "paths": [ [ [ -122.39476499860575, 37.79623499914595 ], [ -122.39486000028876, 37.79632999992958 ] ], [ [ -122.46491587646648, 37.77469887205535 ], [ -122.4648300002043, 37.77348999976374 ] ] ] } }, { "attributes": { "ObjectID": 2, "Name": "Truck_2", "ViolatedConstraints": null, "OrderCount": 2, "TotalCost": 58.98111973045911, "RegularTimeCost": 31.262990736961367, "OvertimeCost": 0, "DistanceCost": 27.71812899349775, "TotalTime": 156.31495368480682, "TotalOrderServiceTime": 43, "TotalBreakServiceTime": 0, "TotalTravelTime": 53.314953684806824, "TotalDistance": 18.478752662331832, "StartTime": 1355241600000, "EndTime": 1355250978897, "TotalWaitTime": 0, "TotalViolationTime": 0, "RenewalCount": 0, "TotalRenewalServiceTime": 0, "Shape_Length": 0.30798071724323045 }, "geometry": { "paths": [ [ [ -122.39476499860575, 37.79623499914595 ], [ -122.39486000028876, 37.79632999992958 ] ], [ [ -122.47389692820065, 37.74313425554152 ], [ -122.47462999977466, 37.74310000036479 ] ] ] } }, { "attributes": { "ObjectID": 3, "Name": "Truck_3", "ViolatedConstraints": null, "OrderCount": 2, "TotalCost": 59.96986647554318, "RegularTimeCost": 28.12653774395585, "OvertimeCost": 0, "DistanceCost": 31.843328731587327, "TotalTime": 140.63268871977925, "TotalOrderServiceTime": 38, "TotalBreakServiceTime": 0, "TotalTravelTime": 42.63268871977925, "TotalDistance": 21.228885821058217, "StartTime": 1355241600000, "EndTime": 1355250037961, "TotalWaitTime": 0, "TotalViolationTime": 0, "RenewalCount": 0, "TotalRenewalServiceTime": 0, "Shape_Length": 0.3486039472893737 }, "geometry": { "paths": [ [ [ -122.39476499860575, 37.79623499914595 ], [ -122.39486000028876, 37.79632999992958 ] ], [ [ -122.44930025350385, 37.731549383197546 ], [ -122.45112999974964, 37.73153999967133 ] ] ] } } ], "exceededTransferLimit": false } }
2 answers
solution1
2 ACCPTED 2017-01-07 16:35:18
Here's one way to do it, assuming you're using the ArcGIS API for JavaScript version 4.2 (you can use a similar approach if you're still on 3.x).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>VRP Graphics</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
/**
* Require the modules needed to do the graphics. Don't forget to
* include them as function parameters a few lines down as well!
*/
"dojo/_base/array",
"esri/Graphic",
"esri/symbols/SimpleLineSymbol",
"dojo/domReady!"
], function(Map, MapView, array, Graphic, SimpleLineSymbol) {
/**
* You're getting the JSON from the VRP service. Here I'm just including
* your JSON response as a variable. You won't do this.
*/
var responseJson = { "paramName": "out_routes", "dataType": "GPFeatureRecordSetLayer", "value": { "displayFieldName": "", "geometryType": "esriGeometryPolyline", "spatialReference": { "wkid": 4326, "latestWkid": 4326 }, "fields": [ { "name": "ObjectID", "type": "esriFieldTypeOID", "alias": "ObjectID" }, { "name": "Name", "type": "esriFieldTypeString", "alias": "Name", "length": 128 }, { "name": "ViolatedConstraints", "type": "esriFieldTypeInteger", "alias": "ViolatedConstraints" }, { "name": "OrderCount", "type": "esriFieldTypeInteger", "alias": "OrderCount" }, { "name": "TotalCost", "type": "esriFieldTypeDouble", "alias": "TotalCost" }, { "name": "RegularTimeCost", "type": "esriFieldTypeDouble", "alias": "RegularTimeCost" }, { "name": "OvertimeCost", "type": "esriFieldTypeDouble", "alias": "OvertimeCost" }, { "name": "DistanceCost", "type": "esriFieldTypeDouble", "alias": "DistanceCost" }, { "name": "TotalTime", "type": "esriFieldTypeDouble", "alias": "TotalTime" }, { "name": "TotalOrderServiceTime", "type": "esriFieldTypeDouble", "alias": "TotalOrderServiceTime" }, { "name": "TotalBreakServiceTime", "type": "esriFieldTypeDouble", "alias": "TotalBreakServiceTime" }, { "name": "TotalTravelTime", "type": "esriFieldTypeDouble", "alias": "TotalTravelTime" }, { "name": "TotalDistance", "type": "esriFieldTypeDouble", "alias": "TotalDistance" }, { "name": "StartTime", "type": "esriFieldTypeDate", "alias": "StartTime", "length": 16 }, { "name": "EndTime", "type": "esriFieldTypeDate", "alias": "EndTime", "length": 16 }, { "name": "TotalWaitTime", "type": "esriFieldTypeDouble", "alias": "TotalWaitTime" }, { "name": "TotalViolationTime", "type": "esriFieldTypeDouble", "alias": "TotalViolationTime" }, { "name": "RenewalCount", "type": "esriFieldTypeInteger", "alias": "RenewalCount" }, { "name": "TotalRenewalServiceTime", "type": "esriFieldTypeDouble", "alias": "TotalRenewalServiceTime" }, { "name": "Shape_Length", "type": "esriFieldTypeDouble", "alias": "Shape_Length" } ], "features": [ { "attributes": { "ObjectID": 1, "Name": "Truck_1", "ViolatedConstraints": null, "OrderCount": 2, "TotalCost": 55.12577115597857, "RegularTimeCost": 32.368821966275576, "OvertimeCost": 0, "DistanceCost": 22.756949189702993, "TotalTime": 161.84410983137786, "TotalOrderServiceTime": 49, "TotalBreakServiceTime": 0, "TotalTravelTime": 52.844109831377864, "TotalDistance": 15.171299459801997, "StartTime": 1355241600000, "EndTime": 1355251310647, "TotalWaitTime": 0, "TotalViolationTime": 0, "RenewalCount": 0, "TotalRenewalServiceTime": 0, "Shape_Length": 0.27770417275136994 }, "geometry": { "paths": [ [ [ -122.39476499860575, 37.79623499914595 ], [ -122.39486000028876, 37.79632999992958 ] ], [ [ -122.46491587646648, 37.77469887205535 ], [ -122.4648300002043, 37.77348999976374 ] ] ] } }, { "attributes": { "ObjectID": 2, "Name": "Truck_2", "ViolatedConstraints": null, "OrderCount": 2, "TotalCost": 58.98111973045911, "RegularTimeCost": 31.262990736961367, "OvertimeCost": 0, "DistanceCost": 27.71812899349775, "TotalTime": 156.31495368480682, "TotalOrderServiceTime": 43, "TotalBreakServiceTime": 0, "TotalTravelTime": 53.314953684806824, "TotalDistance": 18.478752662331832, "StartTime": 1355241600000, "EndTime": 1355250978897, "TotalWaitTime": 0, "TotalViolationTime": 0, "RenewalCount": 0, "TotalRenewalServiceTime": 0, "Shape_Length": 0.30798071724323045 }, "geometry": { "paths": [ [ [ -122.39476499860575, 37.79623499914595 ], [ -122.39486000028876, 37.79632999992958 ] ], [ [ -122.47389692820065, 37.74313425554152 ], [ -122.47462999977466, 37.74310000036479 ] ] ] } }, { "attributes": { "ObjectID": 3, "Name": "Truck_3", "ViolatedConstraints": null, "OrderCount": 2, "TotalCost": 59.96986647554318, "RegularTimeCost": 28.12653774395585, "OvertimeCost": 0, "DistanceCost": 31.843328731587327, "TotalTime": 140.63268871977925, "TotalOrderServiceTime": 38, "TotalBreakServiceTime": 0, "TotalTravelTime": 42.63268871977925, "TotalDistance": 21.228885821058217, "StartTime": 1355241600000, "EndTime": 1355250037961, "TotalWaitTime": 0, "TotalViolationTime": 0, "RenewalCount": 0, "TotalRenewalServiceTime": 0, "Shape_Length": 0.3486039472893737 }, "geometry": { "paths": [ [ [ -122.39476499860575, 37.79623499914595 ], [ -122.39486000028876, 37.79632999992958 ] ], [ [ -122.44930025350385, 37.731549383197546 ], [ -122.45112999974964, 37.73153999967133 ] ] ] } } ], "exceededTransferLimit": false } };
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 14,
center: [-122.452, 37.750]
});
/**
* Create a line symbol for the graphics.
*/
var lineSymbol = new SimpleLineSymbol({
color: [255, 255, 0],
width: 4
});
/**
* Loop through the JSON object's value.features array. For each one,
* create a Graphic and add it to the map.
*/
array.forEach(responseJson.value.features, function (feature) {
feature.symbol = lineSymbol;
var graphic = Graphic.fromJSON(feature);
graphic.symbol = lineSymbol;
view.graphics.add(graphic);
}, this);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
solution2
1 2017-01-17 16:17:14
Have a look at this sample page .
If that is what you're looking for the github project can be found here .
It's a non-trivial solution and hard to summarize it. I suggest studying the source code .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
ArcGIS Javascript API - how to get map url using jquery ajax
How to draw a line between two points in ArcGIS API for JavaScript
How to directly draw points and text with ArcGIS JavaScript API
Using arcgis javascript API
displaying legend for dynamic map service using arcGIS javascript API is not happening
How to get graphics points after draw using arcgis api
Display individual layer of a KMZ layer on map using ArcGIS API for JavaScript
Map data from a CSV layer using arcgis javascript api
ArcGIS API for JavaScript - How to stop infoWindow cropping at map edge?
How to display attached image on map click in ArcGis JavaScript API?
Related Tags