2013-08-31 2 views
1

Когда я создаю объект карты с помощью ArcGISDynamicMapServiceLayer, тогда все работает отлично, но поскольку мне нужно много графики и вы хотите обрабатывать взаимодействия пользователей на карте, поэтому я хочу отображать слой на моей карте, но когда я добавляю функциональный слой, браузер зависает.Добавление функционального слоя зависает браузера

Пожалуйста, дайте мне знать, что может быть проблемой, как я могу избежать использования функционального слоя от висящей на моей машине. Могу ли я добавить OnClick мыши функциональность для ArcGISDynamicMapServiceLayer Ниже приведен код

map = new esri.Map("map"); 
       var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.32.9.106:6080/arcgis/rest/services/Administrative_Maps/World_Countries_v1/MapServer"); 
       map.addLayer(layer); 
       var url = "http://10.32.9.106:6080/arcgis/rest/services/Administrative_Maps/World_Countries_v1/MapServer/0"; 
       var info_content = "<table><tr><td><b>COUNTRY :</b></td><td style='text-align:right'>${COUNTRY}</td></tr></table>"; 
       var infoTemplate1 = new esri.InfoTemplate("${COUNTRY}", info_content); 
       var fl = new esri.layers.FeatureLayer(url, { 
       id: "world-regions", 
       infoTemplate: infoTemplate1 
       }); 
       map.addLayer(fl); 

MY HTML-код ниже

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
    <title>Feature Layer Only Map</title> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"> 
    <style> 
     html, body, #map { 
     height: 100%; 
     width: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    <script src="http://js.arcgis.com/3.6/"></script> 
    <script> 
    dojo.require("esri.map"); 
    dojo.require("esri.layers.FeatureLayer"); 
    dojo.require("esri.tasks.QueryTask"); 


    var map; 
    function init(){ 
      try{ 
       map = new esri.Map("map"); 
       var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.32.9.106:6080/arcgis/rest/services/Administrative_Maps/World_Countries_v1/MapServer"); 
       map.addLayer(layer); 
       var url = "http://10.32.9.106:6080/arcgis/rest/services/Administrative_Maps/World_Countries_v1/MapServer/0"; 
       var info_content = "<table><tr><td><b>COUNTRY :</b></td><td style='text-align:right'>${COUNTRY}</td></tr></table>"; 
       var infoTemplate1 = new esri.InfoTemplate("${COUNTRY}", info_content); 
       var fl = new esri.layers.FeatureLayer(url, { 
       id: "world-regions", 
       mode: esri.layers.FeatureLayer.MODE_ONDEMAND, 
       autoGeneralize :true, 
       allowGeometryUpdates:false, 
       infoTemplate: infoTemplate1, 
       outFields: ["COUNTRY"] 
       }); 

       dojo.connect(fl, "onLoad", function(){ 
       console.log(" adding feature layer"); 




        fl.setAutoGeneralize(true) 
        map.addLayer(fl); 
        console.log("allowGeometryUpdates "+fl.allowGeometryUpdates); 
       console.log("editable "+fl.isEditable()); 

       console.log("autoGeneralize"+fl.autoGeneralize); 
       console.log("geometryType"+fl.geometryType); 
       console.log("graphics"+fl.graphics); 
       console.log("defaultVisibility "+fl.hasAttachments); 

       }); 


       var queryTask = new esri.tasks.QueryTask(url); 

         //build query filter 
         var query = new esri.tasks.Query(); 
         query.returnGeometry = true; 
         query.where = "COUNTRY='India'"; 
         infoTemplate = new esri.InfoTemplate("Alert", "Alert for Re-insurance"); 
         dojo.connect(queryTask, "onComplete", function(featureSet) { 
          alert('calling queryTask'+featureSet); 
          //map.graphics.clear(); 
           try{ 
            /*var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5])); 
            alert('somethign');*/ 

            var symbol0 = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255, 0, 0, 0.9])); 

            //QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map. 
            dojo.forEach(featureSet.features,function(feature){ 
             alert('feature'+feature); 
             var graphic = feature; 
             graphic.setSymbol(symbol0); 
             alert("infoTemplate"+infoTemplate); 
             graphic.setInfoTemplate(infoTemplate); 
             alert("graphic"+graphic); 
             alert("map.graphics"+map.graphics); 
             map.graphics.add(graphic); 

           }); 
          }catch(e){ 
           alert("e"+e); 
          } 
         }); 
        queryTask.execute(query); 


        require(["dojo/on", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic"], function(on, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic) { 
        on(fl, "click", function(evt) { 
         console.log(" on click method"); 
         // clears current selection 
         map.graphics.clear(); 

         // create new graphic with selected graphic's geometry 
         alert("evt.graphic.geometry "+evt.graphic.geometry); 
         var graphic = new Graphic(evt.graphic.geometry); 
         alert("graphic "+graphic); 
         // create a new symbol for the graphic 
         var symbol0 = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255, 0, 0, 0.9])); 

         // add symbol to the graphic 
         graphic.setSymbol(symbol0);  

         // add the graphic to the map 
         map.graphics.add(graphic); 
        }); 
       }); 
       } catch(e){ 
       console.log(" exception occured"+e); 
      } 
    } 
    dojo.addOnLoad(init); 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    </body> 
</html> 

ответ

2

Беда почти прийти с количеством данных, извлеченной браузером и отображается , FeatureLayer ограничен количеством подробных функций, отображаемых сразу.

Но сервер полезен на данном этапе, вы просите сервер обобщать «на лету» геометрии. Это значительно уменьшает объем геометрии в зависимости от масштаба.

в вашем коде, вы можете использовать setAutoGeneralize (включение) истина на FeatureLayer. вы также можете установить minsccale и maxscale слоя с функциями, чтобы избежать отображения масштабов, на которых у вас много геометрий.

Documentation on FeatureLayer, and setAutoGeneralize method/option

вариант autoGeneralize в конструкторе:

autoGeneralize Включить или отключить автоматическое обобщение функций из нередактируемого слоя в режиме по требованию. Когда true, уровень использует текущее разрешение карты как maxAllowableOffset для всех запросов, выданных серверу. Значение по умолчанию верно. По v2.7

, используя этот код, чтобы выбрать параметр генерализации (макс allowableOffset), может уменьшить Amont из DATAS переданных в браузер, и набирает опыт пользователя.

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
    <title>Feature Layer Only Map</title> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"> 
    <style> 
     html, body, #map { 
     height: 100%; 
     width: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    <script src="http://js.arcgis.com/3.6/"></script> 
    <script> 

    var map; 

    require(["dojo/on","esri/config", "esri/map", "dojo/domReady!","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer","esri/InfoTemplate" ], function(on,config, Map,Ready,ArcGISDynamicMapServiceLayer,FeatureLayer,InfoTemplate) { 

    config.defaults.io.alwaysUseProxy = true; 
    config.defaults.io.proxyUrl = "/proxy.jsp"; 
    config.defaults.io.corsEnabledServers.push("sampleserver1.arcgisonline.com"); 

     map = new Map("map", { lods : [ 
    {"level" : 0, "resolution" : 0.010986328125, "scale" : 4617149.97766929}, 
    {"level" : 1, "resolution" : 0.0054931640625, "scale" : 2308574.98883465}, 
    {"level" : 2, "resolution" : 0.00274658203125, "scale" : 1154287.49441732}, 
    {"level" : 3, "resolution" : 0.001373291015625, "scale" : 577143.747208662}, 
    {"level" : 4, "resolution" : 0.0006866455078125, "scale" : 288571.873604331} 
    ] 
     }); 
     var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer"); 
       map.addLayer(layer); 
     layer.setVisibility(false); 
       var url = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3"; 
       var info_content = "<table><tr><td><b>COUNTRY :</b></td><td style='text-align:right'>${COUNTRY}</td></tr></table>"; 
       var infoTemplate1 = new InfoTemplate("${STATE_NAME}", info_content); 
       var fl = new FeatureLayer(url, { 
       id: "usa-regions", 
       mode: FeatureLayer.MODE_ONDEMAND, 
     autoGeneralize:false, 
       allowGeometryUpdates:false, 
       infoTemplate: infoTemplate1, 
       outFields: ["STATE_NAME"], 
     maxAllowableOffset : 0.02 
       }); 
    on(map,"zoom-end", function(evt) 
     { 
      fl.setMaxAllowableOffset(evt.extent.getWidth()/400); 

     }); 
    map.addLayer(fl); 

     }); 

    </script> 
    </head> 
    <body> 
    <div id="elements"></div> 
    <div id="map"></div> 
    </body> 
</html> 
+0

я добавил fl.setAutoGeneralize (правда) и установить maxScale и minsacle, а также проверили fl.isEditable, возвращающей ложным, но по-прежнему не поможет, вы можете, пожалуйста, дайте мне знать, что может этот вопрос я нужен художественный слой, как я есть на много графики на основе пользовательских взаимодействий – Anil

+0

, когда я записываю console.log («autoGeneralize» + fl.autoGeneralize) i get undefined – Anil

+0

Какова версия JS API, которую вы используете? – frett27

Смежные вопросы