javascript - 如何将事件附加到 TileMill 中创建的 Natural Earth map 数据？

Question

我意识到我的知识中存在一些概念上的差距 - 我并不是 100% 清楚 Mapbox 中的所有内容如何组合在一起。希望有人能够纠正我并帮助我实现我想要做的事情。

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

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

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

底层国家 map 是由设计师使用 TileMill 创建和设计的。它使用自然地球国家 map 。当我查看 TileMill 中的项目并检查“特征”层时，形状文件似乎有一个包含一些相关元数据的各个国家/地区的列表。到目前为止一切顺利。

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

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

仅供引用:我尝试的另一种方法是添加 this运行时映射数据。我能够将事件附加到 GeoJSON 功能，但 map 的粒度远低于底层 map ，因此在较高的缩放级别下它无法正确排列。

Answer 1

The problem is that there is no concept of a region in the map, and I'm not sure how to add one programatically.

好吧，这里要理解的基本事情是在 TileMill 中添加的交互性与在 Mapbox.js 中通过 GeoJSON 添加的交互性之间的区别。

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