ArcGIS For JavaScript API Feature layer hover(功能图层的悬浮)————（二十六）

最新推荐文章于 2025-06-16 10:52:26 发布

原创最新推荐文章于 2025-06-16 10:52:26 发布 · 9.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#ArcGIS ForJavaScript #ArcGIS二次开发

ArcGIS Api For Javascript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何使用ArcGIS JavaScript API实现地图上县区域的鼠标悬浮事件，展示人口统计数据等信息。通过定义FeatureLayer并设置鼠标事件，能够高亮显示选中的县并弹出包含详细信息的提示框。

查看原文：ArcGIS For JavaScript API Feature layer hover —— 功能图层的悬浮

描述：

在”South Carolina南卡罗来纳州“的县上进行鼠标悬浮，跳出提示框。鼠标事件进行控制其显示方式。

重要代码：

（1）控制显示的州

var southCarolinaCounties=new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3",{
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
outFields:["NAME","POP2000","POP2007","POP00_SQMI","POP07_SQMI"]
});
southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");

（2）高亮图表定义

（3）鼠标事件

参考联接：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/fl_hover

在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/fl_hover/index.html

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Feature Layer - display results as an InfoWindow onHover</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dijit.TooltipDialog");
      dojo.require("dojo.number");
      
      var map, dialog;
		
	 // 初始化事件
      function init() {
        map = new esri.Map("mapDiv", {
          basemap: "streets",  // 指定的地图底图.有效选项："streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm".
          center: [-80.94, 33.646],
          zoom: 8
        });
        
		//  定义一个功能层
        var southCarolinaCounties = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,	// 此模式下,该feature layer检索所有有关的层的资源,并作为推那个显示在客户端,一旦被添加到地图上, 会触发onUpdateEnd事件
          outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]	// 显示的字段
        });
        southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");	// 只有匹配的才会被显示，这里是 ”South Carolina南卡罗来纳州“

		// 定义一个填充符号
        var symbol = new esri.symbol.SimpleFillSymbol(
			esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
			new esri.symbol.SimpleLineSymbol(	//线型符号
				esri.symbol.SimpleLineSymbol.STYLE_SOLID, 	//样式，STYLE_DASH，STYLE_DASHDOT，STYLE_DASHDOTDOT，STYLE_DOT，STYLE_NULL，STYLE_NULL
				new dojo.Color([255,255,255,0.35]),	// 颜色
				1	// 像素
			),
			new dojo.Color([125,125,125,0.35])
		);
        southCarolinaCounties.setRenderer(new esri.renderer.SimpleRenderer(symbol));	// 设置功能层的渲染
        map.addLayer(southCarolinaCounties);	// 添加到地图

        map.infoWindow.resize(245,125);	// 设置信息框的大小
        
        dialog = new dijit.TooltipDialog({
          id: "tooltipDialog",
          style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
        });
        dialog.startup();	// 开启
        
		// 高亮线
        var highlightSymbol = new esri.symbol.SimpleFillSymbol(
			esri.symbol.SimpleFillSymbol.STYLE_SOLID,
			new esri.symbol.SimpleLineSymbol(
				esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
				new dojo.Color([255,0,0]),
				3
			),
			new dojo.Color([125,125,125,0.35])
		);

        //当鼠标离开的高亮图形，关闭对话框
        dojo.connect(map, "onLoad", function(){
          map.graphics.enableMouseEvents();	// 开启鼠标事件
          dojo.connect(map.graphics,"onMouseOut",closeDialog);        	
        });
                
        //listen for when the onMouseOver event fires on the countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        dojo.connect(southCarolinaCounties, "onMouseOver", function(evt) {
          var t = "<b>${NAME}</b><hr><b>2000 人口: </b>${POP2000:NumberFormat}<br/>"
                             + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br/>"
                             + "<b>2007 人口: </b>${POP2007:NumberFormat}<br/>"
                             + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}";
	
          var content = esri.substitute(evt.graphic.attributes,t);	// dojo.string.substitute(),可以处理通配符形式
          var highlightGraphic = new esri.Graphic(
		  		evt.graphic.geometry,
				highlightSymbol
		  );
          map.graphics.add(highlightGraphic);	// 将图标加入图形中
          
          dialog.setContent(content);	// 设置弹窗内容

          dojo.style(dialog.domNode, "opacity", 0.85);	// 透明度
          dijit.popup.open({popup: dialog, x:evt.pageX,y:evt.pageY});	// 弹出位置
        });
      }
    
      function closeDialog() {
        map.graphics.clear();	// 清除图形
        dijit.popup.close(dialog);	// 关闭弹出框
      }

      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
  将鼠标悬停在南卡罗来纳州的一个县，以获得更多的信息。
  <div id="mapDiv"></div>
  </body>
</html>

效果如下：