微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我的本​​地路径中有一个具有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
            });
        });
    });
});

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。