个人博客，集成mapbox开发地图

一、安装 Mapbox GL

npm install mapbox-gl

在页面中引入：

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

二、初始化地图

mapboxgl.accessToken = '你的 Mapbox Token';

const map = new mapboxgl.Map({
  container: 'map', // DOM 节点 id
  style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
  center: [116.4074, 39.9042], // 北京
  zoom: 12, // 为1～2会展示地图仪效果
  attributionControl: false, // 关闭默认版权
});

三、添加中文地图支持

map.on('style.load', () => {
  const layers = map.getStyle().layers;
  for (const layer of layers) {
    if (layer.type === 'symbol' && layer.layout?.['text-field']) {
      map.setLayoutProperty(
        layer.id,
        'text-field',
        ['coalesce', ['get', 'name_zh'], ['get', 'name']]
      );
    }
  }
});

四、添加地形支持（3D 地图）

map.on('load', () => {
  map.addSource('terrain-source', {
    type: 'raster-dem',
    url: 'mapbox://mapbox.terrain-rgb',
    tileSize: 512,
    maxzoom: 14,
  });

  map.setTerrain({ source: 'terrain-source', exaggeration: 1.5 });
});

• 注意事项：
• 需要在你的 Mapbox 账户中开启 DEM 数据。
• exaggeration 超过 1 会出现“彩色斑块”时，推荐搭配 1.2 或 0.5 调整。

五、改鼠标样式，小手抓放效果

// 鼠标样式
    map.getCanvas().style.cursor = 'grab';
    map.on('mousedown', () => {
      map.getCanvas().style.cursor = 'grabbing';
    });
    map.on('mouseup', () => {
      map.getCanvas().style.cursor = 'grab';
    });
// 点击到位置
    map.on('click', (e) => {
      const { lng, lat } = e.lngLat;

      map.flyTo({
        center: [lng, lat], // 点击位置
        zoom: 6, // 想放大的级别
        speed: 1.2, // 飞行速度，默认 1.2
        curve: 1.42, // 动画曲线
        essential: true, // 用户设置 prefers-reduced-motion 时也启用动画
      });
    });

六、屏蔽 Mapbox 上报（telemetry）

Mapbox 会默认发送事件数据。关闭方法：main.js中拦截请求

window.XMLHttpRequest = class extends window.XMLHttpRequest {
  open(method, url, ...args) {
    if (url.includes('events.mapbox.com')) {
      return;
    }
    super.open(method, url, ...args);
  }
};