显示精确大小的图标

Question

我想在我的 map 上有精确大小的图标，其中每个图标在 map 上占据以米为单位的预定义大小。 此外，这些需要在运行时进行更改，因此无法提前生成覆盖整个 map 的图像。 我的用例是显示要涂漆的路面标记，所以 3 平方米可能是显示的最大的东西。 通过将icon-rotation-alignment设置为map可以轻松匹配旋转和俯仰，留下大小问题。 我可以通过interpolate缩放icon-size （ ['interpolate', ['exponential', 2], ['zoom'], 15, 1 / 72, 22, 1 / 0.56] ），但我然后会遇到墨卡托投影的纬度差异问题。 但是，可能可以根据缩放和当前纬度进行插值。

或者，一些看起来正在执行对齐真实世界大小的类似任务的演示是Add a 3D model ，添加 canvas 源代码，添加一个自定义样式。 我对如何使用每个的理解：

• 添加一个 3D model：我会使用 three.js（或其他渲染器）并将其设置为每个符号的位置和图像，然后使用它来绘制。
• 添加一个 canvas 源：要么创建一个非常大的 canvas（可能会使用太多 RAM），要么为每个符号创建一个 canvas（开销？），然后绘制符号
• 添加图像：相同的决定，但使用 URL 而不是画布

其中哪一个是最好的选择？

Answer 1

您可以使用 mapbox 中的栅格图层轻松完成此操作，但您需要使用考虑纬度的转换来计算图像 4 个角的长度（以米为单位）。

如果您想添加精确米大小的图像（考虑纬度）的其他选项，只需使用最新版本的threebox进行检查

您将能够加载任何图像（以及任何 3D 模型）并以米为单位（实际上是毫米）定义其大小，只需几行代码，但使用 threejs 插件执行纯 2D 任务可能就像打鱼一样在一个桶里。