将 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 
  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>

将 geojson 数据加载到 Mapbox

Loading geojson data into Mapbox

javascript

mapbox-gl-js