<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>ArcGIS Developer Guide: Facility routing</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.24/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.24/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/rest/closestFacility",
"esri/rest/support/ClosestFacilityParameters",
"esri/rest/support/FeatureSet",
"esri/symbols/Symbol",
], function (
esriConfig,
Map,
MapView,
Graphic,
GraphicsLayer,
closestFacility,
ClosestFacilityParameters,
FeatureSet,
Symbol
) {
esriConfig.apiKey = "YOUR_API_KEY";
const routeSymbol = {
type: "simple-line",
color: [50, 150, 255, 0.75],
width: "5",
};
const facilities = [
{
id: "a",
center: [-122.67484, 45.52087],
},
{
id: "b",
center: [-122.68365, 45.52327],
},
{
id: "c",
center: [-122.66406, 45.52378],
},
{
id: "d",
center: [-122.6631, 45.52093],
},
{
id: "e",
center: [-122.66208, 45.5197],
},
{
id: "f",
center: [-122.66247, 45.51845],
},
{
id: "g",
center: [-122.66299, 45.51827],
},
];
const routesLayer = new GraphicsLayer();
const facilitiesLayer = new GraphicsLayer();
const map = new Map({
basemap: "arcgis-streets",
layers: [routesLayer, facilitiesLayer],
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-122.67584, 45.52087],
zoom: 14,
constraints: {
snapToZoom: false,
},
});
view.popup.actions = [];
view.when(() => {
addFacilityGraphics();
findClosestFacility(
addStartGraphic(view.center),
facilitiesLayer.graphics
);
});
view.on("click", (event) => {
view.hitTest(event).then((response) => {
if (response.results.length === 1) {
findClosestFacility(
addStartGraphic(event.mapPoint),
facilitiesLayer.graphics
);
}
});
});
function findClosestFacility(startFeature, facilityFeatures) {
const params = new ClosestFacilityParameters({
incidents: new FeatureSet({
features: [startFeature],
}),
facilities: new FeatureSet({
features: facilityFeatures.toArray(),
}),
returnRoutes: true,
returnFacilities: true,
defaultTargetFacilityCount: 3,
});
const url =
"https://route-api.arcgis.com/arcgis/rest/services/World/ClosestFacility/NAServer/ClosestFacility_World";
closestFacility.solve(url, params).then(
(results) => {
showRoutes(results.routes);
},
(error) => {
console.log(error.details);
}
);
}
function addStartGraphic(point) {
view.graphics.removeAll();
const graphic = new Graphic({
symbol: {
type: "simple-marker",
color: [255, 255, 255, 1.0],
size: 8,
outline: {
color: [50, 50, 50],
width: 1,
},
},
geometry: point,
});
view.graphics.add(graphic);
return graphic;
}
function addFacilityGraphics() {
facilities.forEach((point) => {
facilitiesLayer.graphics.add(
new Graphic({
id: point.id,
symbol: {
type: "web-style",
name: "grocery-store",
styleName: "Esri2DPointSymbolsStyle",
},
geometry: {
type: "point",
longitude: point.center[0],
latitude: point.center[1],
spatialReference: view.spatialReference,
},
})
);
});
}
function showRoutes(routes) {
// Show the routes to the closest facilities
routesLayer.removeAll();
routes.forEach((route, i) => {
route.symbol = routeSymbol;
routesLayer.add(route);
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
代码无法运行,请重新传个正常的上来.
代码有漏洞