如何使用NSExpression设置linePattern以增大地图路线图片间距

要实现>---<---<---<这样的箭头间隔排列效果，你需要通过NSExpression(forMGLStepping:from:stops:)来定义linePattern，核心是根据线段长度动态切换图案，让箭头和空白段（或反向箭头）交替出现。

完整代码示例 #

let image = UIImage(named: "arrow.right")!
style.setImage(image, forName: "arrow.right")
// 如果需要反向箭头，添加左箭头图片资源并注册
let leftArrow = UIImage(named: "arrow.left")!
style.setImage(leftArrow, forName: "arrow.left")

let dashedLayer = MGLLineStyleLayer(identifier: "polyline-dash", source: routeSource)
dashedLayer.lineWidth = NSExpression(forConstantValue: 4)

// 定义步进表达式，实现箭头+空白+反向箭头的交替效果
dashedLayer.linePattern = NSExpression(
    forMGLStepping: NSExpression(forKeyPath: "$line-progress"),
    from: NSExpression(forConstantValue: ""),
    stops: NSExpression(forConstantValue: [
        0.0: "arrow.right",
        0.15: "",
        0.4: "arrow.left",
        0.55: "",
        0.8: "arrow.left",
        0.95: ""
    ] as [NSNumber: Any])
)

关键参数解析 #

• forMGLStepping:：传入$line-progress，这是Mapbox内置的线段进度变量，取值范围0到1，代表当前绘制点在线段上的位置比例。
• from:：设置初始绘制的图案，这里设为空字符串对应空白段，也可以根据需求改为箭头。
• stops:：是一个键值对字典，键为进度比例（0-1的小数），值为图案名称或空白：
  • 进度值的间隔决定了图案的显示长度，比如0.0到0.15之间显示右箭头，0.15到0.4之间显示空白，以此类推。
  • 若需要反向箭头，只需在对应进度位置替换为左箭头的图案名称即可。

效果微调技巧 #

• 调整stops里的进度值间隔，可以改变箭头和空白段的长度比例，比如增大空白段对应的进度范围，就能让箭头之间的虚线更长。
• 如果箭头尺寸不合适，可以通过style.setImage(_:forName:scale:)设置图片缩放比例，适配lineWidth的大小。

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