描述

本例展示当用户在要素上悬停鼠标时如何显示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——鼠标悬停时显示信息窗口的更多相关文章

  1. ArcGIS api for javascript——查询，立刻打开信息窗口

    描述 本例展示了当一个要素被查询时如何立刻打开一个InfoWindow.信息窗口能被用来将要素的属性格式化成用户易读的格式. 本例中,地图和查询任务都使用ESRI sample server上的服务K ...

  2. ArcGIS api for javascript——加入地图并显示x,y坐标

    这个示例报告了用户在地图上悬停和拖拽鼠标的鼠标指针坐标.通过事件监听器来更新鼠标移到的x和y坐标. 下行代码创建了地图: var map = new esri.Map("map") ...

  3. ArcGIS api for javascript——使用图层定义显示地图

    描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...

  4. ArcGIS api for javascript——加入地图并显示当前地图范围

    描述 这个示例使用Map.extent property属性接收地图范围的左下角和右上角坐标 "书签". 使用下列行创建地图: var map = new esri.Map(&qu ...

  5. arcgis api for javascript 添加图层时设置标注，自定义符号

    <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta nam ...

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

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

  7. ArcGIS api for javascript——用图表显示查询结果

    描述 本例展示了如何使用查询任务结果用去Google Chart API构建一个图表.当运行本例,点击一个郡县去看出现在一个无焦点的InfoWindow中的人口统计的数据的图表. 函数init创建了一 ...

  8. ArcGIS api for javascript——显示一个信息窗口

    描述 这个示例展示了在用户单击地图时如何在InfoWindow中显示信息.信息窗口是一个dijit (Dojo widget).信息窗口能够包含文本,字符,图片和任何通过HTML表示的事物.这个例子在 ...

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

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

随机推荐

  1. latex问题总结

    1.使 IEEE 的 Latex 杂志(journal)模板(templet)图片标题(caption)居中 由于IEEETran-journal中的默认caption左对齐.加上\usepackag ...

  2. 服务器搭建域控与SQL Server的AlwaysOn环境过程（三）配置故障转移

    0 引言 主要讲述如何搭建故障转移集群,因为AlwaysOn是基于Windows的故障转移集群的. 在讲解步骤之前需要了解一下故障转移集群仲裁配置 下面图片来自<Windows Server20 ...

  3. 简洁的MVC思想框架——Nancy（环境配置与Get操作）

    Nancy官网——https://github.com/NancyFx/Nancy 概述:Nancy是一个开源的Web轻型框架内核符合MVC思想,有开发方便,路由简单的特点,而且功能齐全 起步:Hel ...

  4. nginx proxy_set_header设置，自定义header

    在实际应用中,我们可能需要获取用户的ip地址,比如做异地登陆的判断,或者统计ip访问次数等,通常情况下我们使用request.getRemoteAddr()就可以获取到客户端ip,但是当我们使用了ng ...

  5. Mysql学习总结（20）——MySQL数据库优化的最佳实践

    1)谨慎而有效地使用索引 选择合理的索引(前缀性及可选性).删除没有用的索引. 2)使用规范化,但不要使用过头 规范化(至少是第三范式)是一个易于理解且标准的方法.然而,在有些情况下,你可能希望违反这 ...

  6. Web长连接推送

    http://www.workerman.net/web-sender http://wahahachuang5.iteye.com/blog/2311313

  7. Android中加入思源字体/NotoSansCJK/SourceHanSans

    系统版本号:Android 4.2.2_r1 本文主要是在Android中加入思源字体的过程记录. 思源字体是Google和Adobe在2014.07.18公布的中文字体. 1.获取思源字体(Goog ...

  8. 架构设计--用户端全http參数接口具体说明v1

    1. 用户端全http參数接口具体说明v1.doc 1 2. change histor 1 3. 接口通用參数说明 1 4. 函数注冊接口(规划中) 3 5. 用户权限模块 3 5.1. 用户注冊接 ...

  9. android -- 小问题 关于ListView设置了OnScrollListener之后onScrollStateChanged（）和onScroll方法监听不到的问题

    关于ListView设置了OnScrollListener之后onScrollStateChanged()和onScroll方法监听不到的问题: 原因: 首先OnScrollListener是焦点滚动 ...

  10. Android中的AsyncTask异步任务的简单实例

    在 Android中的AsyncTask异步任务的简介 一文中.已经对 安卓 异步任务操作做了简单的介绍.这里,直接将上文中的异步任务做了一个实例.实现异步操作更新UI线程,相比开启子线程更新来说逻辑 ...