1

当我使用 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>
4

1 回答 1

2

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

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

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

FeatureLayer 和 setAutoGeneralize 方法/选项的文档

构造函数中的 autoGeneralize 选项:

autoGeneralize 启用或禁用按需模式下不可编辑图层中要素的自动概括。为 true 时,图层使用当前地图分辨率作为向服务器发出的所有查询的 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>
于 2013-08-31T22:53:49.123 回答