<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SelectGriphic._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/webapp.js"></script>
< /head>
< body class="tundra">
<form id="form1" runat="server">
<table border="1px">
<tr><td><div id="map" style="width:400px; height:400px; border:1px solid #000;"></div></td>
<td valign="top"><input id="sbtn" name="sbtn" type="button" value="进行框选查询" οnclick="doSearch(this)" />
<div id="inextent"></div>
<div id="results" style="width:300px; height:360px; border:0px solid #000; overflow:auto;">
</td></tr>
</table>
</form>
< /body>
< /html>
完成页面工作后切换到webapp.js文件开始编写js代码，总共分为3部分功能：
一、载入http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer的底图进行显示。
二、查询我们自己发布的usa地图的Cities图层也就是0图层中2000年人口大于500000的点添加到GraphicsLayer中进行显示，即POP2000 > 500000。
三、框选查询按钮的框选GraphicsLayer中的点进行高亮显示以及数量、详细列表的显示。
具体的说明看详细代码：
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->dojo.require("esri.map");
dojo.require("esri.toolbars.draw");
dojo.require("esri.tasks.query");
var map;
var defaultSymbol;
var highlightSymbol;
var resultTemplate;
var drawToolbar;
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})),
showInfoWindowOnClick:false,displayGraphicsOnPan:false
});
map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer"));
drawToolbar = new esri.toolbars.Draw(map);
//点默认显示样式
defaultSymbol = 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]));
//点高亮显示样式
highlightSymbol = 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,0,0,0.5]));
//实例化QueryTask，目标图层为http://mypc/ArcGIS/rest/services/USA/MapServer/0
var queryTask = new esri.tasks.QueryTask("http://mypc/ArcGIS/rest/services/USA/MapServer/0");
//设置Query参数
var query = new esri.tasks.Query();
//查询2000年人口大于500000的点
query.where = "POP2000 > 500000";
//结果需要返回Geometry
query.returnGeometry = true;
//需要返回的字段
query.outFields = ["AREANAME","ST","CAPITAL","POP2000"];
//进行查询完成后调用addPointsToMap方法
queryTask.execute(query, addPointsToMap);
//设置模板，用于列表显示的模板
resultTemplate = new esri.InfoTemplate("City", "<tr><td>${AREANAME}</td><td>${ST}</td><td>${CAPITAL}</td><td>${POP2000}</td></tr>");
}
//把查询到的点添加到map的GraphicsLayer中进行显示
function addPointsToMap(featureSet)
{
var features = featureSet.features;
//遍历查询结果把结果以点默认显示样式添加到map的GraphicsLayer中进行显示
for (var i=0, il=features.length; i<il; i++)
{
map.graphics.add(features[i].setSymbol(defaultSymbol).setInfoTemplate(resultTemplate));
}
}
//进行框选查询操作
function doSearch(ele)
{
if(ele.value=="进行框选查询")
{
ele.value="取消框选查询";
//添加onDrawEnd完成后监听事件调用findPointsInExtent方法
dojo.connect(drawToolbar, "onDrawEnd", findPointsInExtent);
drawToolbar.activate(esri.toolbars.Draw.EXTENT);
}
else
{
ele.value="进行框选查询";
drawToolbar.deactivate();
}
}
//进行框选查询
function findPointsInExtent(extent)
{
var results = [];
var graphics = map.graphics.graphics;
//对map的GraphicsLayer的元素进行遍历把包含在extent元素进行高亮显示,同时把元素的属性值放到results数组中
for(var i=0;i<graphics.length;i++)
{
var graphic=graphics[i];
if(extent.contains(graphic.geometry))
{
graphic.setSymbol(highlightSymbol);
//getContent()返回以InfoTemplate为模板的属性值
results.push(graphic.getContent());
}
else
{
graphic.setSymbol(defaultSymbol);
}
}
//显示查询到的结果个数
dojo.byId("inextent").innerHTML = "结果数量："+results.length+"个";
//输出查询到的结果列表
dojo.byId("results").innerHTML = "<table border='1px'><tr><td>AREANAME</td><td>ST</td><td>CAPITAL</td><td>POP2000</td></tr>" + results.join("") + "</table>";
}
dojo.addOnLoad(init);
5.这样就完成的全部代码可以运行查看效果，上中我们用到了Extent的contains方法，下面对Extent方法作一个总结：
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->//Extent方法总结
//centerAt(point)：返回一个新的以point为中心的Extent
//contains(point)：返回point是否在Extent范围内
//expand(factor)：返回一个按照factor扩展的Extent，比如factor=1.5是返回比原来Extent大50%的Extent
//getCenter()：返回Extent的中心
//getHeight()：返回Extent的高
//getWidth()：返回Extent的宽
//intersects(extent)：返回Extent是否extent相交集
//offset(ox, oy)：移动当前的Extent位置，单位为地图单位
//union(extent)：扩展Extent，包含当前的Extent和extent
//update(xmin, xmin, xmax, ymax, spatialReference)：更新Extent
7733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
