描述

本例展示了当一个要素被查询时如何立刻打开一个InfoWindow。信息窗口能被用来将要素的属性格式化成用户易读的格式。

本例中,地图和查询任务都使用ESRI sample server上的服务KGS_OilGasFields_Kansas。地图也使用了来自ArcGIS OnlineESRI_Imagery_World_2D图层。 注意地图和查询任务不是必须要使用相同的服务。 例如,仅仅想保持来自ArcGIS Online的背景影像并在地图单击后显示要素。

单击地图后,下面的事件监听器调用函数executeQueryTask:

dojo.connect(map, "onClick", executeQueryTask);

查询任务根据用户单击的对象(不是多边形,唯一多边形或多个重叠的多边形)提供不同地运行:

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被调用。该函数格式化信息窗口,使用map.graphics.add显示要素的图形,并使用map.infoWindow.show方法立刻显示信息窗口。这覆盖了图形第二次单击显示信息窗口的默认行为。

如果多个要素被单击,函数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>
 
 

ArcGIS api for javascript——查询,立刻打开信息窗口的更多相关文章

  1. ArcGIS api for javascript——查询,然后单击显示信息窗口

    描述 本例展示如何配置查询任务为示例的工作流程: 1.用户单击一个要素来加亮显示. 2.用户再一次单击要素来查看属性信息的 InfoWindow. 本例查询USA州,因此ESRI_StateCityH ...

  2. ArcGIS api for javascript——查询没有地图的数据

    描述 本例展示了用户能够从没有显示服务的地图服务查询数据.大部分地图服务包含属性信息的数据集,数据集能够被查询并显示在一个简单的列或表格里. 本例按提供的州名称查询USA人口普查数据,然后显示关于州的 ...

  3. arcgis api for javascript中使用proxy.jsp

    当我们使用arcgis api for javascript 查询arcgis服务时,如果查询的参数很长时,通过get方式提交会查询不到结果,因为get方式提交的参数有长度限制,需要通过代理的方式使用 ...

  4. ArcGIS api for javascript——加载查询结果,悬停显示信息窗口

    转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...

  5. ArcGIS API for Javascript 使用缓冲区结果做query查询出现“esri.config.defaults.io.proxyUrl 尚未进行设置”错误

    1.前言 在研究ArcGIS API for JavaScript时会遇到这样的问题,比如我们在做缓冲区分析时,用分析的范围作为空间查询query的参数,在执行结果中总是会看到“esri.config ...

  6. arcgis api for javascript 学习(七) 调用发布地图信息,并将地图属性信息输出到Excel表格---进阶版

    我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...

  7. arcgis api for javascript 学习(三) 调用发布地图信息,并将地图属性信息输出到Excel表中

    吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...

  8. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  9. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

随机推荐

  1. 路飞学城Python-Day4

    29.二进制转换计算机使用的语言就是二进制古时候,人们使用信鸽.书信.千里马等方式.但是这样的方式是不可靠的,时间也长.古时候的军方,通过烽火狼烟进行简单的信息交流 30.二进制的转换(II)8 4 ...

  2. js悬浮吸顶

    <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>吸顶和锚点链接</t ...

  3. (2016北京集训十三)【xsy1532】网络战争 - 最小割树+树上倍增+KD树

    题解: 好题!! 这题似乎能上我代码长度记录的前五? 调试时间长度应该也能上前五QAQ 首先题目要求的明显就是最小割,当然在整个森林上求Q次最小割肯定是会GG的,所以我们需要一个能快速求最小割的算法— ...

  4. 影像服务——加载CESIUM自带的影像服务

    1.加载arcgis数据——ArcGisMapServerImageryProvider var viewer = new Cesium.Viewer("cesiumDiv",{ ...

  5. POJ-1511 Invitation Cards 往返最短路 邻接表 大量数据下的处理方法

    题目链接:https://cn.vjudge.net/problem/POJ-1511 题意 给出一个图 求从节点1到任意节点的往返路程和 思路 没有考虑稀疏图,上手给了一个Dijsktra(按紫书上 ...

  6. HDU 6051 If the starlight never fade(原根+推式子)

    题目大意: 设\(f(i)\)为使\((x+y)^i \equiv x^i (mod\ p)\)成立的(x,y)的对数.其中\(1 \leq x \leq p-1 , 1\leq y\leq m\), ...

  7. wackoPicko 渗透平台的安装

    2016-05-17 wackoPicko 的介绍及下载地址        https://github.com/adamdoupe/WackoPicko#from=codefrom.com 首先我们 ...

  8. ProGuard常见问题及解决套路

    ProGuard是一个压缩.优化和混淆Java字节码的工具,非常好用.本篇文章总结一下许多人在使用ProGuard时经常遇到的问题. 我把在使用ProGuard时经常遇到的问题分为两类,分别是导致构建 ...

  9. 《Spring技术内幕》笔记-Spring的设计理念和总体架构

    1.Spring的主要子项目:     -1.Spring Framework(Core):Spring项目的核心.提供IoC,AOP,MVC等核心功能.     -2.Spring Web Flow ...

  10. Ubuntu 10.04 右上角网络管理图标消失的解决的方法

           那个显示网络状态的那个图标.叫做:network-manager.假设是有线网络连接的话.是上下两个箭头,假设是无线网络的话.是一个发射信号的形状. sudo gedit /etc/Ne ...