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>