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

有人知道如何在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);

问题核心是你设置的全局样式仅适配轨迹（线要素），航点属于点要素，默认无可见样式导致不显示。以下两种方法可解决：

方法1：用StyleMap区分要素样式 #

为点（航点）和线（轨迹）分别定义样式，通过styleMap绑定到图层：

// 航点样式
var pointStyle = new OpenLayers.Style({
    pointRadius: 6,
    fillColor: "#ff4444",
    fillOpacity: 1,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeOpacity: 1
});

// 轨迹样式
var lineStyle = new OpenLayers.Style({
    strokeColor: "#33aaff",
    strokeWidth: 1.5,
    strokeOpacity: 1
});

// 创建样式映射
var styleMap = new OpenLayers.StyleMap({
    "default": lineStyle,
    "point": pointStyle
});

// 初始化图层时替换原style为styleMap
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()],
    styleMap: styleMap,
    projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(lgpx);

方法2：通过函数动态返回样式 #

在style属性中传入函数，根据要素几何类型返回对应样式：

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: function(feature) {
        if (feature.geometry instanceof OpenLayers.Geometry.Point) {
            return {
                pointRadius: 6,
                fillColor: "#ff4444",
                fillOpacity: 1,
                strokeColor: "#000",
                strokeWidth: 1
            };
        } else {
            return {
                strokeColor: "#33aaff",
                strokeWidth: 1.5,
                strokeOpacity: 1
            };
        }
    },
    projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(lgpx);

另外需确认GPX文件中存在<wpt>标签的航点数据，若文件本身无航点则无法显示。

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