添加一个 geojson 文件并使用 mapbox 在地图中创建多边形

Question

我在与我的 html 文件相同的存储库中有一个 example.geojson 文件，格式如下：

{
"type": "FeatureCollection",
"features": [
        {
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [0.328475794345889,51.5430323219002],
                    [0.330011830097691,51.544575635037],
                    [0.332923372866699,51.5445177628264],
                    [0.334298679806651, 51.5429165836459],
                    [0.328475794345889,51.5430323219002]
                ]
            ]
        },
        "properties": {
            "O3_var": null,
            "CO2_var": null,
            "NO2_var": null,
            "O3_mean": null,
            "CO2_mean": null,
            "NO2_mean": null,
            "PM10_var": null,
            "PM25_var": null,
            "PM10_mean": null,
            "PM25_mean": null,
            "measurement_start_utc": null
        }
    }
 ] 
}

我想将其导入 html 并在地图上创建一个多边形。我试过这个：

   <!DOCTYPE html>
   <html>
   <head>....</head>
  <body>
  <div id="map"></div>
  <script>
   mapboxgl.accessToken = 'max_access_token';
   var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/outdoors-v11',
    center: [-0.318092, 51.509865],
    zoom: 10
   });

   map.on('load', function() {
    map.addSource('london', {
        'type': 'geojson',
        'data': './example.geojson',
    });

    map.addLayer({
        'id': 'london-boundary',
        'type': 'fill',
        'source': 'london',
        'paint': {
            'fill-color': '#888888',
            'fill-opacity': 0.4
        },
        'filter': ['==', '$type', 'Polygon']
    });

 });
 </script>

我应该在 html 文件中更改什么？因为输出只是一张地图。请任何建议都会有所帮助。提前谢谢你。

Answer 1

感谢您的回复。我很抱歉。都是我的错。我应该使用 http 服务器来加载页面。我使用了 python3 http 服务器。

添加一个 geojson 文件并使用 mapbox 在地图中创建多边形

Add a geojson file and create polygons in a map with mapbox

javascript

geojson

mapbox-gl-js