Блог

Я пытаюсь добавить слой данных GeoJSON на базовую карту MapBox, но это не сработает. Я пробовал несколько их руководств, таких как это и этот, но они не будут работать.

Это мой код:

 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 ниже было первым шагом в устранении этой проблемы. Я добавил заголовки, разрешающие КОР, в мой файл .htaccess. Вторым шагом было то, что свойство «url» в map.addSource должно было быть «data». Теперь все работает.

Чтобы Mapbox GL JS загружал данные с этого сервера, ему необходимо использовать совместное использование ресурсов из разных источников, а этот URL-адрес этого не поддерживает. Вам нужно будет включить CORS на сервере или в файле, чтобы разрешить другим серверам запрашивать данные.

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

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