How to improve the feature layer renderer performance?
When large amounts of points (about 40,000) on the map (no clusters allowed), the pan / zoom operator will pending for a long time. Is there any way to improve this?
The constraints include:
1. no cluster allowed
2. using arcgis js api 3.X
3. at least 40,000 points
4. no tiles
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Students</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
</head>
<body>
<div id="map" style="width: 100%; height: 900px;"></div>
<script src="https://js.arcgis.com/3.18/"></script>
<script type="text/javascript">
require(["esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleMarkerSymbol", "esri/renderers/SimpleRenderer", "esri/Color"], function(Map,FeatureLayer,SimpleMarkerSymbol,SimpleRenderer,Color){
var map = new Map("map", {
basemap: "streets",
center: [-87.252628,30.639658],
zoom: 10,
logo: false,
showAttribution: false
});
var url = "https://services.arcgis.com/a3bwkdJaVo8mjuX0/arcgis/rest/services/Escambia_Students/FeatureServer/0";
var studentLayer = new FeatureLayer(url,{
id: "student",
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var symbol = new SimpleMarkerSymbol().setColor(new Color("blue")).setSize(6);
var renderer = new SimpleRenderer(symbol);
studentLayer.setRenderer(renderer);
map.addLayers([studentLayer]);
});
</script>
</body>
</html>I try to calculate the time and enable cache for basemap. I notice that the results of the graphic is drawn by <svg>. Then I remove the excess svg attributes.
The result shows that it takes about 6-7 seconds on average for each zoom operator.
Do you have more suggestions? Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Students</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
</head>
<body>
<div id="map" style="width: 100%; height: 900px;"></div>
<script src="https://js.arcgis.com/3.18/"></script>
<script type="text/javascript">
require(["esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleMarkerSymbol", "esri/renderers/SimpleRenderer", "esri/Color"], function(Map,FeatureLayer,SimpleMarkerSymbol,SimpleRenderer,Color){
var map = new Map("map", {
basemap: "streets",
center: [-87.252628,30.639658],
zoom: 10,
logo: false,
showAttribution: false
});
var url = "https://services.arcgis.com/a3bwkdJaVo8mjuX0/arcgis/rest/services/Escambia_Students/FeatureServer/0";
var studentLayer = new FeatureLayer(url,{
id: "student",
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var symbol = new SimpleMarkerSymbol().setColor(new Color("blue")).setSize(6);
var renderer = new SimpleRenderer(symbol);
studentLayer.setRenderer(renderer);
studentLayer.on("graphic-draw", graphicDrawHandler);
map.addLayers([studentLayer]);
var panStart = map.on("pan-start", panHandler);
var panStartTime;
var zoomStart = map.on("zoom-start", zoomHandler);
var zoomStartTime;
var updateStart = map.on("update-start", updateStartHandler);
var updateStartTime;
var updateEnd = map.on("update-end", updateEndHandler);
var currentAction = "none";
function panHandler(event){
console.log("pan started");
panStartTime = performance.now();
currentAction = "pan";
};
function zoomHandler(event){
console.log("zoom started");
zoomStartTime = performance.now();
currentAction = "zoom";
};
function updateStartHandler(event){
if(currentAction == "none"){
console.log("update started");
updateStartTime = performance.now();
currentAction = "update";
}
};
function updateEndHandler(event){
switch(currentAction){
case "pan":
calculateElapsedTime(panStartTime, performance.now(), "Panned and updated");
break;
case "zoom":
calculateElapsedTime(zoomStartTime, performance.now(), "Zoomed and updated");
break;
case "update":
calculateElapsedTime(updateStartTime, performance.now(), "Updated");
break;
default:
console.log("default");
break;
}
currentAction = "none";
};
function calculateElapsedTime(start, end, label){
var diff = end-start;
diff = diff<10?Number(diff.toFixed(1)):Number(diff.toFixed(0));
console.log(label + ": "+ diff + " millisends.");
};
function graphicDrawHandler(event){
event.node.removeAttribute("stroke-opacity");
event.node.removeAttribute("stroke-linecap");
event.node.removeAttribute("stroke-linejoin");
event.node.removeAttribute("stroke-miterlimit");
event.node.removeAttribute("stroke-dasharray");
event.node.removeAttribute("transform");
event.node.removeAttribute("dojoGfxStrokeStyle");
};
});
</script>
</body>
</html>I've tried canvas instead of svg. But the result seems slower than svg.
- enable chrome cache for basemap
One thing you can do is publish it as a tile layer on ArcGIS Online. This will improve the performance and give you all the same FeatureLayer capabilities.
On a side note, why is it required to display all points without any form of aggregation?
Hi, David
The max result record count can be set by esri online (How To: Update the maximum record count for feature services in ArcGIS Online). The default value is 1000.
Next, the MODE_ONDEMAND option is not my expectation. As the result shows, it will send lots of requests each time, that is not what we want.
Besides, under the MODE_ONDEMAND, the graphics showing piece by piece, not very comfortalbe.
And the graphics count is above 30,000, 1000 is too small on my situation.
Thanks!
Leo
