如何监听OpenLayers图层加载失败事件及解决addLayer报错问题

方案1：直接监听VectorSource的error事件 #

VectorSource内置了error事件，会在数据源加载失败时触发，在事件回调中做降级处理即可避免未捕获错误导致的页面空白问题，示例代码如下：

var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    projection: 'EPSG:4326',
    url: url,
    strategy: ol.loadingstrategy.bbox
});

// 监听数据源加载错误
vectorSource.on('error', function(error) {
    console.error('图层数据源加载失败：', error);
    // 清空数据源，避免后续OL内部读取属性时报错
    vectorSource.clear();
    // 可在此处添加自定义用户提示逻辑
});

var vector = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: rgbList[0]
        }),
        stroke: new ol.style.Stroke({
            color: 'black',
            width: 1
        })
    })
})
map.addLayer(vector);

方案2：自定义loader函数实现更精细的错误控制 #

如果需要自定义请求逻辑（比如添加请求头、处理特殊参数、校验返回结果），可以替换默认url配置为loader加载函数，主动捕获请求过程中的所有错误：

var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    projection: 'EPSG:4326',
    strategy: ol.loadingstrategy.bbox,
    // 自定义加载函数
    loader: function(extent, resolution, projection, successCallback, failureCallback) {
        const projCode = projection.getCode();
        // 按照bbox策略拼接请求参数，可根据你的接口规则调整
        const requestUrl = `${url}?bbox=${extent.join(',')}&srs=${projCode}`;
        fetch(requestUrl)
            .then(res => {
                if (!res.ok) {
                    throw new Error(`请求失败，状态码：${res.status}`);
                }
                return res.json();
            })
            .then(geoJsonData => {
                const features = new ol.format.GeoJSON().readFeatures(geoJsonData, {
                    featureProjection: projCode
                });
                vectorSource.addFeatures(features);
                successCallback(features);
            })
            .catch(err => {
                console.error('图层加载出错：', err);
                failureCallback(err);
                // 降级处理
                vectorSource.clear();
                // 可在此处添加自定义用户提示逻辑
            });
    }
});

var vector = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: rgbList[0]
        }),
        stroke: new ol.style.Stroke({
            color: 'black',
            width: 1
        })
    })
})
map.addLayer(vector);

错误原因说明 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'ol_uid')报错，是因为数据源请求失败后，OpenLayers内部默认处理逻辑会尝试读取返回结果的属性，结果返回内容为undefined，触发了未捕获的类型错误，通过上述两种方式捕获错误并做降级处理后即可解决该问题。

内容的提问来源于stack exchange，提问作者Thorns