如何在 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