您的位置：首页 > Web前端 > JavaScript

ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）

2009-07-05 12:11 751 查看

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">

</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.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控件的应用了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript api stylesheet server html asp.net

相关文章推荐

新的分享

章节导航