0

我是在 WebApps 中实现地图的新手。我已经开始通过 OpenLayers 实现一个简单的 VectorTile Map，我找到了一个不同的例子来实现它。

首先，我们有 OpenLayers 的 Workshop Page 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，而其他示例是例如，使用“fetch”方法和格式 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);
4

1 回答 1

0

查看Github repo，方法 apply 返回一个 ol.Map 对象并为您初始化很多，就像它在参数中描述的那样。

所以你有两个解决方案，实现你自己的解决方案来影响你的 Vector Tiles 并应用你自己的样式策略，或者使用 ol-mapbox-style 来处理 Mapbox 样式并将其转换为 Ol 规范。

于 2018-12-13T16:36:14.450 回答