将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

my console now prints 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>