在 Mapbox GL JS 中，悬停时更改图标不透明度（符号层）

Question

我在文档中看到 icon-opacity 支持功能状态， https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-opacity

因此，当用户将鼠标悬停在图标上时，我使用此代码来更改不透明度：

map.addLayer({
    type: 'symbol',
    layout: {
        'icon-image': 'point',
        ...
     },
     paint: {
         'icon-opacity':  
             ['case', ['boolean', ['feature-state','hover'], false], 1, 0.3]
     }
});

问题是它采用原始不透明度（0.3），但悬停时不会改变。

任何想法？

谢谢。

Answer 1

您发布的代码是正确的，但这只是解决方案的一半。

\n

您已经实现了任何功能的图层绘制行为的定义（如您所说，默认为 0.3），第二部分是在鼠标悬停时将功能状态悬停更改为 true。

\n

符号图层中“悬停”上的要素状态不会自动更改，您需要在方法中将其更改为 true map.on(\'mousemove\', \'youLayerId\'...，并在map.on(\'mouseout\', \'youLayerId\'....

\n

查看我为您创建的关于如何更改图标的不透明度的小提琴。\n

\n

相关代码如下

\n

        mapboxgl.accessToken = \'PUT HERE YOUR TOKEN\';\n        var map = new mapboxgl.Map({\n          container: \'map\',\n          style: \'mapbox://styles/mapbox/streets-v11\'\n        });\n        let fHover = null;\n        map.on(\'load\', function() {\n          map.loadImage(\n            \'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png\',\n            function(error, image) {\n              if (error) throw error;\n              map.addImage(\'cat\', image);\n              map.addSource(\'point\', {\n                \'type\': \'geojson\',\n                \'generateId\': true,\n                \'data\': {\n                  \'type\': \'FeatureCollection\',\n                  \'features\': [{\n                    \'type\': \'Feature\',\n                    \'geometry\': {\n                      \'type\': \'Point\',\n                      \'coordinates\': [0, 0]\n                    }\n                  }]\n                }\n              });\n              map.addLayer({\n                \'id\': \'points\',\n                \'type\': \'symbol\',\n                \'source\': \'point\',\n                \'layout\': {\n                  \'icon-image\': \'cat\',\n                  \'icon-size\': 0.25,\n                },\n                \'paint\': {\n                  \'icon-opacity\': [\n                    \'case\',\n                    [\'boolean\', [\'feature-state\', \'hover\'], false],\n                    1,\n                    0.3\n                  ]\n                }\n              });\n            }\n          );\n\n          map.on(\'mousemove\', \'points\', function(e) {\n            if (e.features[0]) {\n              mouseover(e.features[0]);\n            } else {\n              mouseout();\n            }\n\n          });\n\n          map.on(\'mouseout\', \'points\', function(e) {\n            mouseout();\n          });\n\n          function mouseover(feature) {\n            fHover = feature;\n            map.getCanvasContainer().style.cursor = \'pointer\';\n\n            map.setFeatureState({\n              source: \'point\',\n              id: fHover.id\n            }, {\n              hover: true\n            });\n          }\n\n          function mouseout() {\n            if (!fHover) return;\n            map.getCanvasContainer().style.cursor = \'default\';\n            map.setFeatureState({\n              source: \'point\',\n              id: fHover.id\n            }, {\n              hover: false\n            });\n            fHover = null;\n\n          }\n        });\n\n

\n

重要的是，要更改功能状态，每个功能都必须在源中具有一个 id，因此我强烈建议\'generateId\': true在addSource方法中始终设置。

\n

PS.-如果这个答案解决了您的问题，请将其标记为已接受的答案，这样它也将帮助其他用户知道这是正确的解决方案。

\n