Question

我在MapTiler Cloud上自定义了样式，需要通过 ol-mapbox-style插件将生成的 style.json 文件应用于Openlayers地图。
这是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样式的插件），则其顶部的Vector Layers将正确显示
知道为什么吗？

谢谢路卡

Answer 1

（没有足够的声誉来发表评论）

该图层是否确实在地图上（您用map.getLayers()看到了吗？）

如果存在，则可能在mapbox层下方，因此在矢量层中设置较高的zIndex可能会起作用。您使用的是哪个版本的ol-mapbox风格？我相信上次发布中对默认z-Index进行了更新。

如果要强制矢量层位于所有其他层之上，则也可以使用layer.setMap(map)方法代替map.addLayer(layer)

Answer 2

感谢Rob的帮助，但我决定只是从头开始创建一个新项目。尽管我没有可见的错误，但我认为我的js代码中的导入与index.html中的“ script src”元素之间存在一些冲突或重叠。我的经验不足无济于事。谢谢

OpenLayers 5：ol-mapbox样式+ VectorLayer

2 个答案: