AnsweredAssumed Answered

Performance issues on GraphicsLayer between versions 3.x > 4.x

Question asked by lorenzo.fedi72_developer on Mar 22, 2019
Latest reply on Mar 22, 2019 by rscheitlin

Hi All,

 

I'm experiencing strong performance issues between version 3.27 of ArcGis API for javascript and version 4.x.

 

I'm using same code on both platform (provided that map initialization is a bit changed in 4.x).

The issues is adding Graphic objects to GraphicsLayer. I'm using an instance of SimpleMarkerSymbol with an SVG path for its content.

 

The problem is: adding the same number of object to the map result in totally different timings.

 

15000 Graphic object with release 3.27 is immediate; with 4.10, it takes more than 30 seconds. What am i doing wrong? Furthermore, if i use older release, for example 4.5, performance seems to get better with older versions.

Really stuck on that, here's my sample project very minimal; please help on that..

 

thanks everybody,

 

<!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>Test Map</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.10/dijit/themes/claro/claro.css" />

    <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css" />

    <style>

      html,

      body,

      #viewDiv {

        margin: 0;

        padding: 0;

        width: 100%;

        height: 100%;

      }

    </style>

    <script src="https://js.arcgis.com/4.10/dojo/dojo.js"></script>

    <script>

    

      var lon = 11.22727222;

      var lat = 43.79665556;

      var square_len = 0.005;

      var graphic;

 

      var iconPath = "M24.0,2.199C11.9595,2.199,2.199,11.9595,2.199,24.0c0.0,12.0405,9.7605,21.801,21.801,21.801c12.0405,0.0,21.801-9.7605,21.801-21.801C45.801,11.9595,36.0405,2.199,24.0,2.199zM31.0935,11.0625c1.401,0.0,2.532,2.2245,2.532,4.968S32.4915,21.0,31.0935,21.0c-1.398,0.0-2.532-2.2245-2.532-4.968S29.697,11.0625,31.0935,11.0625zM16.656,11.0625c1.398,0.0,2.532,2.2245,2.532,4.968S18.0555,21.0,16.656,21.0s-2.532-2.2245-2.532-4.968S15.258,11.0625,16.656,11.0625zM24.0315,39.0c-4.3095,0.0-8.3445-2.6355-11.8185-7.2165c3.5955,2.346,7.5315,3.654,11.661,3.654c4.3845,0.0,8.5515-1.47,12.3225-4.101C32.649,36.198,28.485,39.0,24.0315,39.0z";

      var initColor = "#ce641d";

 

      var myMap, view;

      require([

        "esri/Basemap",

        "esri/layers/TileLayer",

        "esri/Map",

        "esri/views/MapView",

        "esri/layers/GraphicsLayer",

        "esri/Graphic",

        "esri/geometry/Polygon",

        "esri/symbols/SimpleMarkerSymbol",

        "dojo/domReady!"

      ], function (Basemap,

      TileLayer,

      Map,

      MapView,

      GraphicsLayer,

      Graphic,

      Sketch,

      Polygon,

      SimpleMarkerSymbol,

      ){

        // --------------------------------------------------------------------

        // If you do not have public Internet access then use the Basemap class

        // and point this URL to your own locally accessible cached service.

        //

        // Otherwise you can just use one of the named hosted ArcGIS services.

        // https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer

        // --------------------------------------------------------------------

        var layer = new TileLayer({

          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"

        });

        var customBasemap = new Basemap({

          baseLayers: [layer],

          title: "Custom Basemap",

          id: "myBasemap"

        });

        myMap = new Map({

          basemap: 'osm'

        });

 

        graphic = Graphic;

        

        view = new MapView({

          //center: [-111.87, 40.57], // long, lat

          center: [lon,lat], // long, lat

          container: "viewDiv",

          map: myMap,

          zoom: 6

        });

 

        view.when(function(){

 

            

        });

 

    });

 

      function getArrayOfPoints( numberOfPoints ) {

            let array = [];

            for(var i = 0; i < numberOfPoints; i++) {

                let lon = Math.random()*90 *( Math.floor(Math.random()*2) == 0 ? -1 : 1);

                let lat = Math.random()*180 * ( Math.floor(Math.random()*2) == 0 ? -1 : 1);;

                array.push({ type:"point", longitude: lon, latitude: lat });

            }

            return array;

        }

     

      function createSymbol(path, color, smb){

          var mb = new markerSymbol();

          mb.setPath(path);

          mb.setColor(new dojo.Color(color));

          mb.setOutline(null);

          return mb;

        }

 

        function createPoints() {

 

            pt = document.getElementById('nopoints').value;

            console.log(pt);

 

            var points = getArrayOfPoints(pt*1);

 

            for(p = 0; p < points.length; p++) {

 

                var pointGraphic = new graphic({

                geometry: points[p],

                symbol: {

                type: "simple-marker",

                path: iconPath,

                color: initColor

 

            }

            }); 

            view.graphics.add(pointGraphic);

            }

 

            console.log("PLACED "+pt+" points");

 

        }

      

      

     

    </script>

  </head>

  <body class="claro">

    <div id="viewDiv"></div>

    <div id="button" style="position:absolute; top:0px; left:0px;"><input type="button" value="Add Points" onclick="javascript:createPoints();"/></div>

    <div id="points" style="position:absolute; top:0px; left:200px;"><input id="nopoints" type="text" value=""/></div>

 

  </body>

</html>

 

Outcomes