当前位置: 首页> 文旅> 艺术 > ArcGIS Maps SDK for JavaScript:鼠标进入面要素时改变鼠标指针样式,离开时恢复

ArcGIS Maps SDK for JavaScript:鼠标进入面要素时改变鼠标指针样式,离开时恢复

时间:2025/7/10 20:35:27来源:https://blog.csdn.net/weixin_46098577/article/details/140494023 浏览次数:0次

文章目录

    • 1、关键代码
    • 2、完整示例

在 ArcGIS Maps SDK for JavaScript 中,可以通过监听 pointer-move 事件来检测鼠标是否进入了面要素,并且通过设置 CSS 样式来改变鼠标指针的样式。

1、关键代码

// Listen for pointer-move event on the view
view.on("pointer-move", function(event) {// Check if the pointer is over a featureview.hitTest(event).then(function(response) {if (response.results.length && response.results[0].graphic.layer === featureLayer) {// Change cursor style to pointer if over a featureview.container.style.cursor = "pointer";} else {// Reset cursor style to default if not over a featureview.container.style.cursor = "default";}});});

2、完整示例

以下是一个简单的示例代码,演示了如何实现这一功能:

  • 创建了一个基本的地图 (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 mapvar map = new Map({basemap: "streets-navigation-vector"});// Create a MapViewvar view = new MapView({container: "viewDiv",map: map,center: [-118, 34],zoom: 8});// Create a feature layervar featureLayer = new FeatureLayer({url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_Counties/FeatureServer/0"});// Add the feature layer to the mapmap.add(featureLayer);// Listen for pointer-move event on the viewview.on("pointer-move", function(event) {// Check if the pointer is over a featureview.hitTest(event).then(function(response) {if (response.results.length && response.results[0].graphic.layer === featureLayer) {// Change cursor style to pointer if over a featureview.container.style.cursor = "pointer";} else {// Reset cursor style to default if not over a featureview.container.style.cursor = "default";}});});});</script>
</head>
<body><div id="viewDiv"></div>
</body>
</html>
关键字:ArcGIS Maps SDK for JavaScript:鼠标进入面要素时改变鼠标指针样式,离开时恢复

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: