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代码如下：
<!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.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+"' οnclick='tab("+i+")'>"+rs[i].displayFieldName+"</span>";
}
else
{
str1=str1+"<span class='tab' id='"+i+"' οnclick='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' οnclick=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控件的应用了。
转载于:https://www.cnblogs.com/hll2008/archive/2008/11/25/1340910.html
ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）相关推荐
- [转]ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能（七）
目的: 1.ArcGIS API for Flex实现Query查询定位中心功能,进行属性查图的功能,选择图层然后输入查询语句进行查询把查到的地理元素高亮显示同时在右边的Grid中显示查到的数据,然后 ...
- ArcGIS.Server.9.3和ArcGIS API for Flex的GeometryService和buffer分析（十）
目的: 1.ArcGIS API for Flex用GeometryService实现点.线.面的buffer分析.准备工作: 1.在ArcGIS.Server.9.3发布一个叫USA的Map Ser ...
- [转]ArcGIS.Server.9.3和ArcGIS API for Flex实现Toolbar功能（四）
目的: 1.ArcGIS API for Flex实现Toolbar功能,包括ZoomIn.ZoomOut.Pan.PrevExtent.NextExtent.FullExtent功能.准备工作: 1 ...
- ArcGIS Server Java 9.3 REST API的中文查询问题的解决方案
[2009.2.18补注]这个问题在SP1 for Linux中修复,SP1 for Windows下问题更加严重,如果打了SP1 for Windows,还想使用REST服务,就必须使用Linux或 ...
- 一、ArcGIS Server篇：利用ArcGIS Server发布动态地图服务
写在前面的话:本篇博客参考 在WebGIS开发过程中,我们所需要的数据不仅仅来自于ArcGIS online,有时候我们需要发布自己的数据服务,在本篇博客中主要说明一下如何利用ArcGIS Serve ...
- 关于ARCGIS SERVER 9.3的ArcGIS Server Manager出现“/”应用程序中的服务器错误
"/ArcGIS/Manager"应用程序中的服务器错误. ------------------------------------------------------------ ...
- C# 调用ArcGIS server admin api
一.AGS server admin api 介绍 1.1什么是admin api AGS Server Admin api 官方的称呼是 AGS Server administrator api, ...
- 《精通ArcGIS Server 应用与开发》——第 1 章 ArcGIS 10简介1.1 ArcGIS 10体系结构1...
本节书摘来自异步社区<精通ArcGIS Server 应用与开发>一书中的第1章,第1.1节,作者: 何正国 , 杜娟 , 毛海亚 更多章节内容可以访问云栖社区"异步社区&quo ...
- ArcGIS Server 开发系列（一）--编程框架总览
ArcGIS Server是一个发布企业级GIS应用程序的综合平台,如果想对ArcGIS Server基础有更多的了解,可以先看看<ArcGIS Server 体系结构>.ESRI(中国) ...
最新文章
- MAC下《暗黑世界》客户端版本编译说明！！
- Java中 equals和==的区别？
- python自动化框架测试实操_自动化框架之 python+selenium+pytest
- 更换锁定计算机图片,电脑锁屏图片怎么设置
- 球变暖导致巨大灾难 及早应对海平面上升危害
- 速修复！Netgear 61款路由器和调制解调器中存在多个严重的预认证RCE漏洞
- input html5 新特性,html5 input 新特性
- 移远EC20串口使用阻塞问题
- mysql 父子关系查询,父子关系-SQL查询
- 计算机科学与技术的职业资格,软件水平考试是专业技术资格还是职业资格
- 网络中断 rps xps 调优记录
- amcharts php,AMCHARTS+MYSQL+PHP的使用实例
- 基于JAVA准妈妈孕期交流平台计算机毕业设计源码+系统+lw文档+部署
- hbuild无法与这台计算机上的,HBuilderX无法连接网络
- linux安装project lemon测评机
- rk3288 Android 8,RK3288W Android8.1开发日志（一）
- aec Gain 公式
- java security_java.security.NoSuchAlgorithmException
- 高阳：我是黑客我怕谁
- ios 高德地图加载瓦片地图_iOS高德地图添加自定义瓦片地图
热门文章
- php发送sql,php发送Sql语句遇到的坑
- 2020 有哪些不容错过的前端技术趋势？
- Knative 实战：如何在 Knative 中配置自定义域名及路由规则
- 如何在 Knative 中部署 WebSocket 和 gRPC 服务？
- springboot获取原生js请求_七节课带你学会SpringBoot，第三课
- rn项目 假如cocoapods_在项目中集成 RN
- python函数调用的三种方式_判断python对象是否可调用的三种方式及其区别
- linux deb文件安装_如何在 Ubuntu 上安装 VirtualBox | Linux 中国
- 存储系统管理服务器,Mainframe的存储管理系统和架构
- 【图像分类】基于Pascal VOC2012增强数据的多标签图像分类实战