从盒模型到画布：以mapbox为例

一、 Marker

1. 组件做了一件非常有技术含量的事：它把经纬度转换成了像素。

1. 转换过程 ：Mapbox 内部有一套数学算法（投影矩阵）。它会实时监测地图的中心点、缩放级别和旋转角度，计算出： "经纬度 (114.3, 30.5) 现在对应屏幕上的第 500 像素（左）和第 300 像素（上）" 。

2. 设置容器：Marker 组件本质上会在地图容器里创建一个 div，并给这个 div 设置如下样式：

   CSS
   /* Marker 组件自动生成的样式（简化版） */
   position: absolute;
   left: 0;
   top: 0;
   transform: translate(500px, 300px); /* 这就是它计算出来的屏幕位置 */

   所以，Marker 就是那个负责"把坑占好"的人。

---

2. 内部 UI 是怎么知道放在哪里的？

一旦 Marker 帮你占好了那个地理点位，它内部的 UI 就可以像在普通网页里一样，使用你熟悉的相对定位和绝对定位了。

看看这里的嵌套结构：

HTML
<Marker longitude={...} latitude={...}>
  <!-- 第一层：相对定位容器 -->
  <div className="relative"> 
    
    <!-- 第二层：绝对定位的标签 (气泡) -->
    <div className="absolute bottom-full ..."> 1.25 km </div>
    <!-- 第三层：普通流体布局的红点 -->
    <div className="size-3 rounded-full bg-red-500 ..." />
  </div>
</Marker>

这里的逻辑链条是这样的：

1. 外层 Marker：负责把整个组件"钉"在地图的某个经纬度上。

2. 中间 relative 容器 ：它现在就处在那个经纬度所在的像素点上。它成为了内部所有绝对定位元素 "参考原点"。

3. 内层 absolute 标签：

   • 因为它在 relative 里面，所以它的 bottom-full（即 bottom: 100%）意思就是： "把我放在我的参考原点（也就是红点）的正上方" 。
   • 不管地图怎么动，Marker 都会带着这个 relative 容器跑，而内部的绝对定位标签也会永远死死跟着这个容器跑。

---

3. 总结

你可以这样理解这种分工：

• Marker（经纬度 -> 像素） ：它是 "空间传送门"。它负责处理复杂的地理计算，把一个 HTML 容器从现实世界的经纬度，准确地传送到屏幕上对应的像素位置。
• 你的 CSS（像素 -> 像素） ：它是 "内部装修"。一旦传送门到达目的地，你就可以用标准的 absolute 和 relative 来决定红点在哪，文字在红点的上方还是左方。

如果没有 Marker：你只用 CSS 绝对定位，那你得自己写非常复杂的数学公式去算经纬度对应的像素，而且只要地图一缩放，你的 UI 就会留在原地，而地图已经跑了。

二、线 (Source/Layer)

当你提供经纬度数据给 Source 时，Mapbox 内部会发生以下过程：

1. 解析数据 ：它看到你的 LineString 有点 A 和点 B 的经纬度。
2. 坐标转换 ：它计算出点 A 和点 B 在当前屏幕上的 像素坐标 。
3. 着色渲染 (WebGL) ：它调用显卡（GPU）的指令，告诉显卡： "从像素点 (x1, y1) 到 (x2, y2) 连一条线，颜色设为紫色，线宽设为 4px" 。 这条线最终是作为 地图图层的一部分 直接渲染出来的。它不是一个 DOM 元素，你在浏览器控制台里是找不到这条线的 HTML 标签的。

现代 数字孪生 （Digital Twin）和 智慧城市 （Smart City）项目的标准做法：

1- 设计师端 (3ds Max / Blender / Maya) ：

• 设计师负责建模（比如一栋大楼）、贴图（外墙的质感）、灯光。
• 导出格式 ：设计师通常会导出一个专门为 Web 优化的 3D 文件格式，最流行的是 glTF 或 GLB （被称为"3D 界的 JPEG"）。

2- 前端展示端 (Three.js / Mapbox) ：

• 前端工程师会用到 Three.js 这种 3D 渲染引擎。
• 流程 ：
  1. 前端通过代码"加载"设计师导出的 .glb 文件。
  2. WebGL 引擎（显卡）把模型渲染到地图的指定经纬度上。
  3. 前端还可以给模型加交互（比如点击大楼变色、显示信息）。

3- 在 Mapbox 这种场景下，加载 3D 模型主要有两种方式：

• 白模（自动生成） ： Mapbox 可以根据地图数据里的"楼层高度"自动生成简单的方块建筑（比如你在一些导航软件里看到的灰色方块）。这不需要设计师，是代码自动画出来的。
• 精模（设计师制作） ： 像你说的，如果需要展示一个地标建筑（比如东方明珠），就需要设计师用 3ds Max 做好，前端通过 CustomLayer （自定义图层）把模型放进地图里。