如何将事件附加到在TileMill中创建的自然地球地图数据

How do I attach events to Natural Earth map data created in TileMill?

本文关键字:自然 创建 自然地 地球 数据 地图 地球地 TileMill 事件      更新时间:2023-09-26

我意识到我的知识中有一些概念上的空白——我不是100%清楚Mapbox中所有东西是如何组合在一起的。希望有人能纠正我的错误,帮助我实现我想要做的事情。

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

他们想要的是初始地图视图是一个缩小的世界地图。当鼠标悬停在这些单独的区域上时,属于该区域的国家将被突出显示,一个带有该区域名称的标签将被显示,点击将把视口缩放到中心/显示该区域。

问题是地图中没有区域的概念,我不确定如何通过编程添加一个。

底层国家地图是由设计师使用TileMill创建和设计的。它使用自然地球国家地图。当我在TileMill中查看项目并检查层"功能"时,似乎shapefile具有一些相关元数据的单个国家列表。到目前为止一切顺利。

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

问题是,我不知道如何在TileMill文件中获取当前正在鼠标移到的任何国家的国家元数据。是否有可能附加事件并访问在TileMill中添加的功能?

供参考:我尝试的另一种方法是在运行时添加此地图数据。我能够将事件附加到GeoJSON功能,但是地图的粒度比底层地图要低得多,所以在更高的缩放级别下它不能正确排列。

问题是地图中没有区域的概念,我不确定如何通过编程添加一个。

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

  • TileMill支持基于UTFGrid的栅格交互,并导出瓷砖。它可以处理高层次的细节和数以千计的功能,但由于地理数据本身并没有传输到您的浏览器,您不能做悬停交互,如突出显示数据-您只能打开工具提示和弹出
  • Mapbox.js/传单支持向量交互。它们可以处理更低层次的细节和大量的数据。但是地理数据被传输到浏览器,所以你可以做悬停交互以及添加工具提示。