スクロールズーム（scrollZoom）とドラッグ移動（dragPan）を無効にするパラメーターを
コンストラクタにオプションとして渡すと、マウス操作やタッチ操作で地図を動かせなくなる

https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters
https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/

const map = new mapbox.Map({
  container: 'map',
  scrollZoom: false,
  dragPan: false,
  accessToken: 'YOUR ACCESS TOKEN'
})

このままだと、地図移動が出来なくなるので Google Map と同じように2本指でタッチ操作できるようにするためにイベントハンドラを設定する

TouchEvent にアクセスするために originalEvent を使い touches.length で指の本数を判定
タッチ操作開始時に dragPan を有効化し、タッチ操作終了時に無効化する

https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent#originalevent
https://developer.mozilla.org/ja/docs/Web/API/TouchEvent/touches

map.on('touchstart', (ev) => {
  if (ev.originalEvent.touches.length === 2) {
    map.dragPan.enable()
  }
})
map.on('touchend', () => {
  if (map.dragPan.isEnabled()) map.dragPan.disable()
})

PC向けに特定キー（CmdやCtrl）を押している場合にマウス操作できるようにするためにイベントハンドラを設定する
※ Windows 環境で未検証

map.on('mousedown', (ev) => {
  if (ev.originalEvent.metaKey || ev.originalEvent.ctrlKey) {
    map.dragPan.enable()
  }
})
map.on('mouseup', () => {
  if (map.dragPan.isEnabled()) map.dragPan.disable()
})

mouseleave や mouseout も設定しないといけない気がする