如何在 Openlayers 3 中显示 ESRI Vector 底图

Question

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

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

我认为应该可以这样做，因为ESRI 的 Leaflet 端口和示例已经这样做了。 我认为有关 esri 样式 ID 的信息可在此处的Leaflet code 中找到。

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

这是我到目前为止所拥有的（此处为 codepen ）：

 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 中的样式。 它读取样式文档并从中构建整个地图。 对于您在上面链接的 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。

Answer 2

@ahocevar 的建议是完美的，

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

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

我必须将这些 url 更改为完整的 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