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

ArcGIS api for javascript——显示多个查询结果

2017-03-07 16:09 609 查看

描述

本例展示了在重叠的多边形处理查询的一种方式。单击一个石油和天然气的字段来查看地图上的高亮显示。如果仅仅点击一个要素，能够在单击一次来查看包含一些属性的InfoWindow。如果偶然单击到重叠的要素，将看到到一个要素列表，为下一次单击显示哪个要素的信息提供帮助。

注意本例使用一个InfoTemplate来定义信息窗口的文本格式。能够通过使用语法为${attributeName}包含某一属性的实际值。例如：${PROD_GAS}。

下面的代码根据用户单击要素的个数确定处理方式：

queryTask.execute(query, function(fset) {

if (fset.features.length === 1) {

showFeature(fset.features[0],evt);

} else if (fset.features.length !== 0) {

showFeatureSet(fset,evt);

});

如果用户单击一个要素，函数showFeature被调用。这个函数使用图形的 SimpleFillSymbol来强调这个要素。默认情况下信息窗口不会显示，直到用户再次单击这个加亮的要素，信息窗口才会显示。

如果用户点击重叠的要素，函数showFeatureSet被调用。这个函数循环访问每个要素并将要素名称和一个超链接加入信息窗口。用户能够使用这个要素超链接的列表选择要素。然后用户能够通过单击加亮的要素显示信息窗口。

注意查询任务的结果始终是一个FeatureSet。在本例中，结果集中唯一一个项目被传递给showFeature函数，而全部的结果集被传递给showFeatureSet函数。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>QueryTask with geometry, queries with multiple results at the same location are displayed in an InfoWindow</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<script type="text/javascript" language="Javascript">
dojo.require("esri.map");
dojo.require("esri.tasks.query");

var map, queryTask, query,featureSet;
//初始化函数
function init() {
//开始范围：地理坐标系wiid:4326
var startExtent = new esri.geometry.Extent(-100.7, 36.8, -95.8, 40.2, new esri.SpatialReference({wkid:4326}));

//创建地图
map = new esri.Map("mapDiv", {extent:startExtent});
//切片层并加载到地图中
var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
map.addLayer(tiledLayer);

//创建并增加一个动态层
var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer");
map.addLayer(dynamicLayer);

//注册一个监听click事件，当用户点击地图时执行executeQueryTask方法
dojo.connect(map, "onClick", executeQueryTask);

//注册一个监听信息窗口的onHide事件
dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});

//建立查询任务
queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer/0");

//监听onComplete事件的处理结果，使用queryTask.execute方法回调
//dojo.connect(queryTask, "onComplete", showResults);

//建立查询过滤器
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["FIELD_NAME",
"FIELD_KID", "PROD_GAS", "PROD_OIL", "STATUS"];
}

function executeQueryTask(evt) {
map.infoWindow.hide();
map.graphics.clear();
featureSet = null;

//用户点击onClick事件返回地图上EVT点.
//包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素点).
//设置查询几何等于evt.mapPoint
//执行任务和完成showResults
queryTask.execute(query, function(fset) {
if (fset.features.length === 1) {
showFeature(fset.features[0],evt);
} else if (fset.features.length !== 0) {
showFeatureSet(fset,evt);
}
});
}

function showFeature(feature,evt) {
map.graphics.clear();

//设置标记点
var 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]));
feature.setSymbol(symbol);

//构建信息窗口的标题和内容
var attr = feature.attributes;
var title = attr.FIELD_NAME;
var content = "Field ID : " + attr.FIELD_KID
+ "<br />Produces Gas : " + attr.PROD_GAS
+ "<br />Produces Oil : " + attr.PROD_OIL
+ "<br />Status : " + attr.STATUS;
map.graphics.add(feature);

map.infoWindow.setTitle(title);
map.infoWindow.setContent(content);
(evt) ? map.infoWindow.show(evt.screenPoint,
map.getInfoWindowAnchor(evt.screenPoint)) : null;
}

function showFeatureSet(fset,evt) {
//删除地图上所有的图形层
map.graphics.clear();
var screenPoint = evt.screenPoint;

featureSet = fset;

var numFeatures = featureSet.features.length;

//QueryTask返回featureSet类型.通过featureSet的循环把他们添加到信息窗口
var title = "You have selected " + numFeatures + " fields.";
var content = "Please select desired field from the list below.<br />";

for (var i=0; i<numFeatures; i++) {
var graphic = featureSet.features[i];
content = content + graphic.attributes.FIELD_NAME + " Field (<A href='#' onclick='showFeature(featureSet.features[" + i + "]);'>show</A>)<br/>";
}
map.infoWindow.setTitle(title);
map.infoWindow.setContent(content);
map.infoWindow.show(screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
}

dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
Click on a petrolueum field to get more info.<br>
If mulitple fields are selected then you can select the field to display.
<div id="mapDiv" style="width:800px; height:600px; border:1px solid #000;"></div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航