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代码如下:
<%@ 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中内容用的。
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.2983251993735new 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(300200);
   
//设置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, 15new 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>&nbsp;</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控件的应用了。
posted @ 2008-11-25 22:27  水的右边  阅读(10906)  评论(7编辑  收藏  举报