如何将MapLibre的矢量数据源添加代码转换为OpenLayers版本

你给出的 MapLibre 代码功能是添加一个矢量切片数据源，对应的 OpenLayers 实现如下：

// 若使用npm包引入方式，需要先导入对应依赖
// import VectorTileSource from 'ol/source/VectorTile.js';
// import MVT from 'ol/format/MVT.js';
// import VectorTileLayer from 'ol/layer/VectorTile.js';

// 矢量切片数据源实例，对应原MapLibre的source配置
const vectorSource = new VectorTileSource({
  format: new MVT(), // MapLibre默认使用MVT格式矢量切片，OpenLayers需要显式指定
  urls: ['url'], // 对应原配置的tiles字段
  minZoom: 6, // 对应原配置的minzoom
  maxZoom: 14 // 对应原配置的maxzoom
});

// OpenLayers中数据源需要绑定到图层后再添加到地图
const vectorLayer = new VectorTileLayer({
  source: vectorSource
});
map.addLayer(vectorLayer);

补充说明：两者的数据源管理逻辑存在差异，MapLibre是先注册全局数据源，再给多个图层绑定同一个数据源ID；OpenLayers是直接将数据源实例绑定到对应图层，多个图层需要共用数据源时直接复用vectorSource实例即可。

内容的提问来源于stack exchange，提问作者Vitor Venancio