Labelarray is having graphic layer. This is taking very long time for execution when more than 100 records.
for ( var j = 0; j < labelArray.length; j++) { map.addLayer(labelArray); }
Why are you creating a GraphicLayer for each graphic/Text label? If you move the Layer part out side the loop you can have one GraphicLayer with multiple graphics. Then you will have only one Layer to add.
<SPAN class="keyword token">var</SPAN> cLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">for</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i<SPAN class="operator token">=</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><=</SPAN> mappoint<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN>i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> Textsymbol<SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">TextSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> Textsymbol<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAlign</SPAN><SPAN class="punctuation token">(</SPAN>TextSymbol<SPAN class="punctuation token">.</SPAN>ALIGN_MIDDLE<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> Textsymbol<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setOffset</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">13</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> Textsymbol<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setText</SPAN><SPAN class="punctuation token">(</SPAN>number<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">parseFloat</SPAN><SPAN class="punctuation token">(</SPAN>lat<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="token function">parseFloat</SPAN><SPAN class="punctuation token">(</SPAN>lat<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> wgs<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> Textsymbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> cLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> cLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setMaxScale</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> cLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setMinScale</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">288895.277144</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> labelArray<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>cLayer <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Or add it directly to map</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
working with Graphic Layer the common way you are working is to add an empty Graphic Layer on the map and latter add the graphics on it.
you are creating new Graphic Layer in case the graphics you want to store belong on different layer group.
for example you can have a Graphic Layer to store the results from a query, and an another to store the results from a geoprocessing tool.
in your case all textsymbol graphics belong on the same layer.
I hope this helps you.
What is difference between initializing the below graphics layer if outside for loop & inside for loop?
var cLayer = new GraphicsLayer();
The below clayer to map how it is being reflected before for loop processing ?map.addLayer(cLayer);
also see this sample here
Edit fiddle - JSFiddle
you will see that there is no problem to draw 1000 text symbols.
try this code
.......
<!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>Simple Map</title> <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css"> <style> html, body, #map { height: 100%; margin: 0; padding: 0; } </style> <script src="https://js.arcgis.com/3.20/"></script> <script> var map; require(["dojo/dom", "dojo/dom-attr", "dojo/_base/array", "esri/Color", "dojo/number", "dojo/parser", "dijit/registry",
"esri/config","esri/map", "esri/geometry/Point","esri/layers/GraphicsLayer","esri/symbols/TextSymbol","esri/graphic","esri/SpatialReference","esri/Color", "esri/symbols/Font", "dojo/parser","dojo/domReady!"], function(dom, domAttr, array, Color, number, parser, registry, esriConfig,Map,Point,GraphicsLayer,TextSymbol,Graphic,SpatialReference,Color,Font) { parser.parse(); map = new Map("map", { basemap: "gray", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd center: [23, 39], // longitude, latitude zoom: 6 }); map.on("load", initOperationalLayer); function initOperationalLayer(){ var cLayer = new GraphicsLayer(); map.addLayer(cLayer); for(var i=0; i <= 1000;i++) { var font = new Font("22px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER); var textSymbol = new TextSymbol("n"+i,font, new Color([0, 0, 0])); var lon=23+(i/100); var lat=39+(i/100); var graphic = new Graphic(new Point(lon,lat, new SpatialReference({wkid: 4326})), textSymbol);
cLayer.add(graphic); } }
}); </script> </head>
<body> <div id="map"></div> </body></html>
The below example explains first i am creating textsymbol property, setting text (number),using graphic setting the text label.Then add that graphic to graphic layer. graphic layer are pushing into array list
for(var i=0; i <= mappoint.length;i++)
{
var Textsymbol= new TextSymbol();Textsymbol.setAlign(TextSymbol.ALIGN_MIDDLE);Textsymbol.setOffset(0, 13);Textsymbol.setText(number);
var graphic = new Graphic(new Point(parseFloat(lat), parseFloat(lat), wgs), Textsymbol); var cLayer = new GraphicsLayer();cLayer .add(graphic);cLayer .setMaxScale(0);cLayer .setMinScale(288895.277144);
labelArray.push(cLayer );
}
then adding the label array to map using map.addlayers(labelArray) here i am getting performance issue.for adding into map it takes so long time for execution and displaying into map. If i used for loop iteration for map.addlayer(labelArray) also taking same time.
What kind of graphics you have? geometry type?
from where those graphics are coming? example query on a service and draw the results.....?
I am getting performance issue on this , in array morethan 1000 records means it takes 10 min for execution and displaying in map and while execution the browser also hangs. I need a better solution for this.
You can simply use
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayers</SPAN><SPAN class="punctuation token">(</SPAN>labelArray<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
