Ama*_*rma 1 javascript mapbox mapbox-gl
我是 Mapbox 的新手。
我想知道如何在 Javascript 中读取 gpx 文件数据。
我从 mapbox 文档中获得了两个链接。
一个是这个 =>
我想要像这个例子一样的结果。如何在此示例中使用我的 gpx 文件？
https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/
& 其一是 =>
我可以在以下示例中将 mvt URL 替换为我的 gpx URL 吗？当我这样做时，它会抛出一些错误message: "Unimplemented type: 4"
我的目标是使用 Javascript 在 Mapbox 上加载 gpx 文件数据。
谢谢
使用 Mapbox 将 GPX 文件显示在地图上时，我会想到两个选项。这是一个很长的回复，但我想提供一个详细的回复，因为我去年也曾遇到过同样的问题。
这是最简单的，并且不提供任何编码。如果您只想转换单个 GPX 文件并在地图上显示，您可以使用 Mapbox Studio 来完成这一切。
只需将 GPX 作为图块集上传到 Mapbox Studio ( https://studio.mapbox.com/tilesets/ )。Mapbox 将为您进行必要的转换。上传图块集后，您可以轻松将其添加到 Mapbox 样式 ( https://studio.mapbox.com/ ) 或使用 Mapbox GL JS 添加到地图。
我写的这两篇指南可能会提供一些额外的帮助
如果添加此 GPX 文件不是一次性任务，并且您需要一遍又一遍地执行此操作，则选项 2 可能是您的最佳选择。此方法涉及您自己进行 GPX 到 GeoJSON 的转换，然后直接使用结果。转换数据后，您可以将结果写入文件，以编程方式或手动将它们上传到 Tilesets（请参阅选项 1），甚至将 GeoJSON 作为 API 响应返回。
我同意莫里茨与图书馆合作的建议togeojson。唯一的额外建议是使用togeojsontmcw 的分支（https://github.com/tmcw/togeojson）。Mapbox 版本不再主动维护。如果您对 GeoJSON 不太熟悉，请查看https://geojson.org/上的规范。我也喜欢这个资源管理器，它允许您向地图添加不同的要素类型（即多边形、线、点等）并查看生成的 GeoJSON 输出。
const converter = require("@tmcw/togeojson")
const fs = require("fs")
const DOMParser = require("xmldom").DOMParser
const mapboxgl = require("mapbox-gl")
// read in our GPX file and then parse it
const parsedGPX = new DOMParser().parseFromString(
fs.readFileSync("<PATH_TO_GPX>", "utf8")
)
// convert our gpx to geojson and store the results
const geojson = converter.gpx(parsedGPX)
// do something with the output
// i.e. save the file locally
// upload it to the Mapbox tilesets API, etc
现在您已经有了一些有效的 GeoJSON，您可以显示它了。这是一些伪代码，说明了如何做到这一点。
import mapboxgl from "mapbox-gl"
// this is pseudo code but you could now do something with the geojson like
mapboxgl.accessToken = <YOUR_ACCESS_TOKEN>
const map = new mapboxgl.Map({
container: "map,
style: "mapbox://styles/mapbox/streets-v11",
center: [-87.903982, 43.020403],
zoom: 12,
})
map.on("load", () => {
map.addSource("running-routes", {
type: "geojson",
// a reference to the converted data
// could come from a file, API, etc
data: RunningRoute,
});
map.addLayer({
id: "running-routes-line",
type: "line",
source: "running-routes",
paint: {
"line-color": "#15cc09",
"line-width": 4,
},
})
})
我写的这两个指南也可能提供一些额外的帮助。