Mapbox-gl Hosted S3 - добавляет источник - PullRequest
Новая
       14

Mapbox-gl Hosted S3 - добавляет источник

0 голосов
/ 15 апреля 2020

Я работаю над этим проектом, в котором я хочу добавить относительно динамически c данные (обновляемые каждые 15 минут) в mapbox-gl с помощью решения без сервера. Я следовал этому прекрасному руководству по созданию векторных серверных плиток и работе базовых плиток.

Теперь у меня вопрос, как бы вы достигли добавления слоя географических json точек на карту (размещено на хосте)? на простой странице HTML), используя что-то вроде: 

var map = new mapboxgl.Map({
    container: 'map',
    style: style: "https://{domain}/bright.json",
});

var url = 'https://{domain}/geojsonfile.json'

map.addSource('geojsonfile', {
        'type': 'geojson',
        'data': url
    });

map.addLayer({
        'id': 'geojsonfile',
        'type': 'symbol',
        'source': 'geojsonfile',
        'layout': {
            'icon-image': 'rocket-15'
        }
    });

В векторной среде без сервера без использования Tippecanoe для преобразования файла json в векторные листы protobuf и добавления слой прямо на карту из файла javascript. Вышеуказанные js для addource и addlayer взяты из этого руководства Mapbox .

. Я могу получить вышеприведенные js, работающие, когда я передаю mapboxgl.accessToken вместо самостоятельного хостинга; однако это насколько я смог получить. Файл geo json хранится в корзине s3 с поддержкой CORS.

Проблема с загрузкой в ​​источнике или отображением слоя? Я также попытался изменить файл bright. json для обработки источника и слоя, чтобы мне пришлось только заменить файл s3, однако мне не повезло.

Любая помощь и предложения приветствуются. .

1 Ответ

0 голосов
/ 16 апреля 2020

После довольно большого количества слепых проб и ошибок, наконец, нашли решение. Оказывается, мой оригинальный скрипт пытался загрузить слой на карту под нагрузкой . Однако базовая загрузка листов настраивается с помощью файлов стилей и файлов pre-load .

. Поэтому js addSource необходимо добавить на карту. после загрузки , а затем стиль при загрузке . 

this.map.on('style.load', function () {
    this.pastInitialLoad = true;
    this.map.addSource("geojsonfile", {
        "type": "geojson",
        "data": url }
    );

Если кто-то еще застрянет, эти руководства / источники окажут большую помощь!

https://schwanksta.com/blog/vector-tiles-introduction-pt1

http://fuzzytolerance.info/blog/2016/03/16/Leaflet-to-Mapbox-GL/

https://github.com/mapbox/mapbox-gl-js/issues/2268

...