使用 Mapbox 读取本地 geojson 文件

Question

I am currently trying to make a simple visualization using Mapbox that is based on additional data provided by a local geojson file.我目前正在尝试使用基于本地 geojson 文件提供的附加数据的 Mapbox 进行简单的可视化。 I cannot upload this file to Mapbox and would like to keep it local.我无法将此文件上传到 Mapbox，并希望将其保留在本地。

I have used this base code from Mapbox that I have modified to include a local geojson file that is structured like this:我使用了 Mapbox 中的这个基本代码，我已经修改它以包含一个结构如下的本地 geojson 文件：

{"features": [{"geometry": null, "location": {"coordinates": [40.730610, -73.935242], "type": "Point"}, "properties": {"X": "1", "group": "1"}, "type": "Feature"},...}

I have modified the example code from Mapbox so that it is now:我已经修改了 Mapbox 中的示例代码，现在是：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Style circles with a data-driven property</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.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.eyJ1IjoibG9ubmliZXNhbmNvbiIsImEiOiJjamxjaWNpOHQwMHV0M3FwaHhneGhvY2l2In0.7GxI8W_dnTKITNF4hEvZeQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 12,
    center: [-73.935242, 40.730610],
    pitch: 20,
});


var url = "GeoObs.json.json"

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

    var layers = map.getStyle().layers;

    var labelLayerId;
    for (var i = 0; i < layers.length; i++) {
        if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
            labelLayerId = layers[i].id;
            break;
        }
    }

     map.addSource("my_data", {
        type: "geojson",
        data: url //"./GeoObs.json",
        /*cluster: true,
        clusterMaxZoom: 15, // Max zoom to cluster points on
        clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)*/
    });


    map.addLayer({
        'id': 'population',
        'type': 'circle',
        source: 'my_data',
        'source-layer': 'my_data',
        'paint': {
            // make circles larger as the user zooms from z12 to z22
            'circle-radius': {
                'base': 1.75,
                'stops': [[12, 2], [22, 180]]
            },
            // color circles by ethnicity, using a match expression
            // https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
            'circle-color': [
                'match',
                ['get', 'group'],
                '1', '#fbb03b',
                '2', '#223b53',
                '3', '#e55e5e',
                '4', '#3bb2d0',
                /* other */ '#ccc'
            ]
        }
    });

    map.addLayer({
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
            'fill-extrusion-color': '#aaa',

            // use an 'interpolate' expression to add a smooth transition effect to the
            // buildings as the user zooms in
            'fill-extrusion-height': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "height"]
            ],
            'fill-extrusion-base': [
                "interpolate", ["linear"], ["zoom"],
                10, 0,
                15.05, ["get", "min_height"]
            ],
            'fill-extrusion-opacity': .6
        }
    }, labelLayerId);
});

</script>

</body>
</html>

I get the following error:我收到以下错误：

Error: Source layer "my_data" does not exist on source "my_data" as specified by style layer "population"
    at i._validateLayer (style.js:274)
    at i.addLayer (style.js:576)
    at o.addLayer (map.js:1175)
    at o.<anonymous> (index3.html:52)
    at o.L.fire (evented.js:115)
    at o._render (map.js:1619)
    at map.js:1683

Can anyone point me in the direction of a possible mistake here and hopefully how to fix it.谁能指出我这里可能出现的错误的方向，并希望如何解决它。 You can use the example geojson I gave you to try out this example.您可以使用我给您的示例 geojson 来尝试这个示例。 Just copy paste it into a file called: GeoObs.json if you want the code to right away give the same error.如果您希望代码立即给出相同的错误，只需将其复制粘贴到名为：GeoObs.json 的文件中。

Answer 1

For the population layer, comment out the line, because you do not have such a layer:对于人口层，注释掉该行，因为您没有这样的层：

'source-layer': 'my_data',

And maybe you have an extra ".json" in the URL:也许您的 URL 中有一个额外的“.json”：

GeoObs.json.json

[ https://jsfiddle.net/c5nauwgx/ ] [ https://jsfiddle.net/c5nauwgx/ ]

Answer 2

As the error states, your GeoJSON source does not have a source layer.如错误所述，您的 GeoJSON 源没有源层。 So you can remove the 'source-layer' property from the map.addLayer call.因此，您可以从map.addLayer调用中删除'source-layer'属性。

Your GeoJSON also needs to be modified to a proper FeatureCollection:您的 GeoJSON 还需要修改为适当的 FeatureCollection：

{
  "type": "FeatureCollection",
  "features": [
    {
      "geometry": {
        "type": "Point",
        "coordinates": [
          -73.935242,
          40.730610
        ]
      },
      "properties": {
        "X": "1",
        "group": "1"
      },
      "type": "Feature"
    }
  ]
}

Answer 3

This example from MapLibre helped me and also works with Mapbox GL JS. MapLibre 的这个例子对我有帮助，也适用于 Mapbox GL JS。 It adds a little interactivity to your map by giving you the option to select a local geojson file within the map.它通过让您在地图中选择本地 geojson 文件的选项，为您的地图增加了一点交互性。

https://maplibre.org/maplibre-gl-js-docs/example/local-geojson/ https://maplibre.org/maplibre-gl-js-docs/example/local-geojson/

使用 Mapbox 读取本地 geojson 文件

问题描述

3 个解决方案

解决方案1
3 2018-09-12 16:06:49

解决方案2
3 已采纳 2018-09-12 16:11:58

解决方案3
0 2022-06-28 09:15:22

使用 Mapbox 读取本地 geojson 文件

问题描述

3 个解决方案

解决方案1 3 2018-09-12 16:06:49

解决方案2 3 已采纳 2018-09-12 16:11:58

解决方案3 0 2022-06-28 09:15:22

解决方案1
3 2018-09-12 16:06:49

解决方案2
3 已采纳 2018-09-12 16:11:58

解决方案3
0 2022-06-28 09:15:22