【问题标题】:Adding Feature Layer hangs browser添加要素图层会挂起浏览器
【发布时间】:2013-09-04 00:32:41
【问题描述】:

当我使用 ArcGISDynamicMapServiceLayer 创建地图对象时,一切正常,但由于我需要大量图形并且想要处理地图上的用户交互,所以我想将要素图层添加到我的地图,但是当我添加要素图层时,浏览器会挂起。

请告诉我可能是什么问题,如何避免要素层挂在我的机器上。我可以为 ArcGISDynamicMapServiceLayer 添加 onclick 鼠标功能吗 下面是代码

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

下面是我的 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>

【问题讨论】:

    标签: javascript arcgis arcgis-server


    【解决方案1】:

    问题几乎来自浏览器检索和显示的数据量。 FeatureLayer 一次显示的详细功能数量有限。

    但是服务器在这一点上很有帮助,你要求服务器动态地概括几何。这会根据比例减少很多几何体积。

    在您的代码中,您可以在 FeatureLayer 上使用 setAutoGeneralize(enable) 为 true。 您还可以设置要素图层的 minscale 和 maxscale 以避免显示您有很多几何图形的比例。

    Documentation on FeatureLayer, and setAutoGeneralize method/option

    构造函数中的autoGeneralize选项:

    autoGeneralize 启用或禁用自动泛化 按需模式下不可编辑图层的特征。为真时, 图层使用当前地图分辨率作为 maxAllowableOffset 向服务器发出的所有查询。默认值是true。作为 v2.7

    通过使用此代码选择泛化参数(max allowableOffset),可以减少传输到浏览器的数据量,并获得用户体验。

        <!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>
    

    【讨论】:

    • 我添加了 fl.setAutoGeneralize(true) 并设置了 maxScale 和 minsacle 并检查了 fl.isEditable 返回 false 但仍然没有帮助,你能告诉我我需要特征层的问题吗我有很多基于用户交互的图形
    • 当我登录 console.log("autoGeneralize "+ fl.autoGeneralize) 我得到未定义
    • 你使用的 JS API 版本是多少?
    • 我使用的是 js api 3.6 版,我已经在问题部分发布了我的代码
    猜你喜欢
    • 1970-01-01
    • 2012-12-20
    • 2011-07-25
    • 1970-01-01
    • 2013-02-28
    • 1970-01-01
    • 2019-09-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多