Уровень GeoJSON не загружается на MapBox GL JS

Question

Я пытаюсь добавить слой данных GeoJSON на базовую карту MapBox, но это не сработает. Я пробовал ряд своих обучающих программ, таких как this one и this one, но они не будут работать.

Это мой код:

var map = new mapboxgl.Map({ 
     container: 'themap', 
     center: [-73.9939914, 40.7274072], 
     zoom: 17, 
     style: 'mapbox://styles/mapbox/streets-v9' 
    }); 

    map.on('load', function() { 

    map.addSource('plutodata', { 
    type: 'geojson', 
    url: 'http://url.geojson' 
    }); 
    map.addLayer({ 
    id: 'pluto', 
    type: 'fill', 
    source: 'plutodata', 
    'source-layer': 'plutodata', 
     layout: { 
     visibility: 'visible' 
     }, 
     paint: { 
     'fill-color': 'rgba(61,153,80,0.55)' 
     } 
    }); 
    }); 

Картографические нагрузки, но слой GeoJSON не появляется. Любые идеи, в которых я ошибаюсь?

Полное решение: после

tmcw в ниже был первый шаг в установлении этого вопроса. Я добавил заголовки, содержащие COR, в мой файл .htaccess. Второй шаг состоял в том, что свойство «url» в файле map.addSource должно было быть «данными». Теперь все работает.

Answer 1

Для Mapbox GL JS для загрузки данных с этого сервера необходимо использовать Cross-origin resource sharing и this URL doesn't support that. Вам нужно будет enable CORS на сервере или в файле, чтобы другие серверы могли запрашивать данные.

Answer 2

Вы можете загрузить свой geojson в виде плитки в Mapbox, затем создать новый слой в одном из ваших стилей и ввести свой набор тайников geojson под вкладкой «Layer from Data». Если, например, вы назвали ваш новый слой «mygeojson», то вы можете назвать это в вашем .js, например:

map.on('load', function() { map.addLayer({ 'id': 'mygeojson', 'source': 'composite', 'source-layer': 'mygeojson', 'type': 'fill', 'paint': { 'fill-color': '#f00' } }); });