javascript APIを使用してarcgisマップにルートを描画する方法は？

私はVRP APIをArcgisから使用しようとしています。 APIは、json形式で応答してルートを返します。 Arcgis javascript APIを使用して地図上にこれらのルートを視覚化する方法を教えてください。javascript APIを使用してarcgisマップにルートを描画する方法は？

{ 
 
    "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 
 
    } 
 
}

出典

2017-01-06 Adnan

使用しているJavaScriptのArcGIS APIのバージョンはどれですか？ –

ここであれば（あなたが同様のアプローチを使用することができますが、JavaScriptバージョン4.2用のArcGIS APIを使用していると仮定すると、それを行うための一つの方法です。ここで

は、応答JSONがありますあなたはまだ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>

出典

2017-01-07 16:35:18

私はルートラインに矢印の頭を表示したい。どのようにそれを行うにはどのようなアイデア？ – Adnan

私は分かりません。ごめんなさい。 –

あなたは、矢印の頭にしたい場所でポイントの機能を使用することができます。 –

this sample pageをご覧ください。

githubプロジェクトをお探しの場合は、hereをご覧ください。

これは簡単な解決策であり、要約するのは難しいです。私はsource codeを勉強することを提案します。

出典

2017-01-17 16:17:14

javascript APIを使用してarcgisマップにルートを描画する方法は？

答えて

関連する問題