Mapbox画一条跨全球的线

本文介绍在使用Mapbox绘制跨全球线时遇到的问题及解决方法,通过调整经纬度确保线条连续,避免180度分界线造成的断裂。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Mapbox画一条跨全球线时,会有一个180度的分界线

如下图所示
不只是你的背包
此时我们想要的是一条连贯的跨全球线,点的排列顺序如下

	[
					167.348333333333,
					35.535
				],
				[
					175.401666666667,
					37.1016666666667
				],
				[
					175.401666666667,
					37.1016666666667
				],
				[
					178.968333333333,
					38.0866666666667
				],
				[
					-166.736666666667,
					38.4383333333333
				],
				[
					-157.716666666667,
					38.085
				],
				[
					-148.81,
					37.2366666666667
				],

但是在此时mapbox只识别一个球的经纬度,当经度突然为负数时,没有接着往后面走,而是回到起点的地方了
当我们需要穿过第一个地球,让线接着往后面画的时候,就需要将数组里面的经度全部加360度变为正数,需要对数组做一个预处理,然后再显示

			var lstLonDiff = [];
			for (var i = 0; i < coordinates.length - 1; i++) {
				var detLon = coordinates[i + 1][0] - coordinates[i][0];
				//如果超过180度
				if (Math.abs(detLon) > 180) {
					//from east to west
					if (detLon > 0) {
						detLon -= 360;
					}
					//from west to east
					else {
						detLon += 360;
					}
				}
				lstLonDiff.push(detLon);
			}
			//如果起始点是负半球,整体向右移动360度,如果是正半球,就保持不动
			if (coordinates[0][0] < 0)
				coordinates[0][0] += 360;
			for (var i = 0; i < coordinates.length - 1; i++) {
				//从上一个点上加上经差,把航线内存数据,重新赋值
				coordinates[i + 1][0] = coordinates[i][0] + lstLonDiff[i];
			}

coordinates为数组的数据,处理完以后,显示如下:
不只是你的背包
这样就可以看出,在画完第一个球以后,接着往后面第二球接着画了

碰到此问题的人方能看懂!如有不懂,请与作者联系

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值