선택지도가 확대/축소되면 기호가 사라집니다.

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

    } 
    }); 
});