赞
踩
在 ArcGIS Maps SDK for JavaScript 中,可以通过监听 pointer-move
事件来检测鼠标是否进入了面要素,并且通过设置 CSS 样式来改变鼠标指针的样式。
// 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";
}
});
});
以下是一个简单的示例代码,演示了如何实现这一功能:
map
) 和地图视图 (view
)。featureLayer
),可以根据自己的需求替换为自己的图层。pointer-move
事件,当鼠标移动时进行 hitTest 来判断是否悬停在要素上。view.container
) 的鼠标样式 (cursor
) 设置为 "pointer"
,表示指针样式;如果不是,则将鼠标样式设置为 "default"
,表示默认样式。<!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>
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。