openlayers3功能消失层样式

时间:2017-07-28 13:39:05

标签: javascript qt openlayers-3 qt5.3

我正在研究嵌入式“GPS”。我们的嵌入式浏览器是qt5.3 webpluging,相当陈旧,但我们还无法升级我们的qt。

问题在于,当我们更新当前位置的标记时,它有时会消失10秒或更长时间。以下是工作示例或问题的链接:https://jsfiddle.net/6c8negae/3/。在firefox中没有问题,但是我们的浏览器中的图像有时会消失。

我们计算的风格:

var STYLE_ON = new ol.style.Style({
    image: new ol.style.Icon({
        // not the actual arrow we use: ours is 30*30, 1.9kio
        src: "http://images.easyfreeclipart.com/1067/double-up-arrow-1067454.jpg"
    })
});
var STYLE_OFF = new ol.style.Style({
    image: new ol.style.Icon({
        // actually a grayed image of the STYLE_ON arrow
        src: "http://images.easyfreeclipart.com/1067/double-up-arrow-1067454.jpg"
    })
});

我们如何选择风格:

map.addLayer(new ol.layer.Vector({
    type: 'markers',
    source: markers,
    style: function (feature) {
        var style = null;
        if (feature.get('vtype') === 'cur') {
            style = feature.get('fade') ? STYLE_OFF : STYLE_ON;
            style.getImage().setRotation(feature.get('rotation'));
        }
        else {
            style = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 6,
                    opacity: 0.5,
                    fill: new ol.style.Fill({
                        color: COLORS[feature.get('vtype')]
                    })
                })
            });
        }
        return [style];
    }
}));

有没有解决方法? 每个特征都有一种样式看起来效率不高(就像我们原来的代码那样)。

1 个答案:

答案 0 :(得分:0)

尝试使用base64编码的图像:

  var iconStyle = new ol.style.Style({
      image: new ol.style.Icon({
      src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANRJREFUeNrsksERgyAQRfdTQS7pI3YQS0kJHlJFiggdpARboITcc7GELDObDCrIqnBKdoaB0c97sApaUS+63Xk68WiPdB00e6AEH3h68DjLI6eVQAnv5eRhqSTYCFdLsAOukmAnPCtBAfiiBIXgSQkKwqMSFIbPJKgAH0lMJTgJszdiSpXvY7fwvpNM8haG+3ThhU3A28wBnGRiEuvZ/gYUkQzykVyuD5KZSqwwyQTBj0QNT0i+8JEgkDRr4BNJE8JnAgk+t/42sb2GKtdf8AOCtwADADYvWhxy2YPJAAAAAElFTkSuQmCC'
    })
  });