Question

我需要创建一个带有气象图标的图层 - 大约100个。所以。我这样定义它的来源：

    mappingAPI.meteoIconLayerSource = new ol.source.Vector({});

我添加图标作为这样的功能：

    for(stan in meteo.meteoData)
    {
        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([parseFloat(meteo.meteoData[stan].lon), parseFloat(meteo.meteoData[stan].lat)], 'EPSG:4326',   'EPSG:3857')),
            obj_id: meteo.meteoData[stan].obj_id,
        });

        mappingAPI.meteoIconLayerSource.addFeature(iconFeature);  
    }

获得源代码后，我创建了这样的图层：

    mappingAPI.meteoIconLayer = new ol.layer.Vector({
        source: mappingAPI.meteoIconLayerSource,
        style: mappingAPI.getMeteoIconStyle            
    });

样式定义如下所示：

return [new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 0.5],
    anchorXUnits: 'fraction',
    anchorYUnits: 'fraction',
    opacity: 0.7,
    src: "data/meteo/icon" + feature.get('obj_id') + ".png"
})];

当src的定义如上所述（使用功能指向唯一编号的属性）时，我的地图上的图标开始闪烁，因为样式过程不停地为该层上的所有功能调用。在这种情况下，我将参考一张图片替换定义：

src: "data/meteo/icon3898.png",

甚至是这样：

src: "data/meteo/icon" + feature.get('dummy') + ".png",

其中所有特征的虚拟相同，一切都很好 - 每个特征都会调用一次样式过程，直到地图需要重绘为止。

请问，有人可以帮忙解决这个问题吗？或者还有其他方法，如何在地图上放置图标而不在样式中添加src定义？

马立克

Answer 1

因此，看起来Openlayers在加载如此多的图像方面存在问题，并且当它没有及时完成时（我只是在猜测）它会定期启动重新加载。如果我将图像预先加载到我的网页上的图像对象中，并且我使用img样式属性（而不是src），它将按预期工作。还必须设置imgSize属性，否则根本不显示图标。最好的方法，如何做到：

img: img,    
imgSize: [img.clientWidth,img.clientHeight]

Openlayers 3层样式问题

1 个答案: