如何使用 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 来实现显示县边界并附有每个县标记的州地图,工作流程将如下所示:
- 创建 GeoJSON file containing the data for the county boundary data. (You can consider this state boundary GeoJSON from Natural Earth 为例。)
- 将此 GeoJSON 数据作为 source 添加到您的地图。
- 添加相应的 layer 以直观地设置上述来源中显示的数据的样式。
- 对每个坐标使用 Turf.js's
centroid
method to obtain the center coordinate of each state, and add a marker 等工具。
我们文档中的 This example 在实践中演示了步骤 1-3 的结果。如果您有兴趣在您的实施中使用 Mapbox,这可能是比使用 SVG 更好的方法。
我想知道如何在州地图(svg 文件)上放置标记。州地图分为县,我需要根据情况在县上放置图标。 mapbox 网站上有一些很好的例子可以在地图上添加标记,但我不确定如何在 mapbox 中加载 svg 地图并将标记添加到县。可能是我在问完全错误的问题。请指导。
我看过这个例子 - https://www.inhofe.senate.gov/
我正在尝试为学习做同样的事情,但不确定如何开始使用相同的示例。 这就是图像 - https://www.inhofe.senate.gov/assets/images/theme/okstatemap.svg
如果您有兴趣使用没有任何 georeferencing 或底层坐标系的纯 SVG 地图,Mapbox 可能不是您用例的最佳工具。通常,如果您要使用 Mapbox 来实现显示县边界并附有每个县标记的州地图,工作流程将如下所示:
- 创建 GeoJSON file containing the data for the county boundary data. (You can consider this state boundary GeoJSON from Natural Earth 为例。)
- 将此 GeoJSON 数据作为 source 添加到您的地图。
- 添加相应的 layer 以直观地设置上述来源中显示的数据的样式。
- 对每个坐标使用 Turf.js's
centroid
method to obtain the center coordinate of each state, and add a marker 等工具。
This example 在实践中演示了步骤 1-3 的结果。如果您有兴趣在您的实施中使用 Mapbox,这可能是比使用 SVG 更好的方法。