我如何为 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，您必须将图像属性分配给具有 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);

我如何为 OpenLayers 3 中的矢量源 (GPX) 分配徽标？

How can i assign a logo to the vector source (GPX) in OpenLayers 3?

javascript

png

graphical-logo

openlayers-3