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

Question

我正在尝试在OpenLayers 3中添加新的ESRI矢量底图。通过修改OpenLayers发布的Mapbox示例，我已经成功地显示了未经过样式处理的图层。

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

我认为这是可能的，因为ESRI的Leaflet端口和示例已经做到了这一点。我认为有关esri样式ID的信息可以在Leaflet代码中找到。

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

这是我目前的进展（代码笔）：

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>

- Shaunak

---

你尝试在 https://gis.stackexchange.com/ 上发布这个问题了吗？那里可能会有更多的帮助。 - TJ Rockefeller

我不太确定我是否理解了，但是在OL示例页面上有一个非常好的例子：https://openlayers.org/en/latest/examples/xyz-esri.html 通过修改地图对象中“url”属性的第二部分，您可以选择所需的图层。 - stopopol

@stopopol这个例子没有展示矢量底图，只有普通的图片瓦片。矢量底图是动态生成的样式：https://www.arcgis.com/home/group.html?id=30de8da907d240a0bccd5ad3ff25ef4a#overview - Shaunak

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');

您可以用 Leaflet 示例中提到的其他地图 id 之一替换 4f4843d99c34436f82920932317893ae 以获取其他地图。

您也可以尝试修改该代码 - 我已经在 CodePen 上创建了一个示例：https://codepen.io/ahocevar/pen/xLaBVV。

- ahocevar

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

- hoogw