Optimization graphicsLayer

Question

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]

rscheitlin · Answer

Jędrek,

Have you tried the code I provided using web workers?

rscheitlin · Answer

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

JędrekMarkowski · Answer

Robert,

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

Thanks a lot for your interest