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

ArcGIS.Server.9.3和ArcGIS API for JavaScript实现查询定位中心的功能和FindTask功能应用（七）

2013-05-22 08:06 731 查看

原址：/article/4777199.html

目的：

1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现查询定位中心的功能，主要是通过FindTask功能实现的，输入关键字后对指定的图层以及字段进行关键字查询并且把查询到的结果显示在右边的Grid中，点击Grid中的某一行时进行定位中心进行显示。

准备工作：

1. 在ArcGis Server9.3中发布名为usa的MapServer。

2.在使用在线的http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer地图数据和jsapi。

完成后的效果图：

开始

1.启动vs新建名为FindTask的ASP.NET Web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要.net了，纯html页面就可以了用记事本都可以开发了。我这里为了方便了就用vs2008了，毕竟可以调试js脚本了。

2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建mapapp.js的文件，这里用来编写我们自己的js代码了，在Default.aspx页面里添加对这个js文件的引用，同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体、关键字输入的input、查找input按钮、DataGrid表格，添加完成后的html代码如下：

<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FindTask._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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css" />

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dojox/grid/resources/Grid.css"/>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dojox/grid/resources/tundraGrid.css"/>

<style type="text/css">

.style1

{

width: 301px;

}

</style>

<script type="text/javascript">djConfig={parseOnLoad:true}</script>

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>

<script type="text/javascript" src="javascript/mapapp.js"></script>

</head>

<body class="tundra">

<form id="form1" runat="server">

进行查询<input id="searchText" value="KS" type="text" /><input id="Button1" type="button"

value="查找" onclick="execute(dojo.byId('searchText').value);" />

<table border="1px">

<tr><td><div id="map" style="width:400px; height:300px; border:1px solid #000;"></div>

</td>

<td valign="top" class="style1">

<table dojoType="dojox.grid.DataGrid" jsid="gridWidget" id="gridWidget" rowsPerPage="5" rowSelector="20px" >

<thead>

<tr>

<th field="AREANAME" >AREANAME</th>

<th field="CAPITAL" >CAPITAL</th>

<th field="ST" >ST</th>

</tr>

</thead>

</table>

</td>

</tr>

</table>

</form>

</body>

</html>

3.上面的html中添加了Grid.css和tundraGrid.css两个样式文件的引用，因为在本例子中用dojox.grid.DataGrid作为数据表格显示控件，所以需要添加这2个样式，同时在页面代码的开头处添加了<script type="text/javascript">djConfig={parseOnLoad:true}</script>这个行js代码。

4.上面的html中用到了dojox.grid.DataGrid控件可以按照上面的地方进行设置，其它更多的请参考dojo的帮助文档。

5.完成页面的html后切换到mapapp.js的文件开始编写js功能，js代码包括3块功能，第一是地图的载入显示代码；第二是关键字查询的FindTask的功能；第三是DataGrid的行点击后进行定位中心显示的功能。具体的说明和代码如下：

dojo.require("esri.map");

dojo.require("esri.tasks.find");

dojo.require("dojox.grid.DataGrid");

dojo.require("dojo.data.ItemFileReadStore");

var findTask, findParams, map;

function init()

{

startExtent = new esri.geometry.Extent(-127.968857954995,25.5778580720472,-65.0742781827045,51.2983251993735, new esri.SpatialReference({wkid:4269}));

map = new esri.Map("map");

//底图Tile图

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.setExtent(startExtent);

//给DataGrid添加行点击事件

dojo.connect(gridWidget, "onRowClick", onRowClickHandler);

//实例化FindTask

findTask = new esri.tasks.FindTask("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer");

//FindTask的参数

findParams = new esri.tasks.FindParameters();

//返回Geometry

findParams.returnGeometry = true;

//查询的图层id

findParams.layerIds = [0,1,2];

//查询字段

findParams.searchFields = ["BJECTID","AREANAME","CAPITAL","ST","AREA"];

}

//给DataGrid行点击事件

function onRowClickHandler(evt)

{

//获取点击行

var row = gridWidget.getItem(evt.rowIndex);

//获取点击行的OBJECTID

var id=row.OBJECTID;

var sGrapphic;

//遍历地图的graphics查找OBJECTID和点击行的OBJECTID相同的Grapphic

for(var i=0;i<map.graphics.graphics.length;i++)

{

var cGrapphic=map.graphics.graphics[i];

if((cGrapphic.attributes) && cGrapphic.attributes.OBJECTID==id)

{

sGrapphic=cGrapphic;

break;

}

}

var sGeometry=sGrapphic.geometry;

//当点击的行对应的Geometry为点类型时进行地图中心定位显示

if(sGeometry.type=="point")

{

//var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25]));

//sGrapphic.setSymbol(hsymbol);

var cPoint=new esri.geometry.Point();

cPoint.x=sGeometry.x;

cPoint.y=sGeometry.y;

map.centerAt(cPoint);

}

//当点击的行对应的Geometry为线或面类型时获取Geometry的Extent进行中心定位显示

else

{

var sExtent=sGeometry.getExtent();

map.setExtent(sExtent);

}

}

//根据输入的关键字进行findTask操作

function execute(searchText)

{

findParams.searchText = searchText;

findTask.execute(findParams,showResults);

}

//显示findTask的结果

function showResults(results)

{

//清楚上一次的高亮显示

map.graphics.clear();

var dataForGrid = [];

for(var i=0;i<results.length;i++)

{

var curFeature=results[i];

var graphic = curFeature.feature;

//把查询到的对象的字段信息等插入到dataForGrid中

dataForGrid.push(graphic.attributes);

//根据类型设置显示样式

switch (graphic.geometry.type)

{

case "point":

var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));

break;

case "polyline":

var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1);

break;

case "polygon":

var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));

break;

}

//设置显示样式

graphic.setSymbol(symbol);

//添加到graphics进行高亮显示

map.graphics.add(graphic);

}

//dojox.grid.DataGrid显示的一些设置，具体参考dojo的DataGrid

var data = {identifier: "OBJECTID",label: "OBJECTID", items: dataForGrid};

var store = new dojo.data.ItemFileReadStore({ data:data });

//gridWidget为dojox.grid.DataGrid

gridWidget.setStore(store);

//过滤条件

gridWidget.setQuery({OBJECTID: '*' });

}

dojo.addOnLoad(init);

6.完成运行查看效果。

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

标签：

相关文章推荐

新的分享

章节导航