将geojson数据加载到Mapbox中

Question

我似乎无法将数据显示在地图上。 geojson文件很大，因此我正在将其加载为外部源。 我的index.html文件看起来像这样

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2VhbmRyYWFkbG96ZSIsImEiOiJjajA3cW1pOTcwMDA5Mndvd2hicHlmNWc1In0.7bt7sPXDoymYJyVDvVmqZw';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/seandraadloze/cj1dcc3ho00f82smkvjxp4frb', //hosted style id
    center: [24.530,-32.254], // starting position
    zoom: 14.5 // starting zoom
    });

    var url = 'http://bestersurveys.co.za/htmlsite/quintin.geojson';
    var source = new map.addSource()({
      data: url
    });

    window.setInterval(function() {
      source.setData(url);
    }, 1000);

    map.on('style.load', function() {
      map.addSource("markers", source);
      map.addLayer({
        "id": "markers",
        "type": "circle",
        "visibility": "visible",
        "source": "markers",
        "paint": {
          "circle-radius": 0.2,
          "circle-color": "#f3f3f3"
        }
      });
    });

    </script>

    </body>
    </html>

我从控制台收到此错误

map.js:895 Uncaught TypeError: Cannot read property 'addSource' of undefined
    at new e.addSource (map.js:895)
    at maptest.html:27

您可以在此处查看地图-http: //bestersurveys.co.za/htmlsite/maptest.html

谁能告诉我我要去哪里错了？

谢谢

肖恩

Answer 1

我的控制台现在显示Uncaught Error: Style is not done loading

将您的map.addSource()调用移到style.load事件处理程序中（请参阅https://gis.stackexchange.com/questions/200733/mapbox-error-style-is-not-done-loading ）。

另外，您将addSource称为错误（请参阅https://www.mapbox.com/mapbox-gl-js/api/#map#addsource ）。

 mapboxgl.accessToken = 'pk.eyJ1Ijoic2VhbmRyYWFkbG96ZSIsImEiOiJjajA3cW1pOTcwMDA5Mndvd2hicHlmNWc1In0.7bt7sPXDoymYJyVDvVmqZw'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/seandraadloze/cj1dcc3ho00f82smkvjxp4frb', center: [-71.059568, 42.360482], zoom: 1 }); map.on('style.load', function() { map.addSource("sample", { type: "geojson", data: "https://raw.githubusercontent.com/chelm/grunt-geo/master/samples/postgis.geojson" }); // one layer per GeoJSON feature type, see http://stackoverflow.com/a/36927026 map.addLayer({ "id": "sample-line", "type": "line", "source": "sample", "filter": ["==", "$type", "LineString"], "paint": { "line-color": "white" } }); map.addLayer({ "id": "sample-point", "type": "circle", "source": "sample", "filter": ["==", "$type", "Point"], "paint": { "circle-radius": 5, "circle-color": "red" } }); }); 

 #map { width: 600px; height: 200px; border: 1px solid black; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.35.0/mapbox-gl.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.35.0/mapbox-gl.js"></script> <div id='map'></div>