openlayers3 feature disapear layer style

我正在研究嵌入式「GPS」。我們的嵌入式瀏覽器是qt5.3 webpluging這是相當古老的，但我們不能升級我們的qt。openlayers3 feature disapear layer style

問題是，當我們更新當前位置的標記時，它有時會消失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]; 
    } 
}));

有什麼解決方法嗎？每個功能都有一種風格看起來效率不高（因爲我們原來的代碼就是這樣）。

來源

2017-07-28 Zykino

嘗試使用base64編碼的圖像：

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

來源

2017-07-28 16:46:07

這解決部分問題：仍有時間在箭頭消失。有更快的方法嗎？也許我的回調應該更優化？ – Zykino

openlayers3 feature disapear layer style

回答

相關問題