javascript - 如何在Openlayers 3中显示ESRI矢量 basemap

Question

我正在尝试添加新的 ESRI Vector Basemaps在 OpenLayers 3 .我已经通过修改 Mapbox Example 来显示未设置样式的层。由 OpenLayers 发布。

很明显，我必须删除 style: createMapboxStreetsV6Style() 选项才能显示 esri 图层。所以基本上 map 不知道正确显示图层的样式信息。

我认为应该可以做到，因为ESRI's Leaflet port和 example已经在这样做了。我认为有关 esri 样式 ID 的信息可在此处获得 Leaflet code .

OpenLayers 应该已经能够使用所有这些信息，因为它能够显示 Mapbox 图层。我需要帮助的是，如何让它使用 ESRI 的样式信息。

这是我目前所拥有的(codepen here):

var map = new ol.Map({
  layers: [
    new ol.layer.VectorTile({
      source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        
        tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
        tilePixelRatio: 16,
        url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

.map {
  background: #f8f4f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.1.0/ol.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.1.0/ol.css" rel="stylesheet"/>
<div id="map" class="map"></div>

Answer 1

有一个单独的库，https://npmjs.com/package/ol-mapbox-style ，这使得在 OpenLayers 中使用包含其样式的矢量图 block map 变得容易。它读取样式文档并从中构建整个 map 。对于上面链接的其中一张 ESRI map ，在 OpenLayers 中获取该 map 的代码是

var map = new ol.Map({
  target: 'map'
});
olms.apply(map, 'https://www.arcgis.com/sharing/rest/content/items/4f4843d99c34436f82920932317893ae/resources/styles/root.json?f=json');

您可以将 4f4843d99c34436f82920932317893ae 替换为 Leaflet 示例中列出的其他 map ID 之一，以获取其他 map 。

您也可以使用该代码 - 我创建了一个 CodePen:https://codepen.io/ahocevar/pen/xLaBVV .