用Mapbox GL JS把曼哈顿渲染成游戏CG

只要把相机俯仰角(pitch)拉高，配合一个灯光预设和flyTo动画，Mapbox Standard 就能直接把一个空白的div变成类似《蝙蝠侠》里的哥谭市。这种出片速度快得离谱，基本不需要自己去搞建筑轮廓或计算挤出高度。

想快速实现这种“电影感”3D城市效果，配置极其简单，直接看这段实操代码：

const map = new mapboxgl.Map({
 accessToken: publicToken,
 container: "map",
 style: "mapbox://styles/mapbox/standard",
 center: [-74.0109, 40.7076],
 zoom: 15.4,
 pitch: 73,
 bearing: 28,
 antialias: true,
 config: {
 basemap: {
 theme: "custom",
 lightPreset: "night", // 关键：切换到深夜模式
 show3dObjects: true,
 show3dBuildings: true,
 show3dLandmarks: true,
 show3dTrees: true,
 show3dFacades: true,
 showRoadLabels: false,
 colorBuildings: "#6962d8", // 自定义建筑颜色
 colorMotorways: "#f04fc6"
 }
 }
});

折腾了一圈下来，我对这个工具的几个核心观察：

• 效率极高： Mapbox Standard 自带了3D建筑、地标模型、阴影和环境光遮蔽，省去了大量美术资源配置时间。
• 控制权的妥协： 这是一个维护好的底图，你只能在它暴露的配置项里选，没法像玩乐高一样随意拆解底图内部的每一层。
• 成本与依赖： 它是商业 SDK 而非开源，每月 5 万次加载免费，之后按量计费。如果你对“完全自主掌控”或“供应商无关”有强迫症，建议去看 MapLibre GL JS。

简单总结：如果你的地图是产品界面且需要快速出惊艳效果，选 Mapbox；如果你在构建需要深度定制、完全自托管的基础设施，得再掂量掂量。