文章目录
在 ArcGIS Maps SDK for JavaScript 中,可以通过监听 pointer-move
事件来检测鼠标是否进入了面要素,并且通过设置 CSS 样式来改变鼠标指针的样式。
1、关键代码
js
// Listen for pointer-move event on the view
view.on("pointer-move", function(event) {
// Check if the pointer is over a feature
view.hitTest(event).then(function(response) {
if (response.results.length && response.results[0].graphic.layer === featureLayer) {
// Change cursor style to pointer if over a feature
view.container.style.cursor = "pointer";
} else {
// Reset cursor style to default if not over a feature
view.container.style.cursor = "default";
}
});
});
2、完整示例
以下是一个简单的示例代码,演示了如何实现这一功能:
- 创建了一个基本的地图 (
map
) 和地图视图 (view
)。 - 加载了一个要素图层 (
featureLayer
),可以根据自己的需求替换为自己的图层。 - 监听了
pointer-move
事件,当鼠标移动时进行 hitTest 来判断是否悬停在要素上。 - 如果鼠标悬停在要素上,则将视图容器 (
view.container
) 的鼠标样式 (cursor
) 设置为"pointer"
,表示指针样式;如果不是,则将鼠标样式设置为"default"
,表示默认样式。
javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Change Cursor on Hover</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.25/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/domReady!"
], function(Map, MapView, FeatureLayer) {
// Create a map
var map = new Map({
basemap: "streets-navigation-vector"
});
// Create a MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118, 34],
zoom: 8
});
// Create a feature layer
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_Counties/FeatureServer/0"
});
// Add the feature layer to the map
map.add(featureLayer);
// Listen for pointer-move event on the view
view.on("pointer-move", function(event) {
// Check if the pointer is over a feature
view.hitTest(event).then(function(response) {
if (response.results.length && response.results[0].graphic.layer === featureLayer) {
// Change cursor style to pointer if over a feature
view.container.style.cursor = "pointer";
} else {
// Reset cursor style to default if not over a feature
view.container.style.cursor = "default";
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>