Arcgis para 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