基于缩放级别与俯仰角调整Mapbox图标大小的技术求助

背景 #

我是Mapbox新手。地图里的建筑物等对象会跟着缩放级别和俯仰角改变大小，但常规图标大小固定，图标多的时候很难分辨。所以我想实现图标和地图对象同步缩放的效果。

当前实现情况 #

我先学习了对象显示随缩放级别变化的计算方法，成功让图标跟着缩放级别缩放：

// calculate resolution
const metersPerPixel = getMetersPerPixel(viewport.zoom, lat);

const heightPixels = heightMeters / metersPerPixel;
const widthPixels = widthMeters / metersPerPixel;

但调整视角俯仰角（之前设为0）后，图标和地图对象的大小又出现了偏差。我尝试把俯仰角带来的视角与图标位置的距离纳入图标大小计算，但效果不好：

// calculate resolution
const metersPerPixel = getMetersPerPixel(viewport.zoom, lat);

// distance between viewpoint and icon
const cameraFloorCoord = getCameraFloorCoord(viewport.zoom, viewport.pitch, viewport.bearing, viewport.latitude, viewport.longitude);
const distanceFactor = getDistance({latitude: lat, longitude: long}, cameraFloorCoord) / 1000;

// add distance values to resolution
const metersPerPixelCorrected = metersPerPixel + distanceFactor;

const heightPixels = heightMeters / metersPerPixelCorrected;
const widthPixels = widthMeters / metersPerPixelCorrected;

问题 #

1. 怎么解决这个问题？有没有相关参考资料？
2. 我想实现的这个需求是不是比较少见？

如果这个需求很难实现，我考虑改用栅格图层显示图标。

内容的提问来源于stack exchange，提问作者秋山諒次郎