如何在OpenLayers中展示GPX轨迹所包含的航点？

嘿，我懂你遇到的困扰！你代码里已经开启了extractWaypoints: true，但看不到航点的核心原因是：你的图层样式只针对线要素（轨迹/路线）做了设置，而航点是点要素，没有对应的样式就会默认隐藏。

下面给你两种可行的解决方案，按需选择：

方案一：拆分图层，分别加载轨迹和航点 #

把轨迹和航点放在两个独立的矢量图层里，分别设置对应样式，这样不仅清晰，还能单独控制它们的显示/隐藏：

// 加载轨迹的图层
var trackLayer = new OpenLayers.Layer.Vector("Track", {
    protocol: new OpenLayers.Protocol.HTTP({
        url: URL,
        format: new OpenLayers.Format.GPX({
            extractWaypoints: false, // 只处理轨迹，不提取航点
            extractRoutes: true,
            extractTracks: true,
            extractAttributes: true
        })
    }),
    strategies: [new OpenLayers.Strategy.Fixed()],
    style: {strokeColor: "#33aaff", strokeWidth: 1.5, strokeOpacity: 1},
    projection: new OpenLayers.Projection("EPSG:4326")
});

// 加载航点的图层
var waypointLayer = new OpenLayers.Layer.Vector("Waypoints", {
    protocol: new OpenLayers.Protocol.HTTP({
        url: URL,
        format: new OpenLayers.Format.GPX({
            extractWaypoints: true, // 只提取航点
            extractRoutes: false,
            extractTracks: false,
            extractAttributes: true
        })
    }),
    strategies: [new OpenLayers.Strategy.Fixed()],
    // 给航点设置点样式，这里用红色实心圆点举例
    style: {
        pointRadius: 6,
        fillColor: "#ff4444",
        fillOpacity: 1,
        strokeColor: "#000000",
        strokeWidth: 1
    },
    projection: new OpenLayers.Projection("EPSG:4326")
});

// 将两个图层添加到地图
map.addLayer(trackLayer);
map.addLayer(waypointLayer);

方案二：在同一个图层中区分要素样式 #

如果不想拆分图层，可以用OpenLayers.StyleMap来根据要素类型（点/线）自动应用不同样式：

// 定义轨迹（线要素）的样式
var trackStyle = new OpenLayers.Style({
    strokeColor: "#33aaff",
    strokeWidth: 1.5,
    strokeOpacity: 1
});

// 定义航点（点要素）的样式
var waypointStyle = new OpenLayers.Style({
    pointRadius: 6,
    fillColor: "#ff4444",
    fillOpacity: 1,
    strokeColor: "#000000",
    strokeWidth: 1
});

// 创建StyleMap，根据要素类型匹配对应样式
var gpxStyleMap = new OpenLayers.StyleMap({
    "default": trackStyle,
    "point": waypointStyle
});

var lgpx = new OpenLayers.Layer.Vector("GPX Data", {
    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()],
    styleMap: gpxStyleMap, // 绑定自定义的样式映射
    projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(lgpx);

这样设置后，航点就会按照你定义的样式显示出来啦！

内容的提问来源于stack exchange，提问作者Alain Knaff