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

Question

我的本地路径中有一个包含 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 响应

控制台错误

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

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

Answer 1

这个错误的原因：

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

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

您可以使用 geojsonlint.com 来检测此类错误并获取有关如何修复它们的提示。

Answer 2

您以错误的方式使用 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
            });
        });
    });
});