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

How to put marker on svg map image using Mapbox?

我想知道如何在州地图(svg 文件)上放置标记。州地图分为县,我需要根据情况在县上放置图标。 mapbox 网站上有一些很好的例子可以在地图上添加标记,但我不确定如何在 mapbox 中加载 svg 地图并将标记添加到县。可能是我在问完全错误的问题。请指导。

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

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

如果您有兴趣使用没有任何 georeferencing 或底层坐标系的纯 SVG 地图,Mapbox 可能不是您用例的最佳工具。通常,如果您要使用 Mapbox 来实现显示县边界并附有每个县标记的州地图,工作流程将如下所示:

  1. 创建 GeoJSON file containing the data for the county boundary data. (You can consider this state boundary GeoJSON from Natural Earth 为例。)
  2. 将此 GeoJSON 数据作为 source 添加到您的地图。
  3. 添加相应的 layer 以直观地设置上述来源中显示的数据的样式。
  4. 对每个坐标使用 Turf.js's centroid method to obtain the center coordinate of each state, and add a marker 等工具。
我们文档中的

This example 在实践中演示了步骤 1-3 的结果。如果您有兴趣在您的实施中使用 Mapbox,这可能是比使用 SVG 更好的方法。