Draw a feature on vector layer and update MVT source on drawend.

OL.drawFeature.js

let drawInteraction;

let activeButton;

const btnPoly = document.getElementById('btnPoly');

btnPoly.onclick = () => drawMethod(btnPoly, 'Polygon');

const btnLine = document.getElementById('btnLine');

btnLine.onclick = () => drawMethod(btnLine, 'LineString');

const btnPoint = document.getElementById('btnPoint');

btnPoint.onclick = () => drawMethod(btnPoint, 'Point');

function drawMethod(btn, geometry) {

  if (activeButton) {
    activeButton.classList.remove('active');
    map.removeInteraction(drawInteraction);
  }

  btn.classList.add('active');

  activeButton = btn;

  map.removeInteraction(modifyInteraction);

  btnDelete.classList.remove('active');

  map.un('click', select);

  drawInteraction = new ol.interaction.Draw({
    source: sourceVector,
    type: geometry
  });

  drawInteraction.on('drawend', drawEnd);

  map.addInteraction(drawInteraction);

}

function drawEnd(e) {

  activeButton.classList.remove('active');

  const feature = JSON.parse(geoJSON.writeFeature(e.feature));

  currentFeature = e.feature;

  const xhr = new XMLHttpRequest();

  xhr.open('POST', 'https://geolytix.xyz/dev/api/location/edit/draw?locale=GB&layer=Scratch&table=dev.scratch&srid=3857');

  xhr.setRequestHeader('Content-Type', 'application/json');

  xhr.onload = e => {

    if (e.target.status !== 200) return;

    currentFeature.set('id', e.target.response);

    map.removeInteraction(drawInteraction);

    clearTileCache();

    map.on('click', select);

    map.addInteraction(modifyInteraction);

    btnDelete.classList.add('active');

  };

  xhr.send(JSON.stringify({
    geometry: feature.geometry
  }));

}