Swift开发：如何在MapBox的MGLPolygon上添加质心处始终可见的文本标签

Hey Alex, I’ve tackled exactly this requirement before with MapBox in Swift—here’s a complete, step-by-step solution that should get your polygon centroid labels working perfectly and staying visible at all times:

1. Build a Custom Annotation View (UILabel-Style) #

First, we’ll create a custom MGLAnnotationView that wraps a UILabel—this gives us the familiar label behavior while integrating seamlessly with MapBox’s annotation system:

import Mapbox

class CentroidLabelAnnotationView: MGLAnnotationView {
    private let label: UILabel = {
        let label = UILabel()
        label.backgroundColor = UIColor.white.withAlphaComponent(0.8)
        label.textColor = .black
        label.font = UIFont.systemFont(ofSize: 14, weight: .medium)
        label.textAlignment = .center
        label.layer.cornerRadius = 4
        label.clipsToBounds = true
        label.numberOfLines = 0 // Allow multi-line text if needed
        return label
    }()
    
    override init(annotation: MGLAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        setupLabelConstraints()
        // Critical: Keep label size fixed regardless of map zoom
        scalesWithViewingDistance = false
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupLabelConstraints() {
        addSubview(label)
        label.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            label.topAnchor.constraint(equalTo: topAnchor, constant: 2),
            label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 4),
            label.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -4),
            label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -2)
        ])
    }
    
    // Update label text and resize view to fit content
    func setLabelText(_ text: String) {
        label.text = text
        sizeToFit()
    }
}

2. Create a Centroid Annotation Model #

We’ll make a custom MGLPointAnnotation subclass to store both the centroid coordinate and the text we want to display:

class CentroidAnnotation: MGLPointAnnotation {
    var labelText: String = ""
}

3. Calculate Centroid & Add Annotation to Map #

Use your existing centroid calculation code (I’ve included a standard implementation below as a fallback) to get the polygon’s center, then create and add the annotation to your map:

// Call this method after you've created your MGLPolygon
func addCentroidLabel(to polygon: MGLPolygon, displayText: String) {
    // Get centroid coordinate (replace with your existing calculation if needed)
    let centroidCoord = calculatePolygonCentroid(polygon: polygon)
    
    // Create and configure the centroid annotation
    let centroidAnnotation = CentroidAnnotation()
    centroidAnnotation.coordinate = centroidCoord
    centroidAnnotation.labelText = displayText
    
    // Add to your MapBox map view
    mapView.addAnnotation(centroidAnnotation)
}

// Standard polygon centroid calculation (replace with your code if you have a better one)
private func calculatePolygonCentroid(polygon: MGLPolygon) -> CLLocationCoordinate2D {
    var xSum: Double = 0
    var ySum: Double = 0
    var area: Double = 0
    let coordinates = polygon.coordinates
    let pointCount = polygon.pointCount
    
    for i in 0..<pointCount {
        let j = (i + 1) % pointCount
        let xi = coordinates[i].longitude
        let yi = coordinates[i].latitude
        let xj = coordinates[j].longitude
        let yj = coordinates[j].latitude
        
        let crossProduct = (xi * yj) - (xj * yi)
        area += crossProduct
        xSum += (xi + xj) * crossProduct
        ySum += (yi + yj) * crossProduct
    }
    
    area *= 0.5
    let centroidX = xSum / (6 * area)
    let centroidY = ySum / (6 * area)
    
    return CLLocationCoordinate2D(latitude: centroidY, longitude: centroidX)
}

4. Hook Up the Annotation View via Map Delegate #

Implement the MGLMapViewDelegate methods to return our custom label view when the map requests an annotation view:

extension YourViewController: MGLMapViewDelegate {
    func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
        // Only handle our custom CentroidAnnotation instances
        guard let centroidAnnotation = annotation as? CentroidAnnotation else {
            return nil
        }
        
        let reuseID = "CentroidLabel"
        // Reuse existing views if available for better performance
        var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: reuseID) as? CentroidLabelAnnotationView
        
        if annotationView == nil {
            annotationView = CentroidLabelAnnotationView(annotation: centroidAnnotation, reuseIdentifier: reuseID)
        } else {
            annotationView?.annotation = centroidAnnotation
        }
        
        // Update the label text
        annotationView?.setLabelText(centroidAnnotation.labelText)
        
        return annotationView
    }
    
    // Optional: Ensure labels stay above other map content
    func mapView(_ mapView: MGLMapView, didAdd annotationViews: [MGLAnnotationView]) {
        for view in annotationViews {
            if view is CentroidLabelAnnotationView {
                mapView.bringSubviewToFront(view)
            }
        }
    }
}

Key Notes for Always-Visible Labels #

• scalesWithViewingDistance = false: This property ensures your label stays at a fixed size no matter how much the user zooms in or out—critical for keeping it visible and readable.
• Label Styling: Tweak the UILabel properties in CentroidLabelAnnotationView to match your app’s design (change background color, font, corner radius, etc.).
• Annotation Reuse: Using the reuse identifier helps with performance if you’re adding multiple polygon labels to the map.

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