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();} );

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3 <html>
  4   <head>
  5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6     <meta http-equiv="X-UA-Compatible" content="IE=7" />
  7     <title>QueryTask with geometry, results as an InfoWindow</title>
  8     <link rel="stylesheet" type="text/css"
  9     href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
 10     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
 11     <script type="text/javascript" language="Javascript">
 12       dojo.require("esri.map");
 13       dojo.require("esri.tasks.query");
 14 
 15       var map, queryTask, query;
 16       var symbol, infoTemplate;
 17 
 18       function init() {
 19         //创建地图
 20         map = new esri.Map("mapDiv");
 21 
 22         //创建并添加层
 23         var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer");
 24         map.addLayer(layer);
 25 
 26         //注册监听click事件，当用户点击地图时执行executeQueryTask方法
 27         dojo.connect(map, "onClick", executeQueryTask);
 28 
 29 
 30         //建立查询任务
 31         queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1");
 32 
 33         //监听onComplete事件的处理结果，使用queryTask.execute方法回调
 34         dojo.connect(queryTask, "onComplete", showResults);
 35 
 36         //建立查询过滤器
 37         query = new esri.tasks.Query();
 38         query.returnGeometry = true;
 39         query.outFields = ["STATE_NAME",
 40         "STATE_FIPS", "STATE_ABBR", "HYPERLINK", "AREA"];
 41 
 42         //在信息窗口创建infoTemplate
 43         //${属性名}将取代目前的功能和属性值.
 44         infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "State Fips:${STATE_FIPS}<br>Abbreviation: ${STATE_ABBR}<br/>Area: ${AREA}");
 45 
 46         symbol = new esri.symbol.SimpleFillSymbol(
 47            esri.symbol.SimpleFillSymbol.STYLE_SOLID,
 48            new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
 49            new dojo.Color([255,0,0]), 2), 
 50            new dojo.Color([255,255,0,0.5])
 51         );
 52       }
 53 
 54       function executeQueryTask(evt) {
 55         //用户点击onClick事件返回地图上EVT点.
 56         //包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素点).
 57         //设置查询几何等于evt.mapPoint
 58         query.geometry = evt.mapPoint;
 59 
 60         //执行任务和完成showResults
 61         queryTask.execute(query, showResults);
 62       }
 63 
 64       function showResults(featureSet) {
 65         //删除地图上所有的图形层
 66         map.graphics.clear();
 67 
 68         var features = featureSet.features;
 69 
 70         //QueryTask返回featureSet类型.通过featureSet的循环把他们添加到信息窗口
 71         for (var i=0, il=features.length; i<il; i++) {
 72           //从featureSet中得到当前实例.
 73           //从当前实例赋值给graphic
 74           var graphic = features[0];
 75           graphic.setSymbol(symbol);
 76 
 77           //设置图形的infoTemplate.
 78           graphic.setInfoTemplate(infoTemplate);
 79 
 80           //添加当前这个图形到地图图层中
 81           map.graphics.add(graphic);
 82         }
 83         //注册鼠标悬停监听事件
 84         dojo.connect(map.graphics, "onMouseMove", function(evt) {
 85           var g = evt.graphic;
 86           map.infoWindow.setContent(g.getContent());
 87           map.infoWindow.setTitle(g.getTitle());
 88           map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor
 89           (evt.screenPoint));
 90         });
 91         //注册鼠标离开监听事件
 92         dojo.connect(map.graphics, "onMouseOut", function() {
 93             map.infoWindow.hide();
 94           } );
 95 
 96       }
 97 
 98       dojo.addOnLoad(init);
 99     </script>
100   </head>
101   <body class="tundra">
102     Click on a state to get more info.  When state is highlighted, move mouse over state to get more info.
103     <div id="mapDiv" style="600px; height:600px; border:1px solid #000;"></div>
104   </body>
105 </html>