How 3D map visualizations on iOS using Mapbox

问题

I am trying to achieve to draw this in mapbox, came across

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

but nothing helpfull

as I have the latitude and longitude, I want to draw the shape like the yellow shown below .but not sure where to start

they are doing using three.js as mentioned here

-----Update--- tried the below just able to render GEOJson in flat view, not the height.

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)

}

}

output here

[![enter image description here][3]][3]

来源：https://stackoverflow.com/questions/57524439/how-3d-map-visualizations-on-ios-using-mapbox

标签

mapkit

overlay

mapbox