選択地図がズームされたときにシンボルが消える

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

    } 
    }); 
});