POST
|
Hi Robert, Thanks for your kind help. There is a noticeable performance improvement for sure, anyway this 4.11 (by is it an official new release? i did not know it was out, still do not find anything about the dev site ... ) is still very far from the performance of 3.27. I was quite sure it was something related to the framework not to the code i wrote, but as a matter of fact: - 100000 SVG Symbol with 3.27 : painted in less than 1 sec - 100000 SVG Symbol with 4.11 : painted in around 8 sec 4.10 would have gone idle to the point that chrome would signal a problem with js engine, but still i do not understand why the new releases has impacted so much on what was a great performing GraphicLayer. Hope for further improvements, Thanks Lorenzo
... View more
03-22-2019
07:15 AM
|
0
|
1
|
590
|
POST
|
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>
... View more
03-22-2019
02:29 AM
|
0
|
3
|
879
|
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:24 AM
|