AnsweredAssumed Answered

How to fire the 'update-start' and 'update-end' events on graphics layer?

Question asked by leo.deng.transfinder on Nov 26, 2017
Latest reply on Nov 27, 2017 by rscheitlin

Hi,

   I'm using esri ArcGIS JavaScript API V3.22 for our product and I'm trying to get the cost time for a graphics layer rendering after pan / zoom the map.

   I take a scripts and could not fire the events of 'update-start' and 'update-end' for a GraphicsLayer.

   How to fire these events on GraphicsLayer?

   Thanks,

Leo

  

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Graphics Layer Update Events</title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
        <style>
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
            };
        </style>

        <script src="https://js.arcgis.com/3.22/"></script>
        <script>
            var map;
            require([
                "esri/map",
                "esri/Color",
                "esri/layers/GraphicsLayer",
                "esri/graphic",
                "esri/geometry/Extent",
                "esri/geometry/Point",
                "esri/symbols/SimpleMarkerSymbol",
                "dojo/domReady!"
            ], function(Map, Color, GraphicsLayer, Graphic, Extent, Point, SimpleMarkerSymbol){
                var bounds = new Extent({
                    "xmin":-180,
                    "ymin":0,
                    "xmax":180,
                    "ymax":80,
                    "spatialReference":{"wkid":4326}
                });
               
                map = new Map("map", {
                    extent: bounds,
                    logo: true
                });
               
                map.setExtent(new Extent({
                    "xmin":-76.06032092393646,
                    "ymin":42.00329938824891,
                    "xmax":-75.70875842393646,
                    "ymax":42.18164411481141,
                    "spatialReference":{"wkid":4326}
                }));
               
                layer = new GraphicsLayer({id: "graphics layer"});
                map.addLayer(layer);
               
                layer.on("update-start", function(){
                    // This is not triggered.
                    console.log("update-start");
                });
               
                layer.on("update-end", function(){
                    // This is not triggered.
                    console.log("update-end");
                });
               
                layer.on("update", function(){
                    console.log('update');
                });
               
                color = new Color([255,0,255,1]);
                for (var i = 0, length = 100; i<length; i++){
                    geometry = new Point([-75.923 + i * 0.001, 42.14 - i * 0.001]);
                    symbol = new SimpleMarkerSymbol().setSize(8).setColor(color);
                    graphic = new Graphic(geometry, symbol);
                    layer.add(graphic);
                }
            });
        </script>

    </head>
    <body>
        <div id="map" style="height:100%;">
        </div>
    </body>
</html>

Outcomes