[GIS] ArcGIS Javascript API Feature Layer retrieval

arcgis-javascript-apiarcgis-serverfeature-layer

I would want to develop an application where we could query the layer based on a result set of certain attributes of the features and highlight features.

Approach
Currently I tried using the feature services of ArcGIS server to do so. The feature service has around 50k features.

Issue:
While trying retrieve and highlight the feature using a query task it takes quite a long time for the process to complete and the browser literally hangs.

Question:
1) Is there a faster way to retrieve and highlight the features?
2) Could I use a better approach rather than using a feature service to achieve my end goal? Please do suggest.

Have provided my code below.

  esri.config.defaults.io.proxyUrl = "proxy.ashx";
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("esri.map");
  dojo.require("esri.layers.FeatureLayer");
  dojo.require("esri.tasks.query");
  var map;
  var featureset=[];
  var infoTemplate = new esri.InfoTemplate();
  infoTemplate.setTitle("${ROADNAME}");
  infoTemplate.setContent( "<b>ROAD NAME: </b>${ROADNAME}<br/>"
                         + "<b>CAT</b>${CAT}</b>"+ "<b>LINK_ID</b>${LINK_ID}</b>"); 

  function init() {

 try {
         var initExtent = new esri.geometry.Extent({"xmin":103.55,"ymin":1.13,"xmax":104.16,"ymax":1.56,"spatialReference":{"wkid":4326}});

map = new esri.Map("map",extent:esri.geometry.geographicToWebMercator(initExtent)});

var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
var basemap_sing = new esri.layers.ArcGISTiledMapServiceLayer("http://karthikpc:8399/arcgis/rest/services/Carriage_Mercantor/MapServer",{ displayLevels:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]});


var featureLayer = new esri.layers.FeatureLayer("http://karthikpc:8399/arcgis/rest/services/Carriage_Mercantor/FeatureServer/0", {
            mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
            infoTemplate: infoTemplate,
            outFields: ["*"]
        });

  var highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_CROSS, new    dojo.Color([255,0,0]), 3), new dojo.Color([125,125,125,0.35]));
   map.addLayer(basemap);
   map.addLayer(basemap_sing);
   dojo.connect(map, "onLoad", new_function);
   }
catch(e){
    alert('An error has occurred: '+e.message);
    }

    }

 function new_function(){
    var queryTask = new   esri.tasks.QueryTask("http://karthikpc:8399/arcgis/rest/services/Carriage_Mercantor/FeatureServer/0");
    var query = new esri.tasks.Query(); 
    query.returnGeometry = true;
    query.outFields = ["LINK_ID","ROADNAME","CAT"];
    query.where = "CAT='CATA'";
    dojo.connect(queryTask, "onComplete", function(featureSet) {
          map.graphics.clear();
          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_CROSS, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([125,125,125,0.35]));
   dojo.forEach(featureSet.features,function(feature){
   var graphic = feature;
   graphic.setSymbol(symbol);
   graphic.setInfoTemplate(infoTemplate);
   map.graphics.add(graphic);

   });

   });
   queryTask.execute(query);
   }

   dojo.addOnLoad(init);

Best Answer

A feature service returns graphics that the client browser must render. If you used a MapServer service you might have better results. 50k features is a lot to display, a heat map might be a better approach for performance and usability. If your data does not change very often, a tiled layer map be your best bet.

Related Question