如何在Openlayers中显示GPX轨迹中的航点

前端开发 2026-07-10

有谁知道如何在OpenLayers中显示GPX文件中的航点？

我尝试了下面的方法，但它只显示轨迹，并没有显示航点：

    var lgpx = new OpenLayers.Layer.Vector("Track", {
    protocol: new OpenLayers.Protocol.HTTP({
            url: URL,
            format: new OpenLayers.Format.GPX({
        extractWaypoints: true,
        extractName: true,
        extractRoutes: true,
        extractAttributes: true
        })
        }),
    strategies: [new OpenLayers.Strategy.Fixed()],
    style: {strokeColor: "#33aaff", strokeWidth: 1.5, strokeOpacity: 1},
    projection: new OpenLayers.Projection("EPSG:4326")
    });
    map.addLayer(lgpx);

解决方案

你可能需要把点绘得大一些：

style { ..., pointRadius: 6}

就这些。

(最后你可能需要检查GPX中是否确实包含航点)

最小可运行代码：

index.html

<!DOCTYPE html>
<html>
<head>
    <title>OpenLayers GPX Waypoints</title>
    <script src="https://openlayers.org/api/OpenLayers.js"></script>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>

<script>
    var map = new OpenLayers.Map("map");

    var osm = new OpenLayers.Layer.OSM();
    map.addLayer(osm);

    var lgpx = new OpenLayers.Layer.Vector("Track", {
        protocol: new OpenLayers.Protocol.HTTP({
            url: "example.gpx",
            format: new OpenLayers.Format.GPX({
                extractWaypoints: true,
                extractName: true,
                extractRoutes: true,
                extractAttributes: true
            })
        }),
        strategies: [new OpenLayers.Strategy.Fixed()],
        projection: new OpenLayers.Projection("EPSG:4326"),

        // minimal change: add pointRadius
        style: {
            strokeColor: "#33aaff",
            strokeWidth: 2,
            strokeOpacity: 1,

            pointRadius: 6,  // point size

            fillColor: "#ff0000",  // point color
            fillOpacity: 0.8  // point opacity
        }
    });

    map.addLayer(lgpx);

    lgpx.events.register("loadend", lgpx, function() {
        map.setCenter(
            new OpenLayers.LonLat(9, 48)   // roughly central Europe
                .transform("EPSG:4326", map.getProjectionObject()),
            5
        );
    });

    map.events.register("moveend", map, function () {
        var center = map.getCenter()
            .clone()
            .transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));

        console.log(
            "center:", center.lon.toFixed(4), center.lat.toFixed(4),
            "zoom:", map.getZoom()
        );
    });
</script>
</body>
</html>

example.gpx

<gpx version="1.1" creator="example"
     xmlns="http://www.topografix.com/GPX/1/1">

  <!-- Waypoints -->
  <wpt lat="51.5074" lon="-0.1278">
    <name>London</name>
  </wpt>

  <wpt lat="48.8566" lon="2.3522">
    <name>Paris</name>
  </wpt>

  <wpt lat="52.5200" lon="13.4050">
    <name>Berlin</name>
  </wpt>

  <wpt lat="41.9028" lon="12.4964">
    <name>Rome</name>
  </wpt>

  <!-- Track -->
  <trk>
    <name>London → Paris → Berlin → Rome</name>
    <trkseg>
      <trkpt lat="51.5074" lon="-0.1278"></trkpt>
      <trkpt lat="48.8566" lon="2.3522"></trkpt>
      <trkpt lat="52.5200" lon="13.4050"></trkpt>
      <trkpt lat="41.9028" lon="12.4964"></trkpt>
    </trkseg>
  </trk>

</gpx>

结果：