如何在OpenLayers 3中为矢量源（GPX）分配徽标？

Question

我正在学习OpenLayers 3，我正在尝试将png图像分配给layer.Vector.source的徽标属性，如下所示：

var vectorSpeedLimit40 = new ol.layer.Vector({
    title: 'speedlimit40',
    source: new ol.source.Vector({
        url: 'gpx/Fotoboks_40.gpx',
        format: new ol.format.GPX({
            extraStyles: false
        }),
        logo: '/imgs/lc.png'

    })
});

var rasterLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [rasterLayer, vectorSpeedLimit40],
  target: document.getElementById('map-canvas'),
  view: new ol.View({
    center: [0, 0],
    zoom: 3
  })
});

我以为这会显示png的实例，而是显示一个小的蓝色圆圈，如下所示：

我已经检查过，仔细检查过，三次检查过，并且相对于客户端，路径是正确的。

我究竟做错了什么？ 谢谢！

Answer 1

要将特定的图像分配给具有GPX源的vectorLayer，您必须为image属性分配一个具有src属性的新ol.style.Icon，如下所示：

var vectorSource = new ol.source.Vector({
    // Specify that the source is of type GPX
    format: new ol.format.GPX(),
    // Here you specify the path to the image file
    url: 'gpx/source.gpx'
})

var vectorStyle = new ol.style.Style({
    // Set the image attribute to a new ol.style.Icon
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        scale: 0.2,
        // Here you specify the path to the image file
        src: 'imgs/image.png'
    }))
})

var vectorLayer = new ol.layer.Vector({
    // Here you specify the source and style attributes of the ol.layer.Vector to the ones that are made above
    source: vectorSource,
    style: vectorStyle
});

// Then add it to the map
map.addLayer(vectorLayer);