代码之家 › 专栏 › 技术社区 › Hasti Ranjkesh

使用iOS的border mapbox绘制多段线

polyline mapbox border swift

Hasti Ranjkesh · 技术社区 · 6 年前

我正在使用Mapbox iOS SDK,尝试在没有geojson的情况下绘制多段线。我试着用这种方法得到路线:

func calculateRoute() {

    ...

    let options = NavigationRouteOptions(waypoints: [origin, destination], profileIdentifier: .automobileAvoidingTraffic)
    Directions.shared.calculate(options) { (waypoints, routes, error) in 
        guard let route = routes?.first else { return }
        self.showPreview(route: route)
    }
}

然后我试图画一条路线。

func showPreview(route: Route) {

    guard let steps = route.legs.first?.steps else { return }
    var points = [CLLocationCoordinate2D]()
    for step in steps {
        points.append(step.maneuverLocation)
    }
    let line = MGLPolyline(coordinates: &points, count: UInt(points.count))
    mapView?.addAnnotation(line)
}

它在地图视图上绘制多段线。我可以使用两个委托方法(mglapviewDelegate)更改多段线的颜色和宽度:

func mapView(_ mapView: MGLMapView, lineWidthForPolylineAnnotation annotation: MGLPolyline) -> CGFloat {
    return 10
}

func mapView(_ mapView: MGLMapView, strokeColorForShapeAnnotation annotation: MGLShape) -> UIColor {
    return .blue
}

但是我找不到一种方法来设置多段线周围的边框宽度和边框颜色。有什么办法吗?

1 回复 | 直到 6 年前

Magnas 6 年前

看起来我有一个与您类似的用例(即不使用geojson),最终得到了类似的结果。将您的路线与 MGLLineStyleLayer 可以控制线条的视觉参数。

func showPreview(route: Route) {
    guard route.coordinateCount > 0 else { return }
    // Convert the routeâs coordinates into a polyline
    var routeCoordinates = route.coordinates!
    let polyline = MGLPolylineFeature(coordinates: &routeCoordinates, count: route.coordinateCount)

    // If there's already a route line on the map, reset its shape to the new route
    if let source = mapView.style?.source(withIdentifier: "route-source") as? MGLShapeSource {
        source.shape = polyline
    } else {
        let source = MGLShapeSource(identifier: "route-source", features: [polyline], options: nil)

        // Customize the route line color and width
        let lineStyle = MGLLineStyleLayer(identifier: "route-style", source: source)
        lineStyle.lineColor = NSExpression(forConstantValue: UIColor.blue)
        lineStyle.lineWidth = NSExpression(forConstantValue: 3)

        // Add the source and style layer of the route line to the map
        mapView.style?.addSource(source)
        mapView.style?.addLayer(lineStyle)
    }
}

您要添加边框并控制边框的外观。如果您在Mapbox网站上查看此示例: Line style Example 他们通过创造一秒钟来做你想做的事 mglinestylelayer公司 把它插在第一个的下面。他们称第二层 casingLayer . 这是它们的代码,因此您可以看到它的形成方式与第一层相同。

let casingLayer = MGLLineStyleLayer(identifier: "polyline-case", source: source)
    // Add your formatting attributes here. See example on website.

然后他们把它插入第一行下面,因为它有一个更宽的宽度,显示为一个边框。

style.insertLayer(casingLayer, below: lineStyle)

希望这有帮助。