Edit

Vector tiles in EPSG:4326

Example showing vector tiles in EPSG:4326 (styled using ol-mapbox-style)

Example showing vector tiles in EPSG:4326 (styled using ol-mapbox-style) loaded from maptiler.com. Note: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired.

Copy 
index.html<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vector tiles in EPSG:4326</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map" style="background:none;"></div>
    <script src="index.js"></script>
  </body>
</html>
Copy 
index.jsimport 'ol/ol.css';
import View from 'ol/View';
import MVT from 'ol/format/MVT';
import VectorTileSource from 'ol/source/VectorTile';
import TileGrid from 'ol/tilegrid/TileGrid';

import olms from 'ol-mapbox-style';
import {defaultResolutions} from 'ol-mapbox-style/util';

var key = 'Get your own API key at https://www.maptiler.com/cloud/';

// Match the server resolutions
var maxResolution = 360 / 512;
defaultResolutions.length = 14;
for (var i = 0; i < 14; ++i) {
  defaultResolutions[i] = maxResolution / Math.pow(2, i + 1);
}

olms('map', 'https://api.maptiler.com/maps/basic-4326/style.json?key=' + key).then(function(map) {

  // Custom tile grid for the EPSG:4326 projection
  var tileGrid = new TileGrid({
    extent: [-180, -90, 180, 90],
    tileSize: 512,
    resolutions: defaultResolutions
  });

  var mapboxStyle = map.get('mapbox-style');

  // Replace the source with a EPSG:4326 projection source for each vector tile layer
  map.getLayers().forEach(function(layer) {
    var mapboxSource = layer.get('mapbox-source');
    if (mapboxSource && mapboxStyle.sources[mapboxSource].type === 'vector') {
      var source = layer.getSource();
      layer.setSource(new VectorTileSource({
        format: new MVT(),
        projection: 'EPSG:4326',
        urls: source.getUrls(),
        tileGrid: tileGrid
      }));
    }
  });

  // Configure the map with a view with EPSG:4326 projection
  map.setView(new View({
    projection: 'EPSG:4326',
    zoom: mapboxStyle.zoom,
    center: mapboxStyle.center
  }));

});
Copy 
package.json{
  "name": "vector-tiles-4326",
  "dependencies": {
    "ol": "6.1.1",
    "ol-mapbox-style": "^5.0.2"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}