ArcGIS dla JavaScript

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>ConnectOriginsToDestinations</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.39/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css" />
  <style>
    html,
    body,
    #border-container {
      height: 100%;
      margin: 0;
    }

    /* Don't display the analysis widget's close icon*/
    .esriAnalysis .esriAnalysisCloseIcon {
      display: none;
    }
  </style>
  <script src="https://js.arcgis.com/3.39/"></script>
  <script>
    require([
      "dojo/ready",
      "dojo/parser",
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/dijit/analysis/ConnectOriginsToDestinations",
      "esri/InfoTemplate",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      ready,
      parser,
      Map,
      FeatureLayer,
      ConnectOriginsToDestinations,
      InfoTemplate
    ) {
      ready(function() {
        parser.parse();

        var map = new Map("map", {
          basemap: "topo-vector",
          center: [-117.76, 34.06],
          zoom: 9
        });
        var originsLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/origins/FeatureServer/0");
        var destinationsLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/destinations_fs/FeatureServer/0", {
          name: "destinations",
          outFields: ["*"]
        });
        map.addLayers([originsLayer, destinationsLayer]);
        var analysisTool;
        map.on("layers-add-result", initializeTool);

        function initializeTool() {
          var params = {};
          params.portalUrl = "https://www.arcgis.com";
          params.originsLayers = [ originsLayer ];
          params.featureLayers = [ destinationsLayer ];
          params.map = map;
          params.distanceDefaultUnits = "Miles";
          params.returnFeatureCollection = true;
          analysisTool = new ConnectOriginsToDestinations(params, "toolPane");
          analysisTool.startup();
          analysisTool.on("job-result", function(result) {
            var resultLayer = new FeatureLayer(result.value.url || result.value, {
              outFields: ['*'],
              infoTemplate: new InfoTemplate()
            });
            map.addLayer(resultLayer);
          });
        }
      });
    });
  </script>
</head>
<body class="claro">
  <div id="border-container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding: 0;">
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;">
      <div id="toolPane">
      </div>
    </div>
  </div>
</body>
</html>
Graceful Gnu