如何在 Openlayers 3 中显示 ESRI 矢量底图答案

【问题标题】：How to display ESRI Vector base map in Openlayers 3如何在 Openlayers 3 中显示 ESRI 矢量底图
【发布时间】：2017-09-26 01:10:57
【问题描述】：

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

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

我认为应该可以这样做，因为 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>

【问题讨论】：

您是否尝试在gis.stackexchange.com 上发布此问题？您可能会在那里获得更多帮助。
不太确定我是否遵循，但在 OL 示例页面上有一个非常好的示例：openlayers.org/en/latest/examples/xyz-esri.html 通过修改地图对象中“url”属性的第二部分，您可以选择您想要的层。
@stopopol 该示例并未显示矢量底图。只是一个普通的图像瓷砖。矢量底图是动态样式：arcgis.com/home/…

标签： javascript gis openlayers openlayers-3 esri

【解决方案1】：

@ahocevar 的建议很完美，

esri 的 root.json、sprite 和 glyphs 不是完整的 URL，它们只是最后一部分，如下所示

在您的示例中，那些不完整的 URL 有效，但是，我在 mapbox js api 中对其进行了测试，它失败了，错误是无法解析 URL，

我必须将这些网址更改为完整的网址，以使其正常工作。

                         root_json = {

                                                      "version" : 8,
                                                      "name": "test",

                                                      //"sprite" : original_rootJson.sprite,    // original is not a full URL, not work  "../sprites/sprite"   
                                                      // "sprite" : "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/2020_USA_Median_Age/VectorTileServer/resources/sprites/sprite",
                                                      "sprite" : _sprite,

                                                      

                                                      // "glyphs" : original_rootJson.glyphs,      // original is not a full URL, not work  "../fonts/{fontstack}/{range}.pbf" 
                                                      // "glyphs" : "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/2020_USA_Median_Age/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf",
                                                      "glyphs" : _glyphs,

                                                    

                                                      // root json  specification :   https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
                                                      "sources" : {

                                                                                "esri" : {
                                                                                            "type" : "vector",

                                                                                            //  By supplying TileJSON properties such as "tiles", "minzoom", and "maxzoom" directly in the source:
                                                                                            "tiles": [
                                                                                                          // "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/2020_USA_Median_Age/VectorTileServer/tile/{z}/{y}/{x}.pbf"
                                                                                                            _tile_pbf
                                                                                                      ],

                                                                                            // "maxzoom": 14
                                                                                            // By providing a "url" to a TileJSON resource
                                                                                            // not work,yet
                                                                                            //  "url" : "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Esri_Childrens_Map/VectorTileServer/tile/{z}/{y}/{x}.pbf"
                                                                                            //  "url": "http://api.example.com/tilejson.json"

                                                                                        }
                                                                  },

                                                      "layers":  original_rootJson.layers     


                                      } // root_json

【讨论】：

【解决方案2】：

有一个单独的库，https://npmjs.com/package/ol-mapbox-style，它可以很容易地在 OpenLayers 中使用矢量平铺地图，包括它们的样式。它读取样式文档并从中构建整个地图。对于您在上面链接的 ESRI 地图之一，在 OpenLayers 中获取该地图的代码是

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 示例中列出的其他地图 ID 之一以获取其他地图。

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

【讨论】：