OpenLayers3 在样式函数中使用 Angular class 属性

Question

我创建了一个 Angular2/4 应用程序，它使用 OpenLayers3 为沙盒游戏 Wurm Online 渲染岛屿地图。它工作得非常漂亮，取代了我从纯 JS 创建的更旧的更笨拙的版本。

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

代码库：https://github.com/WefNET/wurmonlinemaps-ng

我想为最终用户提供自定义屏幕上呈现的某些功能的颜色的能力。最后，我想使用 localStorage 概念来保存用户首选项。

我希望起作用的方法不起作用：将矢量图层的 stylefuncton 中的样式属性设置为 Angular class 属性值。

基本概念

在这个伪代码示例中，"deedColor" Angular class 属性被设置为一个值，然后我尝试在样式函数中使用它：

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
}

可悲的是，样式函数无法计算出 Angular class 属性:

ERROR TypeError: Cannot read property 'deedColor' of undefined

经过一些实验，我似乎无法从 OL StyleFunction 中访问任何 Angular 对象。

有什么想法吗？

Answer 1

这可能是范围问题 - 尝试将您的函数绑定到 ng 对象：

deedStyleFunction = function(feature, resolution) {

}.bind(this);

OpenLayers3 在样式函数中使用 Angular class 属性

OpenLayers3 Using an Angular class property in Style Function

openlayers-3

angular