如何将事件附加到在 TileMill 中创建的 Natural Earth 地图数据？

Question

我意识到我的知识存在一些概念上的差距——我不是 100% 清楚 Mapbox 中的所有内容如何组合在一起。希望有人能让我直截了当，帮助我实现我想要做的事情。

我们的客户是一家跨国公司，分布在全球多个地区：北美、南美、欧洲和非洲、亚太地区等。

他们想要的是初始地图视图是一个缩小的世界地图。将鼠标悬停在每个单独的区域上时，属于该区域的国家/地区将突出显示，将显示带有区域名称的标签，单击将缩放视口以居中/显示该区域。

问题是地图中没有区域的概念，我不确定如何以编程方式添加。

底层国家地图由设计师使用 TileMill 创建和设置样式。它使用自然地球国家地图。当我在 TileMill 中查看项目并检查图层“特征”时，shapefile 似乎有一个带有一些相关元数据的各个国家/地区的列表。到目前为止一切顺利。

理想情况下，在客户端，我会列出属于每个地区的国家/地区。当用户将鼠标悬停在某个国家/地区时，我会找出它属于哪个地区，遍历国家/地区列表并应用效果（如不透明度）来突出显示该地区。

问题是，我不知道如何在 TileMill 文件中为当前鼠标悬停的任何国家/地区获取国家/地区元数据。是否可以附加事件并访问 TileMill 中添加的功能？

仅供参考：我尝试的另一种方法是在运行时添加 this 地图数据。我能够将事件附加到 GeoJSON 功能，但地图的粒度远低于底层地图，因此在更高的缩放级别下无法正确排列。

Answer 1

问题是地图中没有区域的概念，我不确定如何以编程方式添加。

好的，这里要理解的基本内容是您在 TileMill 中添加的交互性与在 Mapbox.js 中通过 GeoJSON 进行的交互性之间的区别。

• TileMill 支持基于UTFGrid 的raster 交互性，并导出tiles。它可以处理高级别的细节和数千个功能，但由于地理数据本身不会传输到您的浏览器，因此您无法进行悬停交互，例如突出显示数据 - 您只能打开工具提示和弹出窗口
• Mapbox.js/Leaflet 支持 vector 交互性。他们可以处理更低级别的细节和数据量。但是地理数据会传输到您的浏览器，因此您可以进行悬停交互以及添加工具提示。