ol-mapbox-style

import 'ol/ol.css';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJsonFormat from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import View from 'ol/View';

import stylefunction from 'ol-mapbox-style/dist/stylefunction';

const layer = new VectorLayer({
  declutter: true,
  source: new VectorSource({
    format: new GeoJsonFormat(),
    url: 'AD_Lane.geojson'
  })
});

const map = new Map({
  target: 'map',
  view: new View({
    center: [-13603186.115192635, 6785744.563386],
    zoom: 10
  })
});

fetch('admap.json')
  .then(r => r.json())
  .then((glStyle) => {
    stylefunction(layer, glStyle, 'AD_Lane_Source');
    // if (map.getLayers().getArray().indexOf(layer) === -1) {
      map.addLayer(layer);
    // }
  });

{
  "name": "admap",
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "version": 8,
  "sources": {
    "AD_Lane_Source": {
      "type": "geojson",
      "data": "AD_Lane2.geojson"
    }
  },
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "pink"
      }
    },
    {
      "id": "AD_Lane_Layer",
      "type": "line",
      "source": "AD_Lane_Source",
      "layout": {
        "line-join": "round",
        "line-cap": "round"
      },
      "paint": {
        "line-color": "red",
        "line-width": 2
      }
    }
  ]
}