Mapbox/Javascript:实现悬停和点击状态

Question

我正在尝试允许我的Mapbox区域同时具有单击和悬停状态。一旦点击了某个东西，我希望它能持续下去，保持这种状态，即使我把鼠标悬停在另一个磁贴上。

然而，在实现它的过程中，当我单击它时，它会变为单击状态，但在该区域或另一个磁贴上移动鼠标会将它从单击变为悬停。

这是一个演示：https://codepen.io/hiven/pen/zYPbRNK

代码的关键部分在这里：

if (hoveredStateId !== null) {
map.setFeatureState(
{ source: "states", id: hoveredStateId },
{ mystate: null }
);
}
if (hoveredStateId !== 2) {
hoveredStateId = e.features[0].id;
map.setFeatureState(
{ source: "states", id: hoveredStateId },
{ mystate: 1 }
);
}

状态1是悬停状态，状态2是单击状态。有了这段代码，我认为只有当tile还没有处于点击状态(2(时，它才会将状态设置为悬停。然而，这似乎不起作用，因为在单击的磁贴上移动鼠标会将其更改为悬停状态。

我哪里错了？

Answer 1

上面没有包含足够的代码。代码的关键部分实际上是：

map.on('mousemove', 'state-fills', (e) => {
if (e.features.length > 0) {
if (hoveredStateId !== null) {
map.setFeatureState({
source: "states",
id: hoveredStateId
}, {
mystate: null
});
}

上面写着：当鼠标移动到任何位置时，清除当前状态。

此外，这显然是错误的：

if (hoveredStateId !== 2) {

您似乎将状态(null、1或2(与功能的id混淆了(任何数字0或更大(。