Mapbox鼠标悬停在圆圈上，使用要素状态更改颜色

鼠标在地图框地图上移动时，使标记改变颜色时出现问题。
mapbox-gl.js的0.47版本允许您使用

功能状态

更改动态样式的功能

这对于Mapbox示例来说是正确的：

然而，在我的示例中，当特性标记的

特性状态改变时，似乎永远不会触发样式

我使用
map.setFilter
函数成功地让鼠标在上面运行，但是当我添加1000个标记时，这会变得非常低效和缓慢

任何提示都将收到，非常感谢

请参阅我的示例代码



创建悬停效果
正文{margin:0；padding:0；}
/*#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}*/
#地图{宽度：100%；高度：500px；}
mapboxgl.accessToken='pk.eyj1ijoi29kym9kiiwiysi6ijhjbfe1auuifq.Gimi98Oh3Uex9WQZlb5Wkw'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v9',
中心：[-0.150752451.5140731]，
缩放：9
});
var hoveredStateId=null；
map.on（'load'，function（）{
map.addSource（“站点”{
“类型”：“geojson”，
“数据”：{
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.1407524,
51.5240731
]
},
“财产”：{
“id”：2，
“名称”：“牛津街”
}
}
]
}
});
//依赖于要素状态的填充不透明度表达式将渲染悬停效果
//当功能的悬停状态设置为true时。
map.addLayer({
'id'：'sites bold'，
“类型”：“圆”，
'来源'：'站点'，
“布局”：{}，
“油漆”：{
“圆半径”：10，
//“圆形颜色”：“ff442b”，
“圆形颜色”：[“大小写”，
['boolean'，['feature-state'，'hover']，false]，
“红色”，
“蓝色”
],
“圆形不透明度”：0.6，
“圆形笔划颜色”：“青色”，
“圆笔划宽度”：1
}
});
//当用户将鼠标移到状态填充层上时，我们将更新
//鼠标下功能的功能状态。
地图上的（“鼠标移动”、“站点加粗”，功能（e）{
//console.log（'in'，e.features）
如果（e.features.length>0）{
//if（this.hoveredStateId）{
//setFeatureState（{source:'sites'，id:this.hoveredStateId}，{hover:false}）；
// }
this.hoveredStateId=e.features[0].properties.id；
console.log（'in-f-id'，this.hoveredStateId）
setFeatureState（{source:'sites'，id:this.hoveredStateId}，{hover:true}）；
console.log（'in-f'，e.features[0]）
}
console.log（'in'，map.getFeatureState（{source:'sites'，id:this.hoveredStateId}））
});
//当鼠标离开状态填充层时，更新填充层的特征状态
//以前悬停的功能。
map.on（“鼠标移动”，“站点粗体”，函数（）{
console.log（'out-id'，this.hoveredStateId）
//if（this.hoveredStateId）{
setFeatureState（{source:'sites'，id:this.hoveredStateId}，{hover:false}）；
// }
console.log（'out'，map.getFeatureState（{source:'sites'，id:this.hoveredStateId}））
hoveredStateId=null；
});
});
要使用
setFeatureState
，您需要在数据源中的每个功能上设置一个唯一的ID。因此，实际上，您只需添加一个ID，如下所示：

map.addSource("sites", {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "id": 2,
          "geometry": {
            "type": "Point",
            "coordinates": [
              -0.1407524,
              51.5240731
            ]
          },
          "properties": {
            "id": 2,
            "name": "Oxford Street"
          }
        }
      ]
    }
});

请注意功能上的
id
属性。将其嵌套在
属性中是不够的；它必须位于功能的顶层。该方法的文档应在本周发布下一个版本时更新。
非常感谢Ryan。我还注意到，
id
必须同时位于featureroot和properties中。真的很感激！。。。实际上，我的最后一条评论是因为我调用了
this.hoveredStateId=e.features[0].properties.idmousemove
功能中选择code>。再次感谢。