Question

我正在尝试将Web服务中的多边形渲染到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和http://geojsonlint.com/知道我的Web服务正在生成geojson。它以内容类型“文本/纯文本； 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对象传递给mapbox似乎也可以，但是您的API可能有问题，所以我会手册fetch，看看是否有任何问题。此外，您绝对应该将content-type标头更改回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核心后端代码段：

Platform : Raspberry Pi 3b+ , Raspbian 4.19.58-v7+


There is no issue with the code since i have executed it on my Ubuntu PC and it works perfectly fine.

我正在使用NetTopologySuite。 poly是SQL Server地理类型Polygon。

编辑：好的，我自己弄清楚了：我必须这样做： // 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); } 并使用ContentResult作为返回类型。

我的Json似乎被序列化了两次，因为它有太多字符。 Ah和正确的geojson响应不需要提议的fetch和response.json（）解析提议。但它也正在与之合作。 ;）不过谢谢。

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

2 个答案: