ArcGIS api for javascript——鼠标悬停时显示信息窗口
描述
本例展示当用户在要素上悬停鼠标时如何显示InfoWindow。本例中,要素是查询USA州图层的QueryTask的查询结果。工作流程如下:
1.用户单击一个要素
2.要素是“加亮的”图形。
3.用户在图形上悬停鼠标,看到属性信息的信息窗口。
如果想要在任意要素上悬停鼠标来查看信息窗口,见示例加载查询结构,悬停显示。
当用户在要素上移动鼠标时,下面的事件监听器格式化并显示信息窗口:
dojo.connect(map.graphics, "onMouseMove", function(evt) {
var g = evt.graphic;
map.infoWindow.setContent(g.getContent());
map.infoWindow.setTitle(g.getTitle());
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
});
还有一个监听器是必要的,一旦鼠标移出要素隐藏信息窗口:
dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} );
<%@ 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, results as 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;
var symbol, infoTemplate; function init() {
//创建地图
map = new esri.Map("mapDiv"); //创建并添加层
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer");
map.addLayer(layer); //注册监听click事件,当用户点击地图时执行executeQueryTask方法
dojo.connect(map, "onClick", executeQueryTask); //建立查询任务
queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1"); //监听onComplete事件的处理结果,使用queryTask.execute方法回调
dojo.connect(queryTask, "onComplete", showResults); //建立查询过滤器
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["STATE_NAME",
"STATE_FIPS", "STATE_ABBR", "HYPERLINK", "AREA"]; //在信息窗口创建infoTemplate
//${属性名}将取代目前的功能和属性值.
infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "State Fips:${STATE_FIPS}<br>Abbreviation: ${STATE_ABBR}<br/>Area: ${AREA}"); symbol = new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
new dojo.Color([255,0,0]), 2),
new dojo.Color([255,255,0,0.5])
);
} function executeQueryTask(evt) {
//用户点击onClick事件返回地图上EVT点.
//包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素点).
//设置查询几何等于evt.mapPoint
query.geometry = evt.mapPoint; //执行任务和完成showResults
queryTask.execute(query, showResults);
} function showResults(featureSet) {
//删除地图上所有的图形层
map.graphics.clear(); var features = featureSet.features; //QueryTask返回featureSet类型.通过featureSet的循环把他们添加到信息窗口
for (var i=0, il=features.length; i<il; i++) {
//从featureSet中得到当前实例.
//从当前实例赋值给graphic
var graphic = features[0];
graphic.setSymbol(symbol); //设置图形的infoTemplate.
graphic.setInfoTemplate(infoTemplate); //添加当前这个图形到地图图层中
map.graphics.add(graphic);
}
//注册鼠标悬停监听事件
dojo.connect(map.graphics, "onMouseMove", function(evt) {
var g = evt.graphic;
map.infoWindow.setContent(g.getContent());
map.infoWindow.setTitle(g.getTitle());
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor
(evt.screenPoint));
});
//注册鼠标离开监听事件
dojo.connect(map.graphics, "onMouseOut", function() {
map.infoWindow.hide();
} ); } dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
Click on a state to get more info. When state is highlighted, move mouse over state to get more info.
<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
</body>
</html>
ArcGIS api for javascript——鼠标悬停时显示信息窗口的更多相关文章
- ArcGIS api for javascript——查询,立刻打开信息窗口
描述 本例展示了当一个要素被查询时如何立刻打开一个InfoWindow.信息窗口能被用来将要素的属性格式化成用户易读的格式. 本例中,地图和查询任务都使用ESRI sample server上的服务K ...
- ArcGIS api for javascript——加入地图并显示x,y坐标
这个示例报告了用户在地图上悬停和拖拽鼠标的鼠标指针坐标.通过事件监听器来更新鼠标移到的x和y坐标. 下行代码创建了地图: var map = new esri.Map("map") ...
- ArcGIS api for javascript——使用图层定义显示地图
描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...
- ArcGIS api for javascript——加入地图并显示当前地图范围
描述 这个示例使用Map.extent property属性接收地图范围的左下角和右上角坐标 "书签". 使用下列行创建地图: var map = new esri.Map(&qu ...
- arcgis api for javascript 添加图层时设置标注,自定义符号
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta nam ...
- ArcGIS api for javascript——加载查询结果,悬停显示信息窗口
转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...
- ArcGIS api for javascript——用图表显示查询结果
描述 本例展示了如何使用查询任务结果用去Google Chart API构建一个图表.当运行本例,点击一个郡县去看出现在一个无焦点的InfoWindow中的人口统计的数据的图表. 函数init创建了一 ...
- ArcGIS api for javascript——显示一个信息窗口
描述 这个示例展示了在用户单击地图时如何在InfoWindow中显示信息.信息窗口是一个dijit (Dojo widget).信息窗口能够包含文本,字符,图片和任何通过HTML表示的事物.这个例子在 ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
随机推荐
- 字符串格式时间转Date格式
/** * 字符串时间格式转 Date 格式 * @param strDate * @return */ public static Date getDateTimeByStringTime(Stri ...
- WPF内嵌WCF服务对外提供接口
要测试本帖子代码请记得管理员权限运行vs. 我写这个帖子的初衷是在我做surface小车的时候有类似的需求,感觉这个功能还挺有意思的,所以就分享给大家,网上有很多关于wcf的文章 我就不一一列举了.公 ...
- ES6学习笔记(二十)Module 的加载实现
上一章介绍了模块的语法,本章介绍如何在浏览器和 Node 之中加载 ES6 模块,以及实际开发中经常遇到的一些问题(比如循环加载). 1.浏览器加载 传统方法 HTML 网页中,浏览器通过<sc ...
- vue项目的webpack4.X配置
这两天摆弄webpack,躺过很多坑,直到今天看了一位博主的文章才得以解决.他对配置中的各个部分做说明. 下面的配置99.9%抄自博主: https://www.cnblogs.com/nianyif ...
- 数组的常用方法 Array;
数组: 1,arr.join();//返回默认由逗号隔开的一个字符串,传参则返回所传参数隔开的一个字符串; 2,arr.push();//往数组最后添加数据,返回新的数组的length,这个方法将改变 ...
- [USACO16DEC]Cities and States省市
题目:洛谷P3405. 题目大意:给你一些省市的名称(大写)和所在省的名称(两个大写字母),求有多少对城市满足:A城市的名字的前两个字母等于B城市所在省的名称,且A所在省的名称等于B城市的名字的前两个 ...
- [NOIP2003提高组]侦探推理
题目:洛谷P1039.Vijos P1106.codevs1089. 题目大意:给你一系列证词,要你求出谁是凶手.具体题目见原题. 解题思路:我们枚举犯人和星期,一个一个进行判断.如果成功则记录答案, ...
- Java取得环境变量和系统属性
取得所有的环境变量 public class GetEnvAndProp { public static void main(String[] args) { Map<String, Strin ...
- 2015 Multi-University Training Contest 2 Buildings
Buildings Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...
- 榨取kkksc03 luogu1855 dp 裸二维费用背包
首先对于这个题目背景,,个人认为很(you)好(qu),,, 核心就是一个裸的二维费用背包,刚刚学习的同学参见dd大牛的背包九讲 #include <cstdio> #include &l ...