當地圖被縮放時，選擇符號消失

Question

我有一個基礎地圖圖層，添加了地圖的要素圖層。路線表由FeatureTable生成，每當在表格或地圖上點擊路線時，路線的顏色將從綠色變爲紅色。我的問題是，如果我放大或縮小地圖，路線會變回綠色，並顯示紅色輪廓。如果我點擊路線，它會變回紅色，但我需要它保持紅色。下面顯示了我的代碼。任何幫助，將不勝感激。

 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

必須有一些其他的代碼，這是清除選擇。否則它應該工作。 Here是JSBin，顯示即使在縮放/平移之後選擇仍然存在。我從esri網站上取得了樣本，並修改了類似於您的邏輯，除了loadTable部分。

Answer 2

我發現改變mode : FeatureLayer.MODE_ONDEMAND,爲mode : FeatureLayer.MODE_SNAPSHOT,解決了這個問題，但如果我放大或移動地圖，問題仍然存在。此外，我只能使用MODE_SNAPSHOT，因爲我的地圖有少量功能。爲了解決變焦/移動問題，我在縮放或移動完成後重新繪製了路線。

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(); 

    } 
    }); 
});