需求：实现鼠标移动至在graphics上时d出Popup窗口，鼠标离开时关闭Popup窗口。
思路: 监听view.on的"pointer-move”事件，并使用 view.hitTest(event) 获取到鼠标点击相交的要素，配合view.popup.open及view.popup.close方法实现d框的显示与关闭。
代码：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Display Popups on Mouse Hover | ArcGIS API for JavaScript 4.16
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function (Map, MapView, FeatureLayer) {
var map = new Map({
basemap: "gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-95.7129, 37.0902],
zoom: 5,
popup: {
autoOpenEnabled: false
}
});
var featureLayer = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",
popupTemplate: {
title: "{state_abbr}",
content: "{state_name}"
}
});
map.add(featureLayer);
view.on("pointer-move", function (event) {
view.hitTest(event).then(function (response) {
if (response.results.length) {
var graphic = response.results.filter(function (result) {
// check if the graphic belongs to the layer of interest
return result.graphic.layer === featureLayer;
})[0].graphic;
view.popup.open({
location: graphic.geometry.centroid,
features: [graphic]
});
} else {
view.popup.close();
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）