提供给 'drone' 的输入数据不是有效的 GeoJSON 对象

Question

我正在尝试将多边形从网络服务渲染到 mapbox 地图作为概念证明。

我的网络服务为我提供了以下带有一些模拟数据的 geojson：

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[9.750441312789917,52.350087018909683],[9.7523081302642822,52.34896634765532],[9.7523403167724609,52.350106679555289],[9.750441312789917,52.350087018909683]]]},"properties":{"test1":"value1"}}]}

但是 mapbox 给了我可以在浏览器控制台中看到的错误：提供给 'drone' 的输入数据不是有效的 GeoJSON 对象。

http://geojson.io and http://geojsonlint.com/ 了解我的网络服务生成的 geojson。它作为内容类型发送 "text/plain; charset=utf-8" 因为作为 application/json 它有很多 \ 字符，这是行不通的。

您可以在下面看到我用于此测试的 html 代码。

那么我做错了什么？

我检查了 geojson 的格式是否正确，我直接添加了相同的 geojson 作为源并且它有效。见下文。

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Add multiple geometries from one GeoJSON source</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>

    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.xxxxxx';
        var map = new mapboxgl.Map({
            container: "map",
            style: "mapbox://styles/mapbox/streets-v11",
            center: [9.754206, 52.355394],
            zoom: 14
        });

        var url = 'https://localhost:44337/api/resource';

        map.on('load', function () {

            map.addSource('drone', { type: 'geojson', data: url });

            map.addLayer({
                "id": "drone",
                "type": "fill",
                "source": "drone",
                'layout': {},
                'paint': {
                    'fill-color': '#088',
                    'fill-opacity': 0.8
                }
            });
        });
    </script>

</body>

</html>

我希望地图上有一些多边形，就像我将 geojson 直接放入代码中一样：

        map.on('load', function () {

            map.addLayer({
                'id': 'maine',
                'type': 'fill',
                'source': {
                    'type': 'geojson',
                    'data': 


                    {
                        "type": "FeatureCollection",
                        "features": [
                            {
                                "type": "Feature",
                                "geometry": {
                                    "type": "Polygon",
                                    "coordinates": [
                                        [
                                            [
                                                9.750441312789917,
                                                52.350087018909683
                                            ],
                                            [
                                                9.7523081302642822,
                                                52.34896634765532
                                            ],
                                            [
                                                9.7523403167724609,
                                                52.350106679555289
                                            ],
                                            [
                                                9.750441312789917,
                                                52.350087018909683
                                            ]
                                        ]
                                    ]
                                },
                                "properties": {
                                    "test1": "value1"
                                }
                            }
                        ]
                    }

                },
                'layout': {},
                'paint': {
                    'fill-color': '#088',
                    'fill-opacity': 0.8
                }
            });
        });

Answer 1

也许你应该尝试从你的 API 手动获取你的 geoJSON 并查看它是否有效，将 URL 作为 geoJSON object 传递给 mapbox 似乎也有效，但也许你的 API 有问题，所以我会做一个手册 fetch 看看是否有问题。此外，您绝对应该将 content-type header 改回 application/json，以下代码段假设您已经这样做了！

map.on('load', async function() {

  let response = await fetch(url);

  let data = await (
    response.headers.get('content-type').includes('json')
    ? response.json() // this will parse your JSON if the proper content-type header is set!
    : response.text()
  );

  map.addSource('drone', { type: 'geojson', data: data });

  map.addLayer({
    "id": "drone",
    "type": "fill",
    "source": "drone",
    'layout': {},
    'paint': {
      'fill-color': '#088',
      'fill-opacity': 0.8
    }
  });
});

Answer 2

好的，我想 mapboxgl 正在调用这个，但如果有帮助，这是 asp.net 核心后端代码段：

        // GET: api/resource
        [HttpGet]
        public JsonResult GetResources()
        {
            var poly = _context.Resources.First().Polygon;

            AttributesTable attributes = new AttributesTable();
            attributes.Add("test1", "value1");
            IFeature feature = new Feature(poly, attributes);
            FeatureCollection featureCollection = new FeatureCollection(new Collection<IFeature> { feature });
            var gjw = new GeoJsonWriter();
            gjw.SerializerSettings.NullValueHandling = NullValueHandling.Ignore;
            string actual = gjw.Write(featureCollection);

            return new JsonResult(actual);
        }

我正在使用 NetTopologySuite。 poly 是 SQL Server Geography 类型的 Polygon。

编辑：好的，我自己想出来了：我必须这样做： return Content(actual, "application/json", Encoding.UTF8); 并将 ContentResult 用作 return 类型。

我的 Json 似乎连载了两次，因为它有太多字符。啊，正确的 geojson 响应不需要 fetch 和 response.json() 解析 exside。但它也在使用它。 ;) 不过还是谢谢了。

提供给 'drone' 的输入数据不是有效的 GeoJSON 对象

Input data given to 'drone' is not a valid GeoJSON object

javascript

geojson

mapbox

mapbox-gl-js

fetch-api