[英]How to draw routes on arcgis map using javascript API?
我正在尝试使用Arcgis的VRP API。 API以json格式返回路由作为响应。 可以指导我如何使用Arcgis javascript API在地图上可视化这些路线。
这是响应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 } }
假设您使用的是ArcGIS API for JavaScript 4.2版，这是一种实现方法（如果仍使用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>
ArcGIS Javascript API-如何使用jquery ajax获取地图URL
[英]ArcGIS Javascript API - how to get map url using jquery ajax
如何在ArcGIS API for JavaScript中的两点之间画一条线
[英]How to draw a line between two points in ArcGIS API for JavaScript
如何使用ArcGIS JavaScript API直接绘制点和文本
[英]How to directly draw points and text with ArcGIS JavaScript API
使用arcGIS javascript API不会显示动态地图服务的图例
[英]displaying legend for dynamic map service using arcGIS javascript API is not happening
使用ArcGIS API for JavaScript在地图上显示KMZ图层的各个图层
[英]Display individual layer of a KMZ layer on map using ArcGIS API for JavaScript
ArcGIS API for JavaScript - 如何在地图边缘停止infoWindow裁剪？
[英]ArcGIS API for JavaScript - How to stop infoWindow cropping at map edge?
如何在ArcGis JavaScript API中单击地图以显示附加图像？
[英]How to display attached image on map click in ArcGis JavaScript API?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.