mapbox-gl-js无法绘制半径大于6000KM圆形的问题咨询

基础信息 #

• mapbox-gl-js版本：最新版
• 适用浏览器：全浏览器

复现步骤 #

1. 打开对应演示项目
2. 将圆形半径设置为6000km以上，本次测试设置参数为11000km
3. 将地图缩放级别调整为2

预期表现 #

• 地图上正常绘制符合参数设定的完整圆形

实际表现 #

• 圆形绘制功能异常，无法正常展示和设定半径匹配的图形

问题原因 #

该异常由Web墨卡托投影的固有特性导致：Web墨卡托投影仅支持纬度在±85.051129°范围内的坐标正常渲染，当圆形半径超过6000km时，部分边缘坐标会超出这个纬度范围，低缩放级别下就会出现绘制缺失、变形的问题。

修复方案 #

• 坐标范围校验：生成圆形顶点的时候，自动校验每个顶点的纬度是否超出±85.051129°的范围，对超出的点做截断处理，对齐到投影边界
• 改用专业地理计算库生成圆形：不要使用平面坐标计算圆形，改用@turf/circle这类地理空间计算库生成圆形要素，默认会处理投影边界的适配问题
• 超大半径场景适配：如果确实需要绘制超过6000km的超大范围圆形，可以切换为等距方位投影绘制，避免墨卡托投影的边界限制

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