OpenLayers 5: ol-mapbox-style + VectorLayer

Я настроил стиль в MapTiler Cloud, и полученный файл style.json необходимо применить к карте Openlayers с помощью плагина ol-mapbox-style.
Это пример, предоставленный Maptiler

<!DOCTYPE html>
<html>
<head>
  <title>TileHosting</title>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Promise"></script>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
  <script src="https://cdn.rawgit.com/boundlessgeo/ol-mapbox-style/v3.0.1/dist/olms.js"></script>
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css">
  <style>
    #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
  </style>
</head>
<body>
  <div id="map"></div>
  <p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>
  <script>
    var styleJson = 'https://maps.tilehosting.com/c/xxxxx/styles/voyager/style.json?key=xxxxx';
    var map = new ol.Map({
      target: 'map',
      view: new ol.View({
        center: ol.proj.fromLonLat([-87.53906, -43.83453]),
        zoom: 0
      })
    });
    olms.apply(map, styleJson);
  </script>
</body>

И все работает, стиль визуализируется.
Но тогда я больше не могу добавлять векторные слои на него.
Или, лучше, инструкция "map.addLayer" выполняется без ошибок, но поверх стиля не отображается ни один слой.
Если я использую обычный TileLayer в качестве фона (не используя плагин в стиле ol-mapbox), векторные слои поверх него корректно отображаются
Есть идеи почему?

Спасибо лука

Источник

1 ответ

(не хватает репутации, чтобы оставить комментарий)

Является ли слой на самом деле на карте (вы видите его с map.getLayers())?

Если он есть, он может быть только ниже слоя mapbox, поэтому установка более высокого значения zIndex в вашем векторном слое может сработать. Какую версию ol-mapbox-style вы используете? Я считаю, что в последней публикации было обновление по умолчанию для z-Index.

Если вы хотите, чтобы ваш векторный слой был выше всех других слоев, вы также можете использовать layer.setMap(map) метод, а не map.addLayer(layer)

Источник

Спасибо Робу за помощь, но я решил просто создать новый проект с нуля. Хотя у меня не было видимых ошибок, я думаю, что это был какой-то конфликт или совпадение между импортом в моем js-коде и элементом "script src" в index.html. Моя неопытность не помогла. Спасибо

Источник
Другие вопросы по тегам