Javascript: "ReferenceError: icon is not defined"

Question

我正在使用 openlayers 向地图添加点并使用 stylefunction 为它们设置样式。这段代码在一周前工作，今天我加载它时没有任何更改并收到错误 "ReferenceError: icon is not defined".

该函数要求矢量的属性，然后根据该属性用不同的图像设置样式。

var styleFunction = function(feature, resolution) {
    if(feature.get('class') === 'Artificial surface') {
        icon = 'icons/Artificial_surfaces.svg'
    } else if(feature.get('class') === 'Bare land') {
        icon = 'icons/Barrenlands.svg'
    } else if(feature.get('class') === 'Cultivated land') {
        icon = 'icons/Cultivated_land.svg'
    } else if(feature.get('class') === 'Forest') {
        icon = 'icons/Forests.svg'
    } else if(feature.get('class') === 'Grassland') {
        icon = 'icons/Grasslands.svg'
    } else if(feature.get('class') === 'Shrubland') {
        icon = 'icons/Shrublands.svg'
    } else if(feature.get('class') === 'Water body') {
        icon = 'icons/Waterbodies.svg'
    } else if(feature.get('class') === 'Wetland') {
        icon = 'icons/Wetland.svg'
    }
    return [new ol.style.Style({
        image: new ol.style.Icon({
            src: icon,
            scale: 0.7
        })
    })]
};

var points = new ol.layer.Vector ({
    title: 'Gathered Points',
    source: vectorTwo,
    style: styleFunction
});

我对 javascript 很陌生，所以这可能是我面临的一个简单错误，但我没有找到解决方案，我有点困惑，因为它在一周前就起作用了，我没有应用任何更改。

Answer 1

您的代码需要一些语法调整。您缺少许多分号 ; 并且您的 icon 变量被声明为全局变量。有时我在这样做时遇到了麻烦，发现使用 var 关键字将其设置为本地清理了一切。如果您需要让该变量成为全局变量，只需在函数外部声明它而不赋值，然后在函数内赋值即可。这是我使用您的代码编写的更好语法版本：

var styleFunction = function(feature, resolution) {
    var icon ;
    if(feature.get('class') === 'Artificial surface') {
        icon = 'icons/Artificial_surfaces.svg' ;
    } else if(feature.get('class') === 'Bare land') {
        icon = 'icons/Barrenlands.svg' ;
    } else if(feature.get('class') === 'Cultivated land') {
        icon = 'icons/Cultivated_land.svg' ;
    } else if(feature.get('class') === 'Forest') {
        icon = 'icons/Forests.svg' ;
    } else if(feature.get('class') === 'Grassland') {
        icon = 'icons/Grasslands.svg' ;
    } else if(feature.get('class') === 'Shrubland') {
        icon = 'icons/Shrublands.svg' ;
    } else if(feature.get('class') === 'Water body') {
        icon = 'icons/Waterbodies.svg' ;
    } else if(feature.get('class') === 'Wetland') {
        icon = 'icons/Wetland.svg' ;
    }
    return [new ol.style.Style({
        image: new ol.style.Icon({
            src: icon,
            scale: 0.7
        })
    })] ;
};

var points = new ol.layer.Vector ({
    title: 'Gathered Points',
    source: vectorTwo,
    style: styleFunction
}) ;

此外，我强烈建议在您使用的许多 if else 语句中使用 switch 语句。使代码更简洁，您只需要传递一个参数。您可以阅读 switch 语句 here。它们应该相当容易理解。

Answer 2

您肯定引入了一个新的 class，该 class 返回给 feature.get('class')

如果 styleFunction 中的 none 条件为真，您将收到 ReferenceError: icon is not defined 错误，因为如果发生这种情况，则不会分配 icon，因为您在 new ol.style.Icon.

处抛出 ReferenceError 的任何地方都没有 icon 的定义

要解决该问题，您一方面必须使用 let（或旧环境 var）添加 icon 的定义，并且您可能希望使用 var 对其进行初始化默认值 if none 的 if 块评估为 true。

var styleFunction = function(feature, resolution) {
    var icon /* = 'icons/Default.svg'  */
    if (feature.get('class') === 'Artificial surface') {
      icon = 'icons/Artificial_surfaces.svg'
    } else if (feature.get('class') === 'Bare land') {
      icon = 'icons/Barrenlands.svg'
    }

    // ...
}