当然可以！在Mapbox GL JS里，你完全能把3D模型当作自定义标记来用，目前主流有两种实现思路，我给你一步步讲清楚：

方法一：结合Three.js实现真正的3D模型标记（推荐用于复杂模型） #

这是最常用的方案，Mapbox GL JS支持和Three.js集成，能完美渲染glTF格式的3D模型（WebGL生态里最通用的3D格式）。

步骤拆解： #

1. 准备3D模型：用Blender等工具制作或导出模型为.gltf/.glb格式，这类格式体积小、加载快，Three.js对它的支持也最完善。
2. 引入依赖：需要同时引入Mapbox GL JS和Three.js，以及Three.js的GLTFLoader（用于加载glTF模型）。
3. 创建自定义图层：通过Mapbox的addLayer方法添加自定义3D图层，在图层的渲染回调里用Three.js处理模型的加载和渲染。

代码示例： #

// 初始化Mapbox地图
mapboxgl.accessToken = '你的Mapbox Access Token';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [116.3974, 39.9042], // 示例坐标：北京天安门
  zoom: 16,
  pitch: 60, // 开启倾斜视角，更直观展示3D模型
  bearing: -17.6
});

// 等待地图加载完成后执行
map.on('load', () => {
  const THREE = window.THREE;
  const { GLTFLoader } = THREE;

  // 初始化Three.js核心对象
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera();
  const renderer = new THREE.WebGLRenderer({
    alpha: true, // 透明背景，和Mapbox地图融合
    antialias: true // 抗锯齿，提升模型清晰度
  });
  renderer.setPixelRatio(window.devicePixelRatio);

  // 加载3D模型
  let model;
  const loader = new GLTFLoader();
  loader.load('path/to/your/model.glb', (gltf) => {
    model = gltf.scene;
    model.scale.set(5, 5, 5); // 根据地图比例尺调整模型大小
    scene.add(model);
  });

  // 向Mapbox添加自定义3D图层
  map.addLayer({
    id: 'custom-3d-model',
    type: 'custom',
    renderingMode: '3d',
    onAdd: (map, gl) => {
      renderer.setContext(gl);
      camera.matrixAutoUpdate = false; // 禁用Three.js自动更新相机，改用Mapbox的矩阵
    },
    render: (gl, matrix) => {
      // 将Mapbox的相机矩阵转换为Three.js可识别的格式
      camera.projectionMatrix.fromArray(matrix);

      // 设置模型在地图上的位置（转换经纬度为Mapbox墨卡托坐标）
      if (model) {
        const coords = mapboxgl.MercatorCoordinate.fromLngLat(
          [116.3974, 39.9042],
          0 // 模型高度，可根据需要调整
        );
        model.position.set(coords.x, coords.y, coords.z);
        model.updateMatrix();
      }

      renderer.render(scene, camera);
      map.triggerRepaint(); // 触发Mapbox重绘，保证模型和地图同步
    }
  });
});

方法二：用CSS 3D变换实现伪3D标记（适合简单场景） #

如果你的需求只是简单的立体效果，不需要复杂的3D模型交互，可以用Mapbox原生的Marker结合CSS 3D变换来实现，成本更低。

代码示例： #

map.on('load', () => {
  // 创建自定义DOM元素作为标记
  const markerEl = document.createElement('div');
  markerEl.style.width = '60px';
  markerEl.style.height = '60px';
  markerEl.style.backgroundImage = 'url(your-3d-icon.png)';
  markerEl.style.backgroundSize = 'cover';
  // 添加CSS 3D变换，模拟立体效果
  markerEl.style.transform = 'rotateX(30deg) rotateY(0deg)';
  markerEl.style.transformStyle = 'preserve-3d';
  markerEl.style.boxShadow = '0 5px 15px rgba(0,0,0,0.3)'; // 阴影增强立体感

  // 创建Marker并添加到地图
  new mapboxgl.Marker(markerEl)
    .setLngLat([116.3974, 39.9042])
    .addTo(map);
});

注意事项： #

1. 模型适配：Mapbox使用墨卡托投影，需要用MercatorCoordinate将经纬度转换为世界坐标，再调整模型的scale参数适配地图比例尺。
2. 性能优化：如果加载大量3D模型，建议合并模型面数、使用轻量化的glb格式，避免过多的渲染开销。
3. 视角设置：记得开启地图的pitch（倾斜角），否则3D模型会看起来和平面标记一样。

内容的提问来源于stack exchange，提问作者Anton Piliak