Optimization graphicsLayer

JędrekMarkowski · ‎04-15-2017

Hello, it's me again, some days ago, you helped me alot, and thank you for it

I've got problem with optimization, my script works really slow, because my for loop add graphic from 20k to 50k times, is there any way to optimize it?

There is code: [HTML] <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="te - Pastebin.com

RobertScheitlin__GISP · ‎04-16-2017

Jędrek,

Can you share the json file for performance testing?

JędrekMarkowski · ‎04-16-2017

Robert,

Here is the json file for performance testing: Json file ,

Thanks a lot for your interest

RobertScheitlin__GISP · ‎04-16-2017

Here is your code optimized to use web workers (it draws in about 2 seconds):

index.html:

<!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>Create circles</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #controls {
      background: #fff;
      box-shadow: 0 6px 6px -6px #999;
      color: #444;
      font-family: sans-serif;
      height: auto;
      left: 1em;
      padding: 1em;
      position: absolute;
      top: 1em;
      width: auto;
      z-index: 40;
    }

    #controls div {
      padding: 0 0 1em 0;
    }
  </style>

  <script src="http://js.arcgis.com/3.20"></script>
  <script>
    var map, actual_JSON, w, gLayer;

    require([
      "esri/map", "esri/symbols/SimpleFillSymbol", "esri/SpatialReference",
      "esri/graphic", "esri/layers/GraphicsLayer", "esri/Color",
      "esri/geometry/Extent", "esri/graphicsUtils", "dojo/domReady!"
    ], function(
      Map, SimpleFillSymbol, SpatialReference,
      Graphic, GraphicsLayer, Color, Extent,
      graphicsUtils
    ) {
      map = new Map("map", {
        basemap: "gray",
        center: [22.741, 51.39],
        slider: false,
        zoom: 2
      });
      gLayer = new GraphicsLayer({
        opacity: 0.7
      });
      map.addLayer(gLayer);

      map.on("load", function(){
        if (typeof(w) == "undefined") {
          w = new Worker("ProcessGraphics.js");
        }
        w.onmessage = function(event){
          var wr = event.data;
          for ( var i = 0; i < wr.ilosc; i++ ) {
            r = Math.round(255 * ((wr.t[i] - wr.minimalna) / wr.licznik));
            b = 255 - r;
            g = new Graphic(new Extent(wr.x[i], wr.y[i], wr.x[i] + 0.1, wr.y[i] + 0.1,
              new SpatialReference({wkid: 4326})),
              new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, null, new Color([r,0,b,1]))
            );
            gLayer.add(g);
          }
          map.setExtent(graphicsUtils.graphicsExtent(gLayer.graphics).expand(1.2), true);
        };
      });
    });
  </script>
</head>

<body>
  <div id="map"></div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ProcessGraphics.js:

var actual_JSON;

function loadJSON( file, callback ) {
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType( "application/json" );
  xobj.open( 'GET', file, true ); // Replace 'my_data' with the path to your file
  xobj.onreadystatechange = function () {
    if ( xobj.readyState == 4 && xobj.status == "200" ) {
      // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
      callback( xobj.responseText );
    }
  };
  xobj.send( null );
}

function load() {
  loadJSON( "l67kq-test.json", function ( response ) {
    actual_JSON = JSON.parse( response );

    var x = [];
    var t = [];
    var y = [];
    var dzielnik = 4; //zmienna zmniejszajaca ilosc punktow na mapie
    var ilosc = actual_JSON.x * actual_JSON.y / dzielnik;
    for ( var i = 0; i < ilosc; i++ ) { //20000->50000
      y.push( actual_JSON.XLONG[i] );
      x.push( actual_JSON.XLAT[i] );
      t.push( actual_JSON.T2[i] );
    }
    var maksymalna = Math.max.apply(null, t);
    var minimalna = Math.min.apply(null, t);
    var retObj = {
      minimalna: minimalna,
      licznik: maksymalna - minimalna,
      x: x,
      y: y,
      t: t,
      ilosc: ilosc
    };
    postMessage(retObj);
  } );
}
load();
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎04-18-2017

Jędrek,

Have you tried the code I provided using web workers?