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-mapbox-style';
import { VectorTile as VectorTileLayer } from 'ol/layer';
import { VectorTile as VectorTileSource } from 'ol/source';
import { Polyline, MVT} from 'ol/format';

var vectorLayer = new VectorTileLayer({
    source:new VectorTileSource({
        format: new MVT(),
        url: 'http://127.0.0.1:8080/data/v3/{z}/{x}/{y}.pbf'
    }),
});

fetch('http://127.0.0.1:8080/styles/osm-bright/style.json').then((response) => {
    response.json().then((glStyle) => {
        applyStyle(vectorLayer, glStyle, 'openmaptiles');
        vm.mapModel.map.addLayer(vectorLayer);
    });
});

矢量地图url模板与样式文件地址，以及applyStyle第三个参数从GL Style中读取

当然也可以通过apply方法直接添加图层，不用单独添加图层再applyStyle

import {apply, applyStyle} from 'ol-mapbox-style';
import { VectorTile as VectorTileLayer } from 'ol/layer';
import { VectorTile as VectorTileSource } from 'ol/source';
import { Polyline, MVT} from 'ol/format';

fetch('http://127.0.0.1:8080/styles/osm-bright/style.json').then((response) => {
    response.json().then((glStyle) => {
        apply(map, glStyle)//map为ol map实例，参考官方文档
    });
});