添加要素图层将挂起浏览器
Adding Feature Layer hangs browser
当我使用ArcGISDynamicMapServiceLayer创建地图对象时，一切都很好，但由于我需要大量图形，并且希望处理地图上的用户交互，所以我想在地图中添加功能层，但当我添加功能层时，浏览器会挂起。
请让我知道可能是什么问题，我如何避免功能层挂在我的机器上。我可以为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);
我的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>
问题几乎与浏览器检索和显示的数据量有关。FeatureLayer一次显示的详细特征数量有限。
但是服务器在这一点上是有帮助的，您要求服务器动态地概括几何图形。这会根据比例大大减少几何体体积。
在您的代码中，您可以在FeatureLayer上使用setAutoGeneralize（enable）为true。您还可以设置特征层的minsccale和maxscale，以避免显示具有大量几何图形的比例。
FeatureLayer文档，并设置AutoGeneralize方法/选项
构造函数中的autoGeneralize选项：
autoGeneralize启用或禁用按需模式下来自不可编辑层的功能。如果为true层使用当前贴图分辨率作为向服务器发出的所有查询。默认值为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>
相关文章：
- Chrome浏览器“;挂起”;同时在循环中执行AJAX请求
- fullcalendar在删除导致浏览器挂起的多个事件时速度较慢
- jQuery.每个都会导致浏览器挂起
- Javascript中基于类的框架导致浏览器挂起
- JQgrid 在渲染时完全挂起浏览器
- 浏览器在 ExtJS 中执行特定行时挂起
- 浏览器在使用Highcharts绘制超过10000个系列时挂起
- 添加要素图层将挂起浏览器
- 为什么HighChart挂起浏览器
- Javascript导致浏览器挂起
- HTML中嵌入的Java applet在发送电子邮件时挂起浏览器
- Internet Explorer浏览器问题:浏览器不提交POST数据与Ajax请求，服务器/客户端挂起
- 使用ajax进行自动刷新会在10-15秒后导致浏览器挂起或崩溃
- 简单的jquery每个循环使浏览器挂起
- 我的scrollTop() jQuery方法一旦滚动就挂起浏览器
- 如何调试挂起浏览器的JavaScript ?
- 我可以使用javascript强制浏览器“刷新”吗?任何挂起的布局更改
- 重新渲染一个ReactJS组件会挂起浏览器
- 在javascript中对框架调用print()会挂起ie8浏览器
- jqPlot DateAxisRenderer挂起浏览器
