ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）
目的：
1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能，鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性信息。
准备工作：
1. 在ArcGis Server9.3中发布名为usa的MapServer。
2.在使用在线的http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer地图数据和jsapi。
完成后的效果图：
开始
1.启动vs新建名为MapIdentify的ASP.NET Web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要.net了，纯html页面就可以了用记事本都可以开发了。我这里为了方便了就用vs2008了，毕竟可以调试js脚本了。
2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建wabapp.js的文件，这里用来编写我们自己的js代码了，在Default.aspx页面里添加对这个js文件的引用，同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体，添加完成后的html代码如下：
4.切换到wabapp.js文件输入如下代码（具体的不做解释了代码注释已经非常详细了）：
1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能，鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性信息。
准备工作：
1. 在ArcGis Server9.3中发布名为usa的MapServer。
2.在使用在线的http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer地图数据和jsapi。
完成后的效果图：
开始
1.启动vs新建名为MapIdentify的ASP.NET Web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要.net了，纯html页面就可以了用记事本都可以开发了。我这里为了方便了就用vs2008了，毕竟可以调试js脚本了。
2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建wabapp.js的文件，这里用来编写我们自己的js代码了，在Default.aspx页面里添加对这个js文件的引用，同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体，添加完成后的html代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MapIdentify._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>
<script type="text/javascript" src="javascript/wabapp.js"></script>
<style type="text/css">
<!--
.tab {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
border: 1px solid #000000;
height: 18px;
width: 70px;
display: block;
margin-right: 0px;
float: left;
text-align: center;
padding-top: 2px;
background-color: #CCCCCC;
cursor: hand;
}
.a-tab {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
height: 18px;
width: 70px;
display: block;
margin-right: 0px;
float: left;
text-align: center;
padding-top: 2px;
background-color: #FFFFFF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #FFFFFF;
border-left-color: #000000;
cursor: hand;
}
.tr2 {
border: 1px solid #000000;
background-color: #FFFFFF;
padding: 0px;
overflow:scroll;
width:290px;
height:130px;
}
.tr1 {
height: 21px;
}
-->
</style>
</head>
<body class="tundra">
<form id="form1" runat="server">
<div id="map" style="width:500px; height:450px; border:1px solid #000;"></div>
</form>
</body>
</html>
3.上面的html代码非常的简单了，主要可以看一下tab、a-tab、tr2、tr1四个样式的定义了，这几个样式是用来定义Identify后在infoWindow中内容用的。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>
<script type="text/javascript" src="javascript/wabapp.js"></script>
<style type="text/css">
<!--
.tab {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
border: 1px solid #000000;
height: 18px;
width: 70px;
display: block;
margin-right: 0px;
float: left;
text-align: center;
padding-top: 2px;
background-color: #CCCCCC;
cursor: hand;
}
.a-tab {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
height: 18px;
width: 70px;
display: block;
margin-right: 0px;
float: left;
text-align: center;
padding-top: 2px;
background-color: #FFFFFF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #FFFFFF;
border-left-color: #000000;
cursor: hand;
}
.tr2 {
border: 1px solid #000000;
background-color: #FFFFFF;
padding: 0px;
overflow:scroll;
width:290px;
height:130px;
}
.tr1 {
height: 21px;
}
-->
</style>
</head>
<body class="tundra">
<form id="form1" runat="server">
<div id="map" style="width:500px; height:450px; border:1px solid #000;"></div>
</form>
</body>
</html>
4.切换到wabapp.js文件输入如下代码（具体的不做解释了代码注释已经非常详细了）：
dojo.require("esri.map");
dojo.require("esri.tasks.identify");
var map, identifyTask, identifyParams, symbol;
function init()
{
map = new esri.Map("map", { extent: new esri.geometry.Extent(-127.968857954995,25.5778580720472,-65.0742781827045,51.2983251993735, new esri.SpatialReference({wkid:4269})) });
var imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
map.addLayer(imageryPrime);
var portlandLandBase = new esri.layers.ArcGISDynamicMapServiceLayer("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer");
//设置要显示的图层
portlandLandBase.setVisibleLayers([2,1,0]);
//设置图层透明度
portlandLandBase.setOpacity(0.8);
map.addLayer(portlandLandBase);
//添加map的onLoad事件监听用来执行initIdentify，初始化Identify
dojo.connect(map,"onLoad",initIdentify);
}
//初始化Identify
function initIdentify(map)
{
dojo.connect(map, "onClick", doIdentify);
//实例化IdentifyTask
identifyTask = new esri.tasks.IdentifyTask("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer");
//IdentifyTask参数设置
identifyParams = new esri.tasks.IdentifyParameters();
//冗余范围
identifyParams.tolerance = 3;
//返回地理元素
identifyParams.returnGeometry = true;
//进行Identify的图层
identifyParams.layerIds = [2,1,0];
//进行Identify的图层为全部
identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
//设置infoWindow的大小
map.infoWindow.resize(300, 200);
//设置infoWindow的标题头
map.infoWindow.setTitle("Identify结果");
//symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,0.5]));
}
//进行Identify
function doIdentify(evt)
{
//清除上一次的高亮显示
map.graphics.clear();
//Identify的geometry
identifyParams.geometry = evt.mapPoint;
//Identify范围
identifyParams.mapExtent = map.extent;
identifyTask.execute(identifyParams, function(idResults) { addToMap(idResults, evt); });
}
var tabledata=new Array();
//在infoWindow中显示Identify结果
function addToMap(idResults, evt)
{
tabledata=new Array();
//把Identify结果的名称、字段、字段值放入tabledata中
for(var i=0;i<idResults.length;i++)
{
var idResult=idResults[i];
if(tabledata.length>0)
{
var b=false;
for(var j=0;j<tabledata.length;j++)
{
if(tabledata[j].displayFieldName==idResult.layerName)
{
var b=true;
break;
}
}
if(b)
{
tabledata[j].displayField.push(idResult.attributes);
tabledata[j].feature.push(idResult.feature);
}
else
{
var tds={};
var td=new Array();
//图层名称
tds.displayFieldName=idResult.layerName;
//图层字段
var oo=idResult.attributes;
td.push(oo);
tds.displayField=td;
var td2=new Array();
td2.push(idResult.feature);
tds.feature=td2;
tabledata.push(tds);
}
}
else
{
var tds={};
var td=new Array();
tds.displayFieldName=idResult.layerName;
var oo=idResult.attributes;
td.push(oo);
tds.displayField=td;
var td2=new Array();
td2.push(idResult.feature);
tds.feature=td2;
tabledata.push(tds);
}
}
//设置infoWindow显示内容
map.infoWindow.setContent(tableHtml(tabledata,0));
//设置infoWindow显示
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
//Identify结果的tab切换事件
function tab(index)
{
map.infoWindow.setContent(tableHtml(tabledata,index));
}
//infoWindow中内容html
function tableHtml(rs,index)
{
var str="";
var str1="";
var str2="";
for(var i=0;i<rs.length;i++)
{
if(i==index)
{
str1=str1+"<span class='a-tab' id='"+i+"' onclick='tab("+i+")'>"+rs[i].displayFieldName+"</span>";
}
else
{
str1=str1+"<span class='tab' id='"+i+"' onclick='tab("+i+")'>"+rs[i].displayFieldName+"</span>";
}
}
str2=trHtml(index);
str="<div class='tr1'>"+str1+"</div><div class='tr2'><table border='1'>"+str2+"</table></div>";
return str;
}
function trHtml(index)
{
var str2="<tr>";
for (prop in tabledata[index].displayField[0])
{
str2=str2+"<td>"+prop+"</td>"
}
str2=str2+"</tr>";
for(var i=0;i<tabledata[index].displayField.length;i++)
{
str2=str2+"<tr style='cursor: hand' onclick=showFeature(tabledata["+index+"].feature["+i+"])>";
for (prop in tabledata[index].displayField[i])
{
if(tabledata[index].displayField[i][prop]=="")
{
str2=str2+"<td> </td>"
}
else
{
str2=str2+"<td>"+tabledata[index].displayField[i][prop]+"</td>"
}
}
str2=str2+"</tr>";
}
return str2;
}
//高亮显示选中元素
function showFeature(feature)
{
map.graphics.clear();
feature.setSymbol(symbol);
map.graphics.add(feature);
}
dojo.addOnLoad(init);
5.上面的代码中主要是IdentifyTask的功能和infoWindow控件的应用了。dojo.require("esri.tasks.identify");
var map, identifyTask, identifyParams, symbol;
function init()
{
map = new esri.Map("map", { extent: new esri.geometry.Extent(-127.968857954995,25.5778580720472,-65.0742781827045,51.2983251993735, new esri.SpatialReference({wkid:4269})) });
var imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
map.addLayer(imageryPrime);
var portlandLandBase = new esri.layers.ArcGISDynamicMapServiceLayer("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer");
//设置要显示的图层
portlandLandBase.setVisibleLayers([2,1,0]);
//设置图层透明度
portlandLandBase.setOpacity(0.8);
map.addLayer(portlandLandBase);
//添加map的onLoad事件监听用来执行initIdentify，初始化Identify
dojo.connect(map,"onLoad",initIdentify);
}
//初始化Identify
function initIdentify(map)
{
dojo.connect(map, "onClick", doIdentify);
//实例化IdentifyTask
identifyTask = new esri.tasks.IdentifyTask("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer");
//IdentifyTask参数设置
identifyParams = new esri.tasks.IdentifyParameters();
//冗余范围
identifyParams.tolerance = 3;
//返回地理元素
identifyParams.returnGeometry = true;
//进行Identify的图层
identifyParams.layerIds = [2,1,0];
//进行Identify的图层为全部
identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
//设置infoWindow的大小
map.infoWindow.resize(300, 200);
//设置infoWindow的标题头
map.infoWindow.setTitle("Identify结果");
//symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,0.5]));
}
//进行Identify
function doIdentify(evt)
{
//清除上一次的高亮显示
map.graphics.clear();
//Identify的geometry
identifyParams.geometry = evt.mapPoint;
//Identify范围
identifyParams.mapExtent = map.extent;
identifyTask.execute(identifyParams, function(idResults) { addToMap(idResults, evt); });
}
var tabledata=new Array();
//在infoWindow中显示Identify结果
function addToMap(idResults, evt)
{
tabledata=new Array();
//把Identify结果的名称、字段、字段值放入tabledata中
for(var i=0;i<idResults.length;i++)
{
var idResult=idResults[i];
if(tabledata.length>0)
{
var b=false;
for(var j=0;j<tabledata.length;j++)
{
if(tabledata[j].displayFieldName==idResult.layerName)
{
var b=true;
break;
}
}
if(b)
{
tabledata[j].displayField.push(idResult.attributes);
tabledata[j].feature.push(idResult.feature);
}
else
{
var tds={};
var td=new Array();
//图层名称
tds.displayFieldName=idResult.layerName;
//图层字段
var oo=idResult.attributes;
td.push(oo);
tds.displayField=td;
var td2=new Array();
td2.push(idResult.feature);
tds.feature=td2;
tabledata.push(tds);
}
}
else
{
var tds={};
var td=new Array();
tds.displayFieldName=idResult.layerName;
var oo=idResult.attributes;
td.push(oo);
tds.displayField=td;
var td2=new Array();
td2.push(idResult.feature);
tds.feature=td2;
tabledata.push(tds);
}
}
//设置infoWindow显示内容
map.infoWindow.setContent(tableHtml(tabledata,0));
//设置infoWindow显示
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
//Identify结果的tab切换事件
function tab(index)
{
map.infoWindow.setContent(tableHtml(tabledata,index));
}
//infoWindow中内容html
function tableHtml(rs,index)
{
var str="";
var str1="";
var str2="";
for(var i=0;i<rs.length;i++)
{
if(i==index)
{
str1=str1+"<span class='a-tab' id='"+i+"' onclick='tab("+i+")'>"+rs[i].displayFieldName+"</span>";
}
else
{
str1=str1+"<span class='tab' id='"+i+"' onclick='tab("+i+")'>"+rs[i].displayFieldName+"</span>";
}
}
str2=trHtml(index);
str="<div class='tr1'>"+str1+"</div><div class='tr2'><table border='1'>"+str2+"</table></div>";
return str;
}
function trHtml(index)
{
var str2="<tr>";
for (prop in tabledata[index].displayField[0])
{
str2=str2+"<td>"+prop+"</td>"
}
str2=str2+"</tr>";
for(var i=0;i<tabledata[index].displayField.length;i++)
{
str2=str2+"<tr style='cursor: hand' onclick=showFeature(tabledata["+index+"].feature["+i+"])>";
for (prop in tabledata[index].displayField[i])
{
if(tabledata[index].displayField[i][prop]=="")
{
str2=str2+"<td> </td>"
}
else
{
str2=str2+"<td>"+tabledata[index].displayField[i][prop]+"</td>"
}
}
str2=str2+"</tr>";
}
return str2;
}
//高亮显示选中元素
function showFeature(feature)
{
map.graphics.clear();
feature.setSymbol(symbol);
map.graphics.add(feature);
}
dojo.addOnLoad(init);
