如何在OpenLayers中将外部json文件与Vectortile源中的功能结合起来？

var vectorSource = new ol.source.Vector();
var geojsonFormat = new ol.format.GeoJSON();

// 加载外部JSON文件
var xhr = new XMLHttpRequest();
xhr.open('GET', 'external.json');
xhr.onload = function() {
  if (xhr.status === 200) {
    var features = geojsonFormat.readFeatures(xhr.responseText);
    vectorSource.addFeatures(features);
  }
};
xhr.send();

// 创建矢量瓦片数据源
var vectorTileSource = new ol.source.VectorTile({
  format: new ol.format.MVT(),
  url: 'https://example.com/{z}/{x}/{y}.pbf'
});

// 创建矢量图层
var vectorLayer = new ol.layer.VectorTile({
  source: vectorTileSource,
  style: styleFunction
});

// 将外部JSON文件的矢量数据源合并到矢量图层中
vectorLayer.getSource().addFeatures(vectorSource.getFeatures());

var styleFunction = function(feature) {
  return new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.6)'
    }),
    stroke: new ol.style.Stroke({
      color: '#319FD3',
      width: 1
    })
  });
};

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});