OpenLayers+Geoserver点击要素后，JSON数据无法导入Tabulator的解决方法

这个错误提示已经把问题点得很清楚了：Tabulator的setData()方法要求传入数组类型的数据，但你现在传的是单个对象。咱们一步步来修复：

问题根源 #

你从Geoserver拿到的test2 = test1.features[0].properties是一个单个的属性对象（比如{id:1, sensor:"xxx", ...}），而Tabulator需要的是包含这类对象的数组（比如[{id:1, sensor:"xxx", ...}]），所以才会抛出"Expecting: array Received: object"的错误。

修复代码 #

直接把单个对象包装成数组传给setData()就行，同时我们还可以优化一下数据解析的步骤，让代码更健壮：

map.on('singleclick', function (evt) {
    var viewResolution = /** @type {number} */ (view.getResolution());
    var url = wmsSource.getFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        { 'INFO_FORMAT': 'application/json' });
    if (url) {
        fetch(url)
           .then(function (response) { return response.json(); }) // 直接用json解析，省去手动parse步骤
           .then(function (data) {
               // 先判断是否有可用的要素数据
               if (data.features && data.features.length > 0) {
                   var featureProps = data.features[0].properties;
                   // 把单个对象包装成数组，满足Tabulator的要求
                   table.setData([featureProps]);
               } else {
                   // 没有要素时清空表格，避免残留旧数据
                   table.clearData();
                   console.log("No feature detected at the clicked position");
               }
           })
           .catch(function(error) {
               // 捕获请求或解析错误，方便调试
               console.error("Failed to fetch feature info:", error);
           });
    }
});

额外优化提示 #

如果你的场景中，点击位置可能存在多个要素，想要全部显示在表格里，只需要把代码改成这样：

// 把所有要素的properties提取成数组
var allFeatureProps = data.features.map(feature => feature.properties);
table.setData(allFeatureProps);

这样Tabulator就会自动渲染多行数据，完美适配你的需求。

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