How to display ESRI Vector basemap in Openlayers 3

Question

I am trying to add a new ESRI Vector Basemaps in OpenLayers 3 . I got to the point of displaying a layer that was not created using the Mapbox Example change published by OpenLayers.

Obviously, I had to remove the style: createMapboxStreetsV6Style() parameter to display the esri layer. Thus, basically the map does not know the style information for the correct display of the layer.

I think this should be possible because the ESRI Port Leaflet and example do this already. I think esri style identifier information is available here. Elevator code .

OpenLayers should already be able to use all this information, since it can display a Mapbox layer. I need help how to get her to use ESRI style information.

Here is what I still have ( 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

There is a separate library https://npmjs.com/package/ol-mapbox-style , which makes it easy to use vector tile maps, including their styles in OpenLayers. He reads a style document and builds the entire map. For one of the above ESRI cards, the code to get this card in OpenLayers will be

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

You can replace 4f4843d99c34436f82920932317893ae with one of the other card identifiers listed in the leaflet example to get other cards.

You can also play with this code - I created CodePen: https://codepen.io/ahocevar/pen/xLaBVV .