Compose Maps中如何为Polyline添加箭头并保持地图流畅？

问题背景 #

需要为地图Polyline每15步添加一个箭头，现有两段代码：

• 无箭头但流畅的代码：

if (mapState.lineSteps.isNotEmpty()) {
    val polylinePoints = remember { mapState.lineSteps.map { LatLng(it.lat, it.lon) } }
    Polyline(
        points = polylinePoints
    )
}

• 有箭头但卡顿的代码（拆分大量小Polyline导致地图卡顿、相机移动滞后）：

val arrowBitmapDescriptor: BitmapDescriptor by remember { mutableStateOf(BitmapDescriptorFactory.fromResource(R.drawable.arrow)) }
var numberOfArrows: Int = mapState.busStops.size / 3
if (numberOfArrows > 15) numberOfArrows = 15
val stepsBetweenArrows: Int = mapState.lineSteps.size / numberOfArrows
var stepsToNextArrow = 0

var currentPos: LatLng
var previousPos: LatLng = LatLng(mapState.lineSteps[0].lat, mapState.lineSteps[0].lon)

for (step in mapState.lineSteps) {
    currentPos = LatLng(step.lat, step.lon)

    if (stepsToNextArrow >= stepsBetweenArrows) {
        Polyline(
            points = listOf(previousPos, currentPos),
            startCap = RoundCap(),
            endCap = CustomCap(arrowBitmapDescriptor, 30f),
            color = Color(0xff0e71b8),
            width = 7f,
            jointType = JointType.ROUND,
            geodesic = true
        )
        stepsToNextArrow = 0
    } else {
        Polyline(
            points = listOf(previousPos, currentPos),
            color = Color(0xff0e71b8),
            width = 7f,
            jointType = JointType.ROUND,
            geodesic = true
        )
    }
    stepsToNextArrow++

    previousPos = currentPos
}

卡顿原因分析 #

卡顿的核心问题是将整条折线拆分成了数百个独立的Polyline组件，每个组件都需要地图单独处理绘制逻辑，同时Compose会频繁触发重组，导致地图渲染性能暴跌，相机操作出现滞后。

优化方案：主折线+箭头Marker #

保留完整的主Polyline保证流畅性，只在需要的位置添加独立的箭头Marker（数量最多15个），这种方式性能开销极小，不会影响地图流畅度。

具体实现代码 #

if (mapState.lineSteps.isNotEmpty()) {
    // 1. 绘制完整的主Polyline（保持流畅）
    val polylinePoints = remember { mapState.lineSteps.map { LatLng(it.lat, it.lon) } }
    Polyline(
        points = polylinePoints,
        color = Color(0xff0e71b8),
        width = 7f,
        jointType = JointType.ROUND,
        geodesic = true
    )

    // 2. 计算箭头位置和方向
    val arrowBitmapDescriptor = remember { BitmapDescriptorFactory.fromResource(R.drawable.arrow) }
    val numberOfArrows = min(mapState.busStops.size / 3, 15)
    val stepsBetweenArrows = mapState.lineSteps.size / numberOfArrows

    // 生成需要放置箭头的索引
    val arrowIndices = remember(numberOfArrows, stepsBetweenArrows) {
        (1..numberOfArrows).map { it * stepsBetweenArrows }.filter { it < mapState.lineSteps.size }
    }

    // 3. 绘制箭头Marker
    arrowIndices.forEach { index ->
        val currentStep = mapState.lineSteps[index]
        val currentLatLng = LatLng(currentStep.lat, currentStep.lon)
        
        // 计算箭头方向：根据当前点和下一个点的坐标计算旋转角度
        val nextStep = mapState.lineSteps.getOrNull(index + 1) ?: mapState.lineSteps[index - 1]
        val nextLatLng = LatLng(nextStep.lat, nextStep.lon)
        val rotation = calculateRotation(currentLatLng, nextLatLng)

        Marker(
            position = currentLatLng,
            icon = arrowBitmapDescriptor,
            rotation = rotation,
            anchor = Offset(0.5f, 0.5f) // 让箭头中心对准点位
        )
    }
}

// 辅助函数：计算两点之间的旋转角度（适配地图坐标系）
fun calculateRotation(from: LatLng, to: LatLng): Float {
    val deltaLon = to.longitude - from.longitude
    val deltaLat = to.latitude - from.latitude
    val angle = Math.atan2(deltaLon, deltaLat) * (180 / Math.PI)
    return angle.toFloat()
}

方案优势 #

• 主折线保持单个Polyline组件，渲染性能和原流畅代码一致
• 箭头仅用少量Marker实现，不会增加过多渲染开销
• 箭头方向通过计算前后点坐标自动适配折线走向

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