Question

我正在使用openlayers将点添加到地图并使用样式功能对其进行样式设置。这段代码在一周前有效，今天我没有进行任何更改就将其加载，并收到错误消息“ ReferenceError：未定义图标”。

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

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

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

如果您在ReferenceError: icon is not defined中没有一个条件为真，则将得到一个styleFunction错误，因为如果发生这种情况，那么将不会分配icon且因为您没有定义将icon扔到您的ReferenceError上的new ol.style.Icon中。

要解决该问题，您一方面必须使用icon添加let的定义（或者对于较旧的环境var），并且您可能想使用默认值对其进行初始化如果所有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'
    }

    // ...
}

Answer 2

您的代码需要一些语法调整。您缺少许多分号;，并且您的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
}) ;

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

Javascript：“ ReferenceError：未定义图标”

2 个答案: