Feature Service Retrieval

[karthik_BharadwajT]

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.

   
      
      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]));
        featureLayer.setRenderer(new esri.renderer.SimpleRenderer(highlightSymbol));

       //adding the two layers to the map 
       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(){
  //building query  
         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'";
      
   //collecting features  
   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);

[KenDoman]

Here's a few things.
1. Change your infoTemplate content to something like this:

infoTemplate.setContent( "<b>ROAD NAME: </b>${ROADNAME}<br/>"
    + "<b>CAT</b>${CAT}<br/>" // changed last tag to a line break
    + "<b>LINK_ID</b>${LINK_ID}"); // removed last tag because it was broken

2. in the init function, the highlightSymbol won't render because of the STYLE_CROSS should go with the fillSymbol and not the lineSymbol.

var highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_CROSS, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3), new dojo.Color([125,125,125,0.35]));

3. When you use a FeatureLayer with snapshot mode and the outFields set to ["*"], you're literally downloading your entire dataset to the browser before it renders. with 50k features, that might take a while. Granted, function init never adds it to the map, so that may be one reason why it doesn't show.

If you use the FeatureLayer capability to show the results, here is how I would set it up. This way, you don't have to use the second function at all.

// set maxAllowableOffset to generalize featureLayer for faster rendering.
var maxOffset = function (map, pixelTolerance) {
    return Math.floor(map.extent.getWidth() / map.width) * pixelTolerance;
};

var featureLayer = new esri.layers.FeatureLayer("http://karthikpc:8399/arcgis/rest/services/Carriage_Mercantor/FeatureServer/0", {
            mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
            infoTemplate: infoTemplate,
            outFields: ["LINK_ID","ROADNAME","CAT"],
            maxAllowableOffset: maxOffset(map, 1)
        });
featureLayer.setDefinitionExpression("CAT = 'CATA'"); // from the where clause in your query
var highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_CROSS, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3), new dojo.Color([125,125,125,0.35]));
featureLayer.setRenderer(highlightSymbol);

// after loading the base layers
map.addLayer(featureLayer);

[karthik_BharadwajT]

Thanks for your reply it works fine 🙂