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

文章目录

在 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>
相关推荐
懒大王爱吃狼29 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
薛一半10 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
过期的H2O210 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage10 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
你好龙卷风!!!11 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
shenweihong12 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序