Auswahlsymbol verschwindet, wenn die Karte gezoomt wird

Question

Ich habe einen Basiskarten-Layer mit einem Feature-Layer aus Karten hinzugefügt. Eine Tabelle der Routen wird durch FeatureTable generiert und die Farbe der Route wechselt von grün zu rot, wenn eine Route auf den Tisch oder auf die Karte geklickt wird. Mein Problem ist, dass die Route mit einem roten Umriss wieder grün wird, wenn ich mit der Karte ein- oder ausziehe. Wenn ich auf die Route klicke, wird sie wieder rot, aber ich brauche sie, um rot zu bleiben. Ich habe meinen Code unten gezeigt. Jede Hilfe wäre willkommen.

 var map, stateBaseMap, geometryLayer, routeFeature, routeDataFeature, myFeatureTable, 
     stateBaseMapUrl, geometryLayerUrl, routeFeatureUrl, routeDataFeatureUrl, routeChange; 

    require([ "esri/map", 
      "esri/layers/ArcGISDynamicMapServiceLayer", 
      "esri/layers/ArcGISTiledMapServiceLayer", 
      "esri/tasks/GeometryService", 
      "esri/layers/FeatureLayer", 
      "esri/dijit/FeatureTable", 
      "esri/symbols/SimpleLineSymbol", 
      "esri/Color", 
      "dijit/layout/ContentPane", 
       "dijit/layout/BorderContainer", 
       "esri/geometry/Extent", 
       "esri/graphicsUtils", 
       "esri/tasks/query", 
       "dojo/dom", 
       "dojo/parser", 
       "dojo/ready", 
       "dojo/on"], 
    function(Map, 
      ArcGISDynamicMapServiceLayer, 
      ArcGISTiledMapServiceLayer, 
      GeometryService, 
      FeatureLayer, 
      FeatureTable, 
      SimpleLineSymbol, 
      Color, 
      ContentPane, 
      BorderContainer, 
      Extent, 
      graphicsUtils, 
      Query, 
       dom, 
       parser, 
       ready, 
       on) { 
     parser.parse(); 

     ready(function(){ 
      esri.config.defaults.io.proxyUrl = "/llr/llrproxy"; 
      esri.config.defaults.io.alwaysUseProxy = false; 
      esri.config.defaults.io.corsDetection = false; 
      stateBaseMapUrl = document.getElementById("shipment_stateBaseMapServiceURL").value; 
      geometryLayerUrl = document.getElementById("shipment_geometryServiceURL").value; 
      routeFeatureUrl = document.getElementById("shipment_routeLayerURL").value; 
      map = new Map("map"); 
      stateBaseMap = new ArcGISTiledMapServiceLayer(stateBaseMapUrl); 
      map.addLayer(stateBaseMap); 
      geometryLayer = new GeometryService(geometryLayerUrl); 
      map.addLayer(geometryLayer); 

      routeFeature = new FeatureLayer(routeFeatureUrl, { 
       mode : FeatureLayer.MODE_ONDEMAND, 
       outFields : [ "*" ], 
       visible:true, 
       id : "routeFeature" 
      }); 
      var selectionSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]),6); 

      routeFeature.setSelectionSymbol(selectionSymbol); 

      map.addLayer(routeFeature); 
      on(routeFeature, "load", function(){ 
       loadTable(); 
       }); 

      function loadTable(){ 
        myFeatureTable = new FeatureTable({ 
        featureLayer : routeFeature, 
        map : map, 
        editable: false, 
        showGridMenu:false, 
        gridOptions: { 
          selectionMode: "single" 
         }, 
        editable: true, 
        fieldInfos: [ 
           { 
           name: 'ROUTE_ID', 
           visible: false 
           }, 
           { 
           name: 'ORIGIN', 
           alias: 'Entry State' 
           }, 
           { 
           name: 'ROUTE_DESC', 
           alias: 'Route Description' 
           }, 
           { 
           name: 'DESTNATION', 
           alias: 'Exit State' 
           } 
        ], 
        menuFunctions: [ 
             { label: "Enter a new route.", callback: enterNewRoute } 
            ] 

        }, 'myTableNode'); 

        myFeatureTable.startup(); 
      } 
     }); 
     }); 

Answer 1

Es muss einen anderen Code geben, der die Auswahl löscht. Sonst sollte es funktionieren. Here ist ein JSBin, der anzeigt, dass die Auswahl auch nach dem Zoomen/Panning erhalten bleibt. Ich habe das Beispiel von der Website von ESRI genommen und ähnlich wie Ihre Logik geändert, außer dem loadTable-Teil.

Answer 2

Ich fand Ändern mode : FeatureLayer.MODE_ONDEMAND, zu mode : FeatureLayer.MODE_SNAPSHOT, löste das Problem, aber das Problem war immer noch da, wenn ich die Karte zoomte oder bewegte. Außerdem kann ich nur die MODE_SNAPSHOT verwenden, weil meine Karte eine kleine Anzahl von Funktionen hat. Um das Zoom-/Bewegungsproblem zu lösen, male ich die Route neu, nachdem der Zoom oder die Bewegung beendet wurde.

var map, stateBaseMap, geometryLayer, routeFeature, routeDataFeature, myFeatureTable, 
    stateBaseMapUrl, geometryLayerUrl, routeFeatureUrl, routeDataFeatureUrl, routeChange, 
    mapUpdateEnd, mapZoomEnd, mapDragEnd; 

require([ "esri/map", 
    "esri/layers/ArcGISDynamicMapServiceLayer", 
    "esri/layers/ArcGISTiledMapServiceLayer", 
    "esri/tasks/GeometryService", 
    "esri/layers/FeatureLayer", 
    "esri/dijit/FeatureTable", 
    "esri/symbols/SimpleLineSymbol", 
    "esri/Color", 
    "dijit/layout/ContentPane", 
    "dijit/layout/BorderContainer", 
    "esri/geometry/Extent", 
    "esri/graphicsUtils", 
    "esri/tasks/query", 
    "esri/tasks/QueryTask", 
    "dojo/dom", 
    "dojo/parser", 
    "dojo/ready", 
    "dojo/on"], 
function(Map, 
    ArcGISDynamicMapServiceLayer, 
    ArcGISTiledMapServiceLayer, 
    GeometryService, 
    FeatureLayer, 
    FeatureTable, 
    SimpleLineSymbol, 
    Color, 
    ContentPane, 
    BorderContainer, 
    Extent, 
    graphicsUtils, 
    Query, 
    QueryTask, 
     dom, 
     parser, 
     ready, 
     on) { 
parser.parse(); 

ready(function(){ 
    esri.config.defaults.io.proxyUrl = "/llr/llrproxy"; 
    esri.config.defaults.io.alwaysUseProxy = false; 
    esri.config.defaults.io.corsDetection = false; 
    stateBaseMapUrl = document.getElementById("shipment_stateBaseMapServiceURL").value; 
    geometryLayerUrl = document.getElementById("shipment_geometryServiceURL").value; 
    routeFeatureUrl = document.getElementById("shipment_routeLayerURL").value; 
    map = new Map("map"); 
    stateBaseMap = new ArcGISTiledMapServiceLayer(stateBaseMapUrl); 
    map.addLayer(stateBaseMap); 
    geometryLayer = new GeometryService(geometryLayerUrl); 
    map.addLayer(geometryLayer); 

    routeFeature = new FeatureLayer(routeFeatureUrl, { 
     mode : FeatureLayer.MODE_SNAPSHOT, 
     outFields : [ "*" ], 
     visible:true, 
     id : "routeFeature" 
    }); 
    var selectionSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]),6); 

    routeFeature.setSelectionSymbol(selectionSymbol); 

    map.addLayer(routeFeature); 

    on(routeFeature, "load", function(){ 
     mapZoomEnd = map.on("zoom-end",function(){ 
      mapZoomEnd.remove(); 
     }); 


     loadTable(); 

      mapZoomEnd = map.on("zoom-end",function(){ 
       reDrawRoute(document.getElementById("shipment_currentRouteId").value); 
      }); 

      mapDragEnd = map.on("mouse-drag-end",function(){ 
       reDrawRoute(document.getElementById("shipment_currentRouteId").value); 
      }); 

      myFeatureTable.on("row-select", function(evt){ 
       zoomToRoute(evt[0].data.ROUTE_ID); 
       }); 

     }); 


    function zoomToRoute(routeId){ 
     if(routeId != 0){ 
      var query = getQueryForRouteId(routeId); 
      routeFeature.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features){ 
       var extent = graphicsUtils.graphicsExtent(features).expand(1.25); 
       map.setExtent(extent); 
      }); 
     } 
    } 

    function reDrawRoute(routeId){ 
     if(routeId != 0){ 
      var query = getQueryForRouteId(routeId); 
      routeFeature.selectFeatures(query, FeatureLayer.SELECTION_NEW); 
     } 
    } 

    function getQueryForRouteId(routeId){ 
     var query = new Query(); 
     query.returnGeometry = true; 
     query.outFields = [ "*" ]; 
     query.where = "ROUTE_ID = '" + routeId + "'" ; 
     return query; 
    } 


    function loadTable(){ 
      myFeatureTable = new FeatureTable({ 
      featureLayer : routeFeature, 
      map : map, 
      editable: false, 
      showGridMenu:false, 
      gridOptions: { 
        selectionMode: "single" 
       }, 
      editable: true, 
      fieldInfos: [ 
         { 
         name: 'ROUTE_ID', 
         visible: false 
         }, 
         { 
         name: 'ORIGIN', 
         alias: 'Entry State' 
         }, 
         { 
         name: 'ROUTE_DESC', 
         alias: 'Route Description' 
         }, 
         { 
         name: 'DESTNATION', 
         alias: 'Exit State' 
         } 
      ] 

      }, 'myTableNode'); 

      myFeatureTable.on('load', function() { 
       myFeatureTable.grid.set('sort', [{ attribute: "ORIGIN" }]); 
      }); 
      myFeatureTable.startup(); 

    } 
    }); 
});