AnsweredAssumed Answered

Select and highlight feature layer

Question asked by tonycmx on Apr 22, 2014
Latest reply on Apr 24, 2014 by tonycmx
Hello!
I'm trying to add a feature layer(a simply line feature, storing locally in arcgis server) to a map. Then select it for querying and highlighting. The query part works fine. But I couldn't get it highlighted. Can someone have a look at my code and show me the hint?
Thank you very much for help.

<!DOCTYPE html> <html>  <head>   <title>Pigeon Schematics</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">      <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />   <style>      html, body {        width: 100%;        height: 100%;        margin: 0;      }       /*left*/      #leftContainer{        width: 12%;      }            /*middle*/      #middleContainer{        padding: 0;            }      #handle{        background: url(../handle.png) center center no-repeat;          cursor: ew-resize;          width: 10px;          position: absolute;          top: 0;          right: 0;          bottom: 0;      }      #mapDiv1{         padding: 0;         height: 70%;         }        #mapDiv2{         padding: 0;         height: 30%;        }                /*right*/        #rightContainer{          padding:0;          width:10%;          font-size: 15px;                  }        #legendDiv{          font-size: 10px;        }        #att1{          height:50%;        }        #att2{          height:50%;        }   </style>      <script src="http://js.arcgis.com/3.9/"></script>   <script>         // function init() {         // //alert("Dojo ready, version:" + dojo.version);         // // More initialization here       // }    require([     "esri/map",     "esri/InfoTemplate",         "esri/symbols/SimpleLineSymbol",         "esri/symbols/SimpleFillSymbol",         "esri/Color",         "esri/arcgis/utils",     "esri/dijit/Legend",     "esri/layers/FeatureLayer",     "esri/layers/ArcGISDynamicMapServiceLayer",     "esri/graphic",      "esri/tasks/query", "esri/tasks/QueryTask",          "dojo/parser",         "dijit/layout/BorderContainer",         "dijit/layout/ContentPane",          "dijit/layout/AccordionContainer",         "dijit/layout/TabContainer",               "dojo/domReady!"     ], function(Map, InfoTemplate, SimpleLineSymbol, SimpleFillSymbol, Color, arcgisUtils, Legend, FeatureLayer, ArcGISDynamicMapServiceLayer, Graphic, Query, QueryTask, parser){       parser.parse();                   //add services     var map1;           var url3 = "http://localhost:6080/arcgis/rest/services/Pigeon/PigeonShape/FeatureServer/3";                                      map1 = new Map("mapDiv1",{             basemap: "topo",             center: [6.161323, 52.256595],             zoom: 16,             slider: false,           });                      var featureLayerSpoor = new FeatureLayer(url3,              {               mode: FeatureLayer.MODE_ONDEMAND,               outFields: ["*"]             });           map1.addLayers([featureLayerSein, featureLayerWisselNummber, featureLayerSpoor, featureLayerWissel]);                 //add legend     var legend = new Legend({      map: map1     },"legendDiv");     legend.startup();        var selectionSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,255,0,0]), 3);     featureLayerSpoor.setSelectionSymbol(selectionSymbol);           //map1 Click evt           // map1.on("click", executeQueryTask);                               queryTaskSpoor = new QueryTask(url3);           querySpoor = new Query();           querySpoor.outSpatialReference = {"wkid":28992};           querySpoor.returnGeometry = true;           querySpoor.outFields = ["*"];                      dojo.connect(map1, "onClick", executeQueryTask);                     dojo.connect(map1.infoWindow, "onHide");                                function executeQueryTask(evt){             map1.infoWindow.hide();             map1.graphics.clear();                                          var centerPoint = new esri.geometry.Point(evt.mapPoint.x,evt.mapPoint.y,evt.mapPoint.spatialReference);             var mapWidth = map1.extent.getWidth();               //Divide width in map units by width in pixels             var pixelWidth = mapWidth/map1.width;             var tolerance = 8 * pixelWidth;             console.log(mapWidth, tolerance);             //Build tolerance envelope and set it as the query geometry             var queryExtent = new esri.geometry.Extent(1,1,tolerance,tolerance,evt.mapPoint.spatialReference);              querySpoor.geometry = queryExtent.centerAt(centerPoint);                        queryTaskSpoor.execute(querySpoor, function(fset){               showFeature(fset.features[0],evt)});                        };                       function showFeature(feature, evt){               map1.graphics.clear();                            var graphic = feature;                // graphic.setSymbol(symbol);                       var graphic =new Graphic(feature.geometry, selectionSymbol);               // graphic.setInfoTemplate(infoTemplate_spoorshp);               console.log(feature);                  console.log(graphic);                                map1.graphics.add(graphic);               var attr = feature.attributes;                                       var content_spoorshp = "objectid_1 : " + attr.objectid_1                     + "<br />spoornumme : " + attr.spoornumme                     + "<br />objectnaam : " + attr.objectnaam                     + "<br />objectid : " + attr.objectid                      + "<br />van : " + attr.kmvan                       + "<br />to : " + attr.kmtot                        + "<br />length : " + attr.shape_leng;                                       map1.infoWindow.setTitle("Spoor");               map1.infoWindow.setContent(content_spoorshp);               (evt) ? map1.infoWindow.show(evt.screenPoint,map1.getInfoWindowAnchor(evt.screenPoint)) : null;                       };     });   </script>  </head>   <body class="claro">     <div id="topContainer" data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Pigeon Schematics</div>            <div id="leftContainer" data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="region:'left'">        <div data-dojo-type="dijit/layout/ContentPane"            data-dojo-props="title:'Tool', selected:true">         <div id="tool1"></div>       </div>       <div data-dojo-type="dijit/layout/ContentPane"            data-dojo-props="title:'Others'">         This pane could contain tools or additional content       </div>      </div>            <div id="middleContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center', design:'sidebar'">       <div id="mapDiv1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >       </div>       <div id="mapDiv2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" >       </div>             </div>            <div id="rightContainer" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'right'" >       <div data-dojo-type="dijit/layout/ContentPane" title="Legend">         <div id="legendDiv"></div>       </div>       <div data-dojo-type="dijit/layout/ContentPane" title="Attribute">         <div id="att1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">1</div>         <div id="att2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">2</div>       </div>      </div>            <div id="bottomContainer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">CGI GEO-ICT</div>       </body> </html>

Outcomes