ArcGIS For JavaScript API Feature layer hover(功能圖層的懸浮)————（二十六）
阿新 • • 發佈：2019-02-07
描述：
在”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）滑鼠事件
程式碼如下：
<!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>
效果如下：
