注意Openlayer的版本

Openlayer是支持直接加载矢量图层的，如下

Openlayer加载mapboxgl矢量图层_html


图层会没有样式渲染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers with Mapbox GL Vector Tile Example</title>
    <link href="https://cdn.jsdelivr.net/npm/ol@9.0.0/ol.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/ol@9.0.0/dist/ol.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.VectorTile({
                    source: new ol.source.VectorTile({
                        format: new ol.format.MVT(),
                        url: 'https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.vector.pbf?access_token=YOUR_MAPBOX_ACCESS_TOKEN',
                        attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                    })
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([113, 23]),
                zoom: 5
            })
        });
    </script>
</body>

</html>

还需要搭配mapbox的style样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers Map Example</title>
    <link href="https://cdn.jsdelivr.net/npm/ol@9.0.0/ol.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/ol@9.0.0/dist/ol.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
    <script>
        const center = [113, 23];
        mapboxgl.accessToken = "yourToken";
        const mbMap = new mapboxgl.Map({
            style: "mapbox://styles/mapbox/streets-v11",
            attributionControl: false,
            boxZoom: false,
            container: 'map',
            doubleClickZoom: false,
            dragPan: false,
            dragRotate: false,
            interactive: false,
            keyboard: false,
            pitchWithRotate: false,
            scrollZoom: false,
            touchZoomRotate: false
        });
        const mbLayer = new ol.layer.Layer({
            render: function (frameState) {
                const canvas = mbMap.getCanvas();
                const viewState = frameState.viewState;
                canvas.style.position = 'absolute'
                // 层级顺序控制待完善
                canvas.style.zIndex = 999
                const rotation = viewState.rotation;
                mbMap.jumpTo({
                    center: ol.proj.toLonLat(viewState.center),
                    zoom: viewState.zoom - 1,
                    bearing: (-rotation * 180) / Math.PI,
                    animate: false,
                });
                if (mbMap._frame) {
                    mbMap._frame.cancel();
                    mbMap._frame = null;
                }
                mbMap._render();

                return canvas;
            },
            source: new ol.source.Source({
                attributions: [
                    '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a>',
                    '<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
                ],
            }),
        });

        const map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: ol.proj.fromLonLat(center),
                zoom: 3,
            }),
            layers: [mbLayer],
        });
    </script>
</body>

</html>