如何设置我的 Mapbox 样式来处理交互式数据？答案

【问题标题】：How do I set up my Mapbox style to handle interactive data?如何设置我的 Mapbox 样式来处理交互式数据？
【发布时间】：2019-04-27 06:40:44
【问题描述】：

借助 here 找到的 geojson 文件，我在 Mapbox 上制作了一张美国州地图。我真正需要的只是绘制地图的多边形坐标。

我正在使用 Plotly Dash 使其具有交互性。基本上每个状态的颜色都会根据用户使用滑块提供的条件而改变。我对如何去做有点困惑。我可以在geojson 文件上设置初始值，但是如何在它们的值根据滑块而变化时更新它们？

这是geojson 文件的外观，以及所有状态的坐标：

{"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","properties":{"name":"Alabama","percentage":40},"geometry":{"type":"Polygon","coordinates":[[[-87.359296,35.00118],[-85.606675,34.984749],[more coordinates]]}},
{"type":"Feature","id":"02","properties":{"name":"Alaska","percentage":30},"geometry":{"type":"Polygon","coordinates":[....]...

如您所见，我为阿拉巴马州和阿拉斯加州设置了 40 和 30 的初始值。将其上传到 Mapbox 后，我将颜色范围设置为 0-100，并根据我的初始值完美地为所有状态着色。

同时在我的 Dash 应用程序中，我有一个数据集，我可以根据 RangeSlider 中设置的条件计算每个状态的百分比值。我不知道如何相应地更新颜色。我猜它与图层有关，但我不确定。任何帮助将不胜感激，在此先感谢！

【问题讨论】：

标签： mapbox plotly-dash

【解决方案1】：

您可以使用 GeoJsonSource#setData 来完成此操作：https://docs.mapbox.com/mapbox-gl-js/api/#geojsonsource#setdata

此示例不使用 setData（或根本不使用 GeoJson 源），但它确实展示了如何实现滑块以防万一：https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation/

免责声明：我在 Mapbox 工作。

【讨论】：