0

When I am trying to do the task about the ServiceAreaTask, the callback can not be executed.

This is my code:

<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the tasks-route sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/tasks-route/index.html
  -->
    <title>ServiceAreaTask - 4.11</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.11/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/tasks/ServiceAreaTask",
            "esri/tasks/support/ServiceAreaParameters",
            "esri/tasks/support/FeatureSet"
        ], function(
            Map,
            MapView,
            Graphic,
            GraphicsLayer,
            ServiceAreaTask,
            ServiceAreaParameters,
            FeatureSet
        ) {
            // Point the URL to a valid route service that uses an
            // ArcGIS Online hosted service proxy
            var serviceAreaTask = new ServiceAreaTask({
                url:
                    "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area"
            });

            // Setup the route parameters
            var params = new ServiceAreaParameters({
                facilities: new FeatureSet(),
                outSpatialReference: {
                    // autocasts as new SpatialReference()
                    wkid: 3857
                },
                defaultBreaks: [1, 2, 3]
            });

            // The stops and route result will be stored in this layer
            var incidentsGraphicsLayer = new GraphicsLayer();

            // Define the symbology used to display the stops
            var stopSymbol = {
                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                style: "cross",
                size: 15,
                outline: {
                    // autocasts as new SimpleLineSymbol()
                    width: 4
                }
            };

            var map = new Map({
                basemap: "streets",
                layers: [incidentsGraphicsLayer] // Add the route layer to the map
            });
            var view = new MapView({
                container: "viewDiv", // Reference to the scene div created in step 5
                map: map, // Reference to the map object created before the scene
                center: [-122.447, 37.781],
                zoom: 15
            });

            // Adds a graphic when the user clicks the map. If 2 or more points exist, route is solved.
            view.on("click",computeServiceArea);

            function computeServiceArea(event) {
                incidentsGraphicsLayer.removeAll();

                // Add a point at the location of the map click
                var stop = new Graphic({
                    geometry: event.mapPoint,
                    symbol: stopSymbol
                });
                incidentsGraphicsLayer.add(stop);

                // Execute the route task if 2 or more stops are input
                params.facilities.features.push(stop);
                serviceAreaTask.solve(params).then(showServiceAreas);

            }
            // Adds the solved route to the map as a graphic
            function showServiceAreas(solveResult) {
                var features = solveResult.serviceAreaPolygons;
                for (var f = 0, fl = features.length; f < fl; f++) {
                    var feature = features[f];
                    if (f == 0) {
                        var fillSymbol0 = {
                            type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
                            color: [255, 0, 0],
                            outline: {
                                // autocasts as new SimpleLineSymbol()
                                color: [255, 255, 255],
                                width: 2
                            }
                        };
                        feature.symbol=fillSymbol0;
                    }
                    else if (f == 1) {
                        var fillSymbol1 = {
                            type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
                            color: [ 0,255, 0],
                            outline: {
                                // autocasts as new SimpleLineSymbol()
                                color: [255, 255, 255],
                                width: 2
                            }
                        };
                        feature.symbol=fillSymbol1;
                    }
                    else if (f == 2) {
                        var fillSymbol2 = {
                            type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
                            color: [ 0, 0,255],
                            outline: {
                                // autocasts as new SimpleLineSymbol()
                                color: [255, 255, 255],
                                width: 2
                            }
                        };
                        feature.symbol=fillSymbol2;
                    }
                    incidentsGraphicsLayer.add(feature);
                }
            }
        });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</div>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.