Hoe te zoomen naar een FeatureLayer met ArcGIS Javascript API

Ik maak een webtoepassing met behulp van de Javascript API en probeer te zoomen naar een objectlaag van een rij klik in een dojo-gegevensraster. Ik werk voor een dynamische laag, maar heb problemen met objectlagen. Ik krijg een Firebug-foutmelding met de melding dat selectedTaxLot undefined is. Heb je enig inzicht waarom dit zou kunnen gebeuren?

//Zoom to the parcel when the user clicks a row 
function onRowClickHandler(evt) {
  if (searchType == "selControl2") {
    var clickedTaxLotId = grid4.getItem(evt.rowIndex).POINT_NAME;
    var selectedTaxLot;
    alert(featureLayer.geometry);
    var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25, 50, 225, 0.3]));
    dojo.forEach(map.graphics.graphics, function (graphic) {
      if ((graphic.attributes) && graphic.attributes.POINT_NAME === clickedTaxLotId) {
        selectedTaxLot = graphic;
        graphic.setSymbol(highlightSymbol);

        return;
      }
    });

    if (selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point') {
      map.centerAndZoom(taxLotExtent, 11)
      var sp = map.toScreen(selectedTaxLot.geometry);

    } else {
      var taxLotExtent = selectedTaxLot.geometry.getExtent();
      var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
      var mappoint = map.toMap(screenpoint);
      map.setExtent(taxLotExtent, true);
      map.infoWindow.show(taxLotExtent.getCenter(), map.getInfoWindowAnchor(screenpoint));
    }
4
Ik heb je code een beetje opgeschoond, maar het is nog steeds niet 100% duidelijk wat het probleem is. U hebt geen volledige functie gepost en er zijn verwijzingen naar globale variabelen, dus het is niet mogelijk om te weten wat alles betekent. Als je een volledige repro-casus kunt posten, zou dat ideaal zijn, zodat we de mislukking in actie kunnen zien. Mijn gok is dat selectedTaxLot niet wordt gedefinieerd in uw dojo.forElke omdat er geen afbeelding is met een POINT_NAME-attribuut dat gelijk is aan uw ClickedTaxLotId-variabele. Meer code helpt ons dit uit te zoeken.
toegevoegd de auteur Daniel Broekman, de bron

1 antwoord

Heel erg bedankt Derek !! Hier is de relevante code, het is nogal een zooitje omdat ik dit hele Javascript-ding nog steeds aan het leren ben. Vergeef me alstublieft:) Ik heb niet alles gehecht omdat het meer dan 2000 regels is, maar hopelijk heb ik alle juiste stukjes. Het belangrijkste probleem dat ik nu probeer op te lossen, is inzoomen op een enkele functie van een rij klik in een datagrid dat wordt gegenereerd nadat functies handmatig zijn geselecteerd. Ik hoop dat dit logisch is. Ik waardeer je hulp hierbij!

<script type="text/javascript"> 
  var djConfig = { 
    parseOnLoad: true 
  }; 
 </script> 
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script> 

<script type="text/javascript"> 


     var idTask, idParams;
   var grid, store, toolBar;





  var exportMapGP, surveyLink, searchType, findTask, identifyTask, identifyParams, findParams, map, visible = [], HideShowTimer, featureLayer, navToolbar, measurement, features; 
   searchType = "";
  function init() { 

   dojo.connect(map, 'onLoad', function(theMap) {
     //initialize the toolbar
      toolBar = new esri.toolbars.Draw(map);
      dojo.connect(toolBar, "onDrawEnd",onDrawEnd);          
      toolBar.deactivate();

  //resize the map when the browser resizes
  dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
   navToolbar.deactivate();
 featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/MapServer/2";

  featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
      mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
      outFields:["*"]
    });

 function onDrawEnd(extent){
  navToolbar.deactivate();
  //id = "control";
  //select features within the draw extent
  var query = new esri.tasks.Query();
  query.geometry = extent;
  featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features,selectionMethod){
var items = dojo.map(features,function(feature){
     return feature.attributes;
});


    //add selected features to the grid
    if (document.getElementById("contSel").checked){
        showPointNameGrid();


    } else if(document.getElementById("survSel").checked){
        showSurveysNameGrid();

    }
    var items = dojo.map(features,function(feature){
      return feature.attributes;
    });
  if(document.getElementById("contSel").checked){
    //showPointNameGrid();
      searchType="selControl2";
    var data = {identifier:"POINT_NAME", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid4'); 
    grid.setStore(store);
   featureLayer.selectFeatures.clear;


  } else if (document.getElementById("survSel").checked){
     //showSurveysNameGrid();
      searchType="selSurveys2";
    var data = {identifier:"doc_id", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid5'); 
    grid.setStore(store);
    featureLayer.selectFeatures.clear;

  }     
  });

  }


function toggleSelect (el) 
 {

navToolbar.deactivate();
alert(el.checked);
if (el.checked)
{
    switch (el.id)

    {
    case 'survSel': 

        searchType="selSurveys2";
        document.getElementById('contSel').checked = false;
        featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/MapServer/2";
        featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
        mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
        });

        featureLayer.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([200,255,0,0.5]))); 
        map.addLayer(featureLayer);
        featureLayer.selectFeatures.clear;
        break;          

    case 'contSel': 
        searchType="selControl2";
        document.getElementById('survSel').checked = false;
        featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/FeatureServer/0";
        featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
        mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
        });
        featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(11).setColor(new dojo.Color([160,214,238])));
        map.addLayer(featureLayer);
        featureLayer.selectFeatures.clear;
        break;
    }
 } else
  {

    switch (el.id)
    {
    case 'survSel': 
        document.getElementById('contSel').checked = true;
        break;

    case 'contSel': 
        document.getElementById('survSel').checked = true;
        break;
    }
  }
 }

     var items = dojo.map(features,function(feature){
     return feature.attributes;
});


    //add selected features to the grid
    if (document.getElementById("contSel").checked){
        showPointNameGrid();


    } else if(document.getElementById("survSel").checked){
        showSurveysNameGrid();

    }
    var items = dojo.map(features,function(feature){
      return feature.attributes;
    });
  if(document.getElementById("contSel").checked){
    //showPointNameGrid();
      searchType="selControl2";
    var data = {identifier:"POINT_NAME", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid4'); 
    grid.setStore(store);
   featureLayer.selectFeatures.clear;


  } else if (document.getElementById("survSel").checked){
     //showSurveysNameGrid();
      searchType="selSurveys2";
    var data = {identifier:"doc_id", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid5'); 
    grid.setStore(store);
    featureLayer.selectFeatures.clear;

  }     
  });

  }

  //Zoom to the parcel when the user clicks a row 
  function onRowClickHandler(evt){ 
  if (searchType == "selControl2") { 
        var clickedTaxLotId = grid4.getItem(evt.rowIndex).POINT_NAME; 
        var selectedTaxLot; 
    alert(featureLayer.name);
         var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); 
        dojo.forEach(map.graphics.graphics,function(graphic){ 
          if((feature.attributes) && feature.attributes.POINT_NAME === clickedTaxLotId){ 
            selectedTaxLot = graphic;
            graphic.setSymbol(highlightSymbol);
            //added this part to build infotemplate
             map.infoWindow.setTitle(graphic.getTitle()); 
             map.infoWindow.setContent(graphic.getContent());


            return; 
          } 
    }); 

        if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {
        map.centerAndZoom(taxLotExtent, 11)
        var sp = map.toScreen(selectedTaxLot.geometry);

        } else {

        var taxLotExtent = selectedTaxLot.geometry.getExtent(); 
        var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
        var mappoint = map.toMap(screenpoint);
        map.setExtent(taxLotExtent,true);
        map.infoWindow.show(taxLotExtent.getCenter(), map.getInfoWindowAnchor(screenpoint));
        }




} else if (searchType == "selSurveys2") { 
        var clickedTaxLotId = grid5.getItem(evt.rowIndex).DOCUMENT_N; 
        var selectedTaxLot; 
    alert(featureLayer.name);
         var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); 
        dojo.forEach(map.graphics.graphics,function(graphic){ 
          if((graphic.attributes) && graphic.attributes.DOCUMENT_N === clickedTaxLotId){ 

            selectedTaxLot = graphic;
            graphic.setSymbol(highlightSymbol);
            //added this part to build infotemplate
             map.infoWindow.setTitle(graphic.getTitle()); 
             map.infoWindow.setContent(graphic.getContent());

            return; 
          } 
    }); 

        if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {
        map.centerAndZoom(taxLotExtent, 11)
        var sp = map.toScreen(selectedTaxLot.geometry);

        } else {

        var taxLotExtent = selectedTaxLot.geometry.getExtent(); 
        var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
        var mappoint = map.toMap(screenpoint);
        map.setExtent(taxLotExtent,true);
        map.infoWindow.show(taxLotExtent.getCenter(),    map.getInfoWindowAnchor(screenpoint));
        }


}

}  
</script> 
1
toegevoegd
Zelfs met de aanvullende code is dit nog steeds moeilijk te debuggen. Het eerste wat mij opviel is dat je "featureLayer.selectFeatures.clear;" verschillende plaatsen. Dit zal eigenlijk geen functies wissen. Als u wilt achterhalen waarom u uw functie niet ziet na een klik, zet u enkele console.log() -instructies in uw if- en else-blokken. Kijk in het bijzonder naar de waarde voor selectedTaxLot. Ik zie niet dat we hier snel een oplossing voor vinden. Als je kunt, neem dan contact op met Esri-ondersteuning voor extra hulp.
toegevoegd de auteur Daniel Broekman, de bron
Het laatste wat ik wil toevoegen is dat dit niet echt is hoe stack exchange werkt. Tenzij u uw eigen vraag beantwoordt, zou u geen antwoord op uw vraag moeten plaatsen. U moet uw oorspronkelijke vraag bewerken als u meer informatie opgeeft.
toegevoegd de auteur Daniel Broekman, de bron
Nogmaals bedankt Derek! Ik zal uw advies opvolgen en kijken wat ik met de code kan doen. Ook, sorry voor het beantwoorden van mijn eigen vraag, ik dacht dat dit verkeerd was, maar ik kon de code niet plaatsen in mijn commentaar. Nu weet ik de oorspronkelijke vraag te bewerken..sorry Ik ben hier echt nieuw voor :)
toegevoegd de auteur Antti, de bron
Nog een vraag. Is een objectlaag een afbeelding? Als ik deTaxLot = afbeelding heb geselecteerd, werkt dat dan zelfs voor een featureLayer?
toegevoegd de auteur Antti, de bron
featureLayer is grafisch met extra functionaliteit. Of, als het duidelijk wordt gezegd, featureLayer is afbeeldingen op steroïden
toegevoegd de auteur jevakallio, de bron