实现鼠标悬停图层上显示弹窗,原理是鼠标滑过图层时,设置弹窗显示和弹窗的位置,鼠标移出图层时,关闭弹窗。要素图层使用本地获取json文件生成要素图层的方法,城市json数据下载:city.json
效果:
内容不多,代码里有注释,直接上代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>鼠标悬停显示弹窗</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.26/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<script src="https://js.arcgis.com/3.26/"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map, getCity, closeDialog;
require([
"esri/Color",
"esri/map",
"esri/graphic",
"esri/lang",
"esri/geometry/Extent",
"esri/tasks/FeatureSet",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/domReady!"
],function(
Color,
Map,
Graphic,
esriLang,
Extent,
FeatureSet,
ArcGISTiledMapServiceLayer,
FeatureLayer,
InfoTemplate,
SimpleFillSymbol,
SimpleLineSymbol) {
//地图范围
var mapExtent = new Extent({
xmax: 113.799760210539,
xmin: 106.57095767482662,
ymax: 20.459116202966324,
ymin: 18.27952992162579,
spatialReference: {
wkid: 4326
}
})
map = new Map("map", {
extent: mapExtent,
//center: [-80.222550, 33.855972],
//zoom: 8,
sliderStyle: "small",
logo: false,
});
map.on('load', function () {
map.hideZoomSlider()
map.hidePanArrows()
map.disableDoubleClickZoom() //禁用双击缩放
getCity()
map.graphics.on("mouse-out", closeDialog) //默认鼠标移出图层时执行关闭弹窗的方法
})
//arcgis 在线切片底图图
var myTileLayer = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
map.addLayer(myTileLayer)
//通过json文件加载城市图层数据
getCity = function () {
let json = null
let url = "city.json"/*json文件url*/
let request = new XMLHttpRequest();
request.open("get", url);/*设置请求方法与路径*/
request.send(null);/*不发送数据到服务器*/
request.onload = function () {/*XHR对象获取到返回信息后执行*/
if (request.status == 0) {/*返回状态为0,即为数据获取成功*/
json = JSON.parse(request.responseText);
let featureSet = new FeatureSet(json)
let layerDefinition = { //要素描述,具体字段根据json内容
"geometryType": "esriGeometryPolygon",
"fields":[
{
"name" : "FID", //字段名称
"type" : "esriFieldTypeOID", //字段类型
"alias" : "FID"
},
{
"name" : "city_name",
"type" : "esriFieldTypeString",
"alias" : "city_name",
"length" : 254
},
{
"name" : "value",
"type" : "esriFieldTypeInteger",
"alias" : "value"
}
]
}
//要素合集
let featureCollection = {
layerDefinition: layerDefinition,
featureSet: featureSet
}
let featureLayer = new FeatureLayer(featureCollection) //使用要素合集创建要素图层
map.addLayer(featureLayer)
let highlightSymbol = new SimpleFillSymbol( //高亮符号
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 3),
new Color([125,125,125,0.35])
)
//鼠标移入图层时
featureLayer.on("mouse-over", function(evt) {
let t = "<b>城市:${city_name}</b>" //弹窗内容
let content = esriLang.substitute(evt.graphic.attributes,t) //弹窗设置
map.infoWindow.setContent(content);
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); //弹窗显示位置
let highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol); //悬停高亮
map.graphics.add(highlightGraphic)
})
}
}
}
//关闭弹窗
closeDialog = function (){
map.graphics.clear(); //隐藏高亮
map.infoWindow.hide() //隐藏弹窗
}
}
)
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>