如何使用Mapbox在iOS上实现3D地图可视化

Question

我正在尝试实现在mapbox中绘制这个，偶然遇到

https://docs.mapbox.com/ios/maps/examples/extrusions/

但没有什么有帮助的

因为我有纬度和经度，所以我想绘制如下所示的黄色形状，.but不确定从哪里开始

他们正在使用前面提到的here中的three.js

​

-更新-尝试了下面的只能够在平面视图中渲染GEOJson，而不是高度。

import UIKit
import Mapbox

class SignUpAccount: UIViewController, MGLMapViewDelegate {

var mapView: MGLMapView!

override func viewDidLoad() {
    super.viewDidLoad()

    mapView = MGLMapView(frame: view.bounds)
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    mapView.setCenter(
        CLLocationCoordinate2D(latitude: 41.866282, longitude: -87.618312),
        zoomLevel: 11,
        animated: false)
    view.addSubview(mapView)

    mapView.delegate = self
}

func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {

    loadGeoJson()
}
func loadGeoJson() {
    DispatchQueue.global().async {
        // Get the path for example.geojson in the app’s bundle.
        guard let jsonUrl = Bundle.main.url(forResource: "example", withExtension: "geojson") else {
            preconditionFailure("Failed to load local GeoJSON file")
        }

        guard let jsonData = try? Data(contentsOf: jsonUrl) else {
            preconditionFailure("Failed to parse GeoJSON file")
        }

        DispatchQueue.main.async {
            self.drawPolyline(geoJson: jsonData)
        }
    }
}

func drawPolyline(geoJson: Data) {
    // Add our GeoJSON data to the map as an MGLGeoJSONSource.
    // We can then reference this data from an MGLStyleLayer.

    // MGLMapView.style is optional, so you must guard against it not being set.
    guard let style = self.mapView.style else { return }

    guard let shapeFromGeoJSON = try? MGLShape(data: geoJson, encoding: String.Encoding.utf8.rawValue) else {
        fatalError("Could not generate MGLShape")
    }

    let source = MGLShapeSource(identifier: "polyline", shape: shapeFromGeoJSON, options: nil)
    style.addSource(source)


    // Create new layer for the line.
    let layer = MGLLineStyleLayer(identifier: "polyline", source: source)

    // Set the line join and cap to a rounded end.
    layer.lineJoin = NSExpression(forConstantValue: "round")
    layer.lineCap = NSExpression(forConstantValue: "round")

    // Set the line color to a constant blue color.
    layer.lineColor = NSExpression(forConstantValue: UIColor(red: 59/255, green: 178/255, blue: 208/255, alpha: 1))

    // Use `NSExpression` to smoothly adjust the line width from 2pt to 20pt between zoom levels 14 and 18. The `interpolationBase` parameter allows the values to interpolate along an exponential curve.
    layer.lineWidth = NSExpression(format: "mgl_interpolate:withCurveType:parameters:stops:($zoomLevel, 'linear', nil, %@)",
                                   [20: 2, 18: 5])

    //style.addLayer(layer)



    let upperlayer = MGLFillExtrusionStyleLayer(identifier: "buildings", source: source)
    upperlayer.sourceLayerIdentifier = "building"

    // Filter out buildings that should not extrude.
    upperlayer.predicate = NSPredicate(format: "extrude == 'true'")

    // Set the fill extrusion height to the value for the building height attribute.
    upperlayer.fillExtrusionHeight = NSExpression(forConstantValue: 40.75)
    upperlayer.fillExtrusionOpacity = NSExpression(forConstantValue: 0.75)
    upperlayer.fillExtrusionColor = NSExpression(forConstantValue: UIColor.white)
    upperlayer.fillExtrusionBase  = NSExpression(forConstantValue: 0.75)


        style.addLayer(upperlayer)
        style.insertLayer(layer, below: upperlayer)

}

}

输出here

​

Answer 1

尝试不使用此行：

upperlayer.predicate = NSPredicate(format: "extrude == 'true'")

而且它是有效的。