如何在react-native-map的两个标记点之间绘制弧线？

确实，<Polyline/> 默认只能渲染直线，<Circle/> 又只能画完整的圆形，没法直接实现两点间的弧线效果。不过我们可以通过计算弧线路径上的一系列连续坐标点，再用 <Polyline/> 连接这些点来模拟出平滑的弧线，这是目前最实用的解决方案。

核心思路 #

弧线本质是由无数个短直线段拼接而成的，只要我们能生成两点之间足够多的中间坐标点，<Polyline/> 就能渲染出视觉上平滑的弧线。这里我们可以基于**大圆航线（Great Circle）**的原理来计算这些点——这是地球表面两点间最短的曲线，完全适配地图场景的弧线需求。

具体实现步骤 #

1. 编写弧线坐标生成函数：
   这个函数接收起点、终点的经纬度，以及控制平滑度的点数参数，返回一组构成弧线的坐标数组。

   示例代码：

   // 弧度与角度互转工具函数
   const radToDeg = (rad) => rad * 180 / Math.PI;
   const degToRad = (deg) => deg * Math.PI / 180;
   
   // 生成两点间的弧线坐标点数组
   const generateArcPoints = (start, end, numPoints = 50) => {
     const startLat = degToRad(start.latitude);
     const startLng = degToRad(start.longitude);
     const endLat = degToRad(end.latitude);
     const endLng = degToRad(end.longitude);
   
     // 计算大圆航线的核心参数
     const centralAngle = 2 * Math.asin(
       Math.sqrt(
         Math.pow(Math.sin((startLat - endLat) / 2), 2) +
         Math.cos(startLat) * Math.cos(endLat) * Math.pow(Math.sin((startLng - endLng) / 2), 2)
       )
     );
     const arcPoints = [];
   
     // 按比例生成中间点
     for (let i = 0; i <= numPoints; i++) {
       const fraction = i / numPoints;
       const weightStart = Math.sin((1 - fraction) * centralAngle) / Math.sin(centralAngle);
       const weightEnd = Math.sin(fraction * centralAngle) / Math.sin(centralAngle);
   
       // 计算三维坐标再转经纬度
       const x = weightStart * Math.cos(startLat) * Math.cos(startLng) + weightEnd * Math.cos(endLat) * Math.cos(endLng);
       const y = weightStart * Math.cos(startLat) * Math.sin(startLng) + weightEnd * Math.cos(endLat) * Math.sin(endLng);
       const z = weightStart * Math.sin(startLat) + weightEnd * Math.sin(endLat);
   
       const lat = radToDeg(Math.atan2(z, Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))));
       const lng = radToDeg(Math.atan2(y, x));
   
       arcPoints.push({ latitude: lat, longitude: lng });
     }
   
     return arcPoints;
   };
   

2. 在组件中渲染弧线：
   调用函数生成坐标数组后，直接传给 <Polyline/> 的 coordinates 属性，再通过样式属性调整弧线的外观。

   示例组件代码：

   import React from 'react';
   import { MapView, Polyline, Marker } from 'react-native-maps';
   
   const ArcMap = () => {
     // 定义起点和终点标记
     const startPoint = { latitude: 37.78825, longitude: -122.4324 };
     const endPoint = { latitude: 34.0522, longitude: -118.2437 };
     // 生成弧线坐标点
     const arcPoints = generateArcPoints(startPoint, endPoint);
   
     return (
       <MapView
         style={{ flex: 1 }}
         initialRegion={{
           latitude: 36,
           longitude: -120,
           latitudeDelta: 8,
           longitudeDelta: 8,
         }}
       >
         <Marker coordinate={startPoint} title="起点" />
         <Marker coordinate={endPoint} title="终点" />
         {/* 渲染弧线 */}
         <Polyline
           coordinates={arcPoints}
           strokeColor="#ff4444"
           strokeWidth={3}
         />
       </MapView>
     );
   };
   
   export default ArcMap;
   

实用小贴士 #

• 平滑度调整：numPoints 参数控制弧线的细腻程度，数值越大弧线越平滑，但会增加少量性能消耗，50左右的数值在大多数场景下都足够。
• 自定义弧线高度：如果想要绘制非最短路径的“高弧线”，可以在计算中间点时给纬度添加一个偏移值，比如根据距离动态调整抬升高度，需要根据需求微调公式。

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