Question

我是将Maps实现到WebApp的新手。我已经开始通过OpenLayers实现一个简单的VectorTile地图，并且找到了另一个实现它的示例。

首先，我们有OpenLayers的Workshop页面 https://openlayers.org/workshop/en/vectortile/map.html 第一个示例正在工作，但我想使用Mapbox实现样式。因此，我尝试了以下进一步的解释： https://openlayers.org/workshop/en/vectortile/bright.html 这根本不起作用，它不采用样式。这是一个古老的例子吗？

因此，我搜索了另一个示例。并发现了这一点： https://cloud.maptiler.com/maps/basic/openlayers 这适用于一张地图，但是我想要两张地图，当我实现两张卡时，第二张与第一张样式重叠。

有人在自己的服务器上有可行的示例吗？

我不理解的是，为什么有一些示例不需要在标头中实现OL之类的示例，以及为什么有示例说您只需要一些代码即可实现带有Mapbox的VectorTile Map，其他人正在使用“提取”方法和MVT格式。

MVT格式用于显示VectorTiles 在研讨会页面上显示：

const layer = new VectorTileLayer({
  source: new VectorTileSource({
    attributions: [
      '<a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a>',
      '<a href="http://www.openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap contributors</a>'
    ],
    format: new MVT(),
    url: `https://free-{1-3}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key=${key}`,
    maxZoom: 14
  })
});
map.addLayer(layer);

然后说，删除.js文件中的所有内容并仅实现

const map = apply('map-container', './data/bright.json');

这没有用，因为没有对olms.js的引用，并且我们没有fetch方法，所以我真的不明白他们在说什么

为什么有时在VectorTiles中使用fetch（）方法，有时又可以跳过它而使用olms.js中的apply（）方法？

我很困惑。

这是我目前使用的，创建了第二个地图实例，第二个地图采用了第一张地图的样式。

var styleJson = 'https://maps.tilehosting.com/styles/basic/style.json?key=0CrAfR2pgm6V6hYu3CEj';
    var map = new ol.Map({
      target: 'map',
      view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 1
      })
    });
olms.apply(map, styleJson);

Answer 1

请看Github repo，该方法apply返回一个ol.Map对象，并根据参数中的描述为您进行了很多初始化。

因此，您有两种解决方案，即实施自己的解决方案来完成Vector Tiles的设计并应用自己的样式策略，或者使用ol-mapbox-style处理Mapbox样式并将其转换为Ol规范。

VectorTiles示例的差异

1 个答案: