如何使用地图框在 svg 地图图像上放置标记?

Question

我正在尝试弄清楚如何在状态图(svg 文件(上放置标记。州地图分为县，我需要根据条件在县上放置图标。mapbox 网站上有一些很好的例子可以在地图上添加标记，但我不确定如何在 mapbox 中加载 svg map 并将标记添加到县。可能是我问了完全错误的问题。请指导。

我看过这个例子——https://www.inhofe.senate.gov/

我正在尝试做同样的事情来学习，但不确定如何开始使用同一个例子。 这就是图像 - https://www.inhofe.senate.gov/assets/images/theme/okstatemap.svg

Answer 1

如果您有兴趣使用没有任何地理配准或基础坐标系的纯 SVG 地图，则 Mapbox 可能不是适合您的用例的最佳工具。通常，如果要使用 Mapbox 实现显示县边界以及每个县的标记的州地图，则工作流如下所示：

1. 创建包含县边界数据数据的 GeoJSON 文件。(您可以考虑以自然地球的这个州边界 GeoJSON 为例。
2. 将此 GeoJSON 数据作为源添加到地图中。
3. 添加相应的图层以直观地设置上述源中显示的数据的样式。
4. 使用 Turf.js 的centroid方法等工具获取每个州的中心坐标，并为每个坐标添加一个标记。

我们文档中的此示例在实践中演示了步骤 1-3 的结果。如果您有兴趣在实现中使用 Mapbox，这可能是比使用 SVG 更好的方法。