Загрузка данных geojson в Mapbox

Я не могу отобразить свои данные на карте. Файл 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

Может ли кто-нибудь сказать мне, где я ошибаюсь?

Спасибо

Шон


javascript mapbox-gl-js
person Sean Konig    schedule 12.04.2017    source источник
comment
Я предполагаю, что эта часть var source = new map.addSource()({. Удалите новое ключевое слово.   -  person Douwe de Haan    schedule 12.04.2017
comment
Привет, приятель, спасибо. Хорошо, ошибка устранена, но данных по-прежнему нет, моя консоль теперь печатает Uncaught Error: Загрузка стиля не завершена в t._checkLoaded (style.js:272) в t.addSource (style.js:372) в e.addSource ( map.js:895) на maptest.html:27   -  person Sean Konig    schedule 12.04.2017
comment
Хм, никогда не сталкивался с таким раньше. Я обнаружил, что размещение всего между map.on('style.load' может решить проблему, поэтому ваш код запускается, как только стили загружаются.   -  person Douwe de Haan    schedule 12.04.2017
comment
Я получаю сообщение об ошибке 404.3 при попытке доступа к bestersurveys.co.za/htmlsite/quintin.geojson< /а>.   -  person Tomalak    schedule 12.04.2017
comment
Я получаю ошибку 404.3. Понятия не имею, что это такое, но я проверю, смогу ли я это исправить, а затем вернусь к вам, ребята. Спасибо за помощь до этого момента.   -  person Sean Konig    schedule 12.04.2017
comment
Привет, ребята, извините за дополнительную ошибку. Я исправил это. Я все еще получаю эту ошибку в консоли. style.js:272 Uncaught Error: Загрузка стиля не завершена в t._checkLoaded (style.js:272) в t.addSource (style.js:372) в e.addSource (map.js:895) в maptest.html :27   -  person Sean Konig    schedule 12.04.2017

Ответы (1)


arrow_upward
2
arrow_downward

моя консоль теперь печатает 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>

person Tomalak    schedule 12.04.2017
comment
Эй, спасибо за помощь здесь. Я переставил код и думаю, что стал на шаг ближе после вашего ответа (до сих пор нет данных). Теперь я получаю ошибку «источник не определен» в source.setData(url); Разве это не установлено здесь: var url = 'bestersurveys.co.za/htmlsite/quintin.geojson< /а>'; Извини, что спросил, приятель - person Sean Konig; 12.04.2017
comment
Не просто копируйте мой код, обратите внимание на детали. Я вообще не звоню source.set(), потому что в этом нет необходимости. - person Tomalak; 12.04.2017
comment
Привет, я понял свою ошибку. Извини. Кажется, это работает, но я все еще получаю сообщение «Входные данные не являются допустимым объектом GeoJSON. Вы можете увидеть все это вживую здесь - bestersurveys.co.za/htmlsite/maptest.html - person Sean Konig; 12.04.2017
comment
Входные данные не являются допустимым объектом GeoJSON — довольно специфичное сообщение об ошибке. Это означает именно то, что он говорит. - person Tomalak; 12.04.2017
comment
Да, спасибо за помощь в этом вопросе. Ваш ответ действительно исправил мою первоначальную проблему, поэтому я отмечу его как ответ, а затем продолжу взламывать файл geojson. Спасибо друг - person Sean Konig; 12.04.2017
comment
Я посмотрел на это, вы не так уж много потеряли в действительном файле. при этом подумайте о том, чтобы не отправлять такой огромный файл клиенту. Предположим, что вы в любом случае не показываете все эти точки данных одновременно, поэтому гораздо разумнее создавать GeoJSON на лету с результатами запросов к базе данных, чем отправлять огромное количество точек данных клиенту и только когда-либо показать очень мало из них. Разрешение серверу создавать GeoJSON с правильной функцией сериализации также навсегда решит вашу проблему с недопустимым json. - person Tomalak; 12.04.2017
comment
Привет Чувак. Я изменил способ, которым мой клиент экспортировал файлы, и теперь он работает. Спасибо за ваш совет относительно файлов здесь. Действительно цените усилия. - person Sean Konig; 13.04.2017
comment
Рад слышать! С чем вы работаете на стороне сервера? - person Tomalak; 13.04.2017