Optimization graphicsLayer

JędrekMarkowski — Sat, 15 Apr 2017 08:00:44 GMT

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

Re: Optimization graphicsLayer

RobertScheitlin__GISP — Sun, 16 Apr 2017 18:06:22 GMT

Jędrek,

Can you share the json file for performance testing?

Re: Optimization graphicsLayer

JędrekMarkowski — Sun, 16 Apr 2017 18:20:33 GMT

Robert,

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

Thanks a lot for your interest

Re: Optimization graphicsLayer

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:01:50 GMT

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();
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Optimization graphicsLayer

RobertScheitlin__GISP — Tue, 18 Apr 2017 12:35:01 GMT

Jędrek,

Have you tried the code I provided using web workers?

topic Re: Optimization graphicsLayer in ArcGIS JavaScript Maps SDK Questions

Optimization graphicsLayer

Re: Optimization graphicsLayer

Re: Optimization graphicsLayer

Re: Optimization graphicsLayer

Re: Optimization graphicsLayer