2017-07-19 23 views
0

我有一個Angular2/4應用程序,我創建了一個使用OpenLayers3爲沙盒遊戲Wurm Online繪製島嶼的地圖。它工作得非常漂亮,取代了我從純JS創建的更古老的kludgey版本。OpenLayers3在風格功能中使用Angular class屬性

當前演示:http://www.wurmonlinemaps.com/maps/xanadubeta

代碼回購:https://github.com/WefNET/wurmonlinemaps-ng

我想提供給終端用戶量身定製的呈現在屏幕上的某些特徵的顏色的能力。最終,我想使用localStorage概念來保存用戶偏好。

我希望能起作用的是不起作用的:在矢量圖層的stylefuncton中將style屬性設置爲Angular類屬性值。

基本概念

在這個僞代碼示例中,「deedColor」角類屬性設置爲一個值,然後我嘗試風格函數中使用它:

export class AppComponent { 
    deedColor: string = "rgba(255,0,0,0.4)"; 

    var deedStyleFunction = function (feature, resolution) { 
     return [ 
     new ol.style.Style({ 
      image: new ol.style.RegularShape({ 
       points: 4, 
       radius: 11/resolution, 
       angle: Math.PI/4, 
       fill: new ol.style.Fill({ 
        color: this.deedColor 
      }), 
     }) 
     ] 
    } 

    // hundreds of other lines 
} 

可悲的是,風格功能無法弄清楚角類屬性:

ERROR TypeError: Cannot read property 'deedColor' of undefined 

一些試驗後,看來我不能從OL StyleFunction中訪問任何Angular對象。

任何想法?

回答

1

它可能是一個範圍的問題 - 試試你的功能結合到NG對象:

deedStyleFunction = function(feature, resolution) { 

}.bind(this);