使用本地geoJSON文件将其添加到我的MapBox GL JS API时出错

编程问答 2022-06-13

问题描述

我的本​​地路径中有一个具有7000个功能的geoJSON文件。在我的ASP.NET MVC视图（HTML页面）中使用它在地图上呈现它。我正在使用jQuery $ .getJSON函数读取geoJSON文件。当我在控制台中检查它时，我发现已读取数据。但是，当我在添加源地图框功能中添加它时，出现多个错误，指出输入数据不是有效的GeoJSON对象，并且样式未完成加载。

用于读取并将其添加到MapBoxAPI中的代码

    $("document").ready(function () {
        var datare = $.getJSON("/geojson/SDM769198.geojson",function () {
            console.log("success");
        })
            .done(function () {
                console.log("second success");
            })
            .fail(function () {
                console.log("error");

            })
            .always(function () {
                console.log("complete")
            });

        console.log(datare);
        map.on('load',function () {
            
            map.addSource('vicdata',{
                'type': 'geojson','data': datare
            });
        });

控制台输出 JSON响应

enter image description here

控制台错误

enter image description here

关于如何将本地数据加载到MapBox API的任何建议？

我尝试了多种方法将geoJSON文件上传到GitHub存储库，并将其用作文档中提到的链接，仍然没有运气。

解决方法

此错误的原因：

输入数据不是有效的GeoJSON对象

您输入的数据不是有效的GeoJSON对象。

您可以使用geojsonlint.com来检测此类错误并获得有关修复方法的提示。

,

您使用的是错误的getJSON。

当您var datare = $.getJSON...时，datare不是实际的json，而是表示AJAX请求的对象。 稍后，当您console.log（datare）时，chrome所做的就是在扩展数据时解释数据...难以解释，但是无论如何您的代码应该是

$("document").ready(function () {
    map.on('load',function () {
        $.getJSON("/geojson/SDM769198.geojson",function (j) { // j is the actual json
            map.addSource('vicdata',{
                'type': 'geojson','data': j
            });
        });
    });
});
geojsonjqueryjsonmapboxmapbox-gl-js