Applying JSON style from URL to Vector in OpenLayers

Question

Can the style be a URL in OpenLayers?

var layer_offline = new ol.layer.VectorTile({
    declutter: true,
    source: new ol.source.VectorTile({
      format: new ol.format.MVT(),
      url: 'http://localhost/tile?z={z}&x={x}&y={y}'
    }),
    style: ???? // <--- This one I would need to load a JSON file
});

Answer 1

The easiest way to do this is to use the ol-mapbox-style plugin. It has an API that allows you to use Mapbox Style JSONs as style for a specific layer (like in your snippet), but it also allows you to create a whole map from a Mapbox Style document.

What you want is probably something along these lines:

var layer_offline = new ol.layer.VectorTile({
  declutter: true,
  source: new ol.source.VectorTile({
    format: new ol.format.MVT(),
    url: 'http://localhost/tile?z={z}&x={x}&y={y}'
  })
});
layer_offline.setStyle(olms.stylefunction(layer_offline, style_json, 'mysource');

where layer_offline is the Mapbox Style JSON, and mysource is the id of the source from that style JSON you want to render.