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

文章目录

• • 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 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"，表示默认样式。

      
      
        
        
        ArcGIS JavaScript Tutorials: Change Cursor on Hover
        
        
          html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
          }
        
        
        
          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";
                }
              });
            });
          });