SOURCE

mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-zh-v1',
    center: [116.40355, 39.91737],
    zoom: 11
});

const data = {
    "type": "Feature",
    "properties": {
        "name": "point_02"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [
            116.39139175415039,
            39.91256716517021
        ]
    }
}

map.on('load', () => {
  map.addSource('points', {
    type: 'geojson',
    data: data
  })
  map.addLayer({
    id: 'points',
    type: 'circle',
    source: 'points',
    paint: {
      'circle-color': 'red',
      'circle-radius': 8,
      'circle-stroke-width': 2,
      'circle-stroke-color': '#fff'
    }
  });
  // 设置中心点
  map.setCenter(data.geometry.coordinates)
})

// 根据像素值平移中心点
const offsetCenterByPx = (px) => {
  const center = data.geometry.coordinates
  const originPoint = map.project(center)
  const {x, y} = originPoint
  const newCenter = map.unproject({
      x: x + px,
      y
  })
  map.flyTo({
      center: newCenter
  })
}

<div id='map'></div>
<div class="button-wrapper">
    <button onclick="offsetCenterByPx(200)">偏移200像素</button>
</div>

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}
.button-wrapper {
    position: absolute;
    left:20px;
    top:20px;
}