OpenLayers(5.x)加载离线矢量图层OpenMapTiles Map Server

需求背景

某产品需要展示离线OSM地图，一般地图下载仅支持下载栅格数据，数据量非常大，因此选择矢量数据。
可在openmaptiles.com进行下载（免费版有水印）

搭建离线服务

矢量数据为mbtiles，是一种基于mysql的地图切片数据库，无法通过像栅格数据XYZ的形式直接加载，需要搭建地图服务，可以自己搭建，也可以使用TileServer GL或者OpenMapTiles Map Server，本文以OpenMapTiles Map Server为例。
按照官方文档搭建好切片服务器之后，访问默认页面
这里可以预览你生成的方案，你所搭建的服务器支持的切片种类以及服务，其中GL Style为矢量切片服务，需要加载矢量地图以及样式，其余均为栅格切片。

客户端

使用最新的Openlayers + ol-mapbox-style，openlayers为地图基础框架，ol-mapbox-style为openlayers加载maxbox矢量样式的插件，这一块查了很多资料都不够直观，也踩了一些坑，参考DEMO:Advanced Mapbox Vector Tiles-如何加载矢量图层这个demo中的样式为openlayers自己提供的方法，不适用于我们自己的搭建的服务加载样式，仅加载矢量数据效果：

这里上添加样式关键代码

import {
   apply, applyStyle} from 'ol-ma