如何基于时间（滑块交互）在MKMapView中显示/隐藏夜间模式覆盖层

嘿，我刚好做过类似的时间联动昼夜地图需求，给你梳理下具体的实现步骤，亲测好用：

1. 准备美国各州的地理边界数据 #

要给每个州添加夜间覆盖层，首先得拿到精准的州地理多边形边界。你可以导入公开的美国州GeoJSON数据（网上能找到免费的），解析成MKPolygon数组；如果只是做 demo，也可以手动定义简单的边界坐标：

// 示例：加利福尼亚州的简化边界（实际替换为真实精准坐标）
let caCoordinates = [
    CLLocationCoordinate2D(latitude: 42.0095, longitude: -124.411),
    CLLocationCoordinate2D(latitude: 42.0095, longitude: -114.131),
    CLLocationCoordinate2D(latitude: 32.5342, longitude: -114.131),
    CLLocationCoordinate2D(latitude: 32.5342, longitude: -124.411)
]
let californiaPolygon = MKPolygon(coordinates: caCoordinates, count: caCoordinates.count)

2. 根据选定时间判断各州昼夜状态 #

核心是计算每个州的日出日落时间，判断滑块选中的时间是否处于夜间（日落之后到日出之前）。这里可以用CoreLocation结合日历扩展来实现，也可以用第三方库简化天文计算：

func isNight(for coordinate: CLLocationCoordinate2D, at date: Date) -> Bool {
    let location = CLLocation(latitude: coordinate.latitude, longitude: coordinate.longitude)
    let calendar = Calendar.current
    
    // 获取该位置的日出、日落时间（这里用到Calendar的自定义扩展）
    guard let sunrise = calendar.sunriseTime(for: location, date: date),
          let sunset = calendar.sunsetTime(for: location, date: date) else {
        return false // 无法计算时默认显示白天
    }
    
    // 转换为当日秒数，判断当前时间是否在夜间区间
    let currentSeconds = calendar.component(.hour, from: date)*3600 + calendar.component(.minute, from: date)*60
    let sunriseSeconds = calendar.component(.hour, from: sunrise)*3600 + calendar.component(.minute, from: sunrise)*60
    let sunsetSeconds = calendar.component(.hour, from: sunset)*3600 + calendar.component(.minute, from: sunset)*60
    
    return currentSeconds < sunriseSeconds || currentSeconds > sunsetSeconds
}

注：sunriseTime和sunsetTime是Calendar的扩展方法，你可以自己实现天文计算逻辑，也可以用现成的库（比如SunCalc）来避免复杂的时区、天文参数处理。

3. 自定义夜间覆盖层渲染器 #

创建半透明的深色多边形渲染器，用来标记夜间区域：

class NightOverlayRenderer: MKPolygonRenderer {
    override init(overlay: MKOverlay) {
        super.init(overlay: overlay)
        // 设置夜间覆盖的样式：半透明深灰，无描边
        fillColor = UIColor.black.withAlphaComponent(0.5)
        strokeColor = UIColor.clear
    }
}

然后在MKMapViewDelegate中绑定这个渲染器：

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
    if let polygon = overlay as? MKPolygon, polygon.title == "Night" {
        return NightOverlayRenderer(overlay: polygon)
    }
    return MKPolygonRenderer(overlay: overlay)
}

4. 联动滑块更新地图状态 #

当滑块拖动改变时间时，先清除旧的夜间覆盖层，再重新计算每个州的状态并添加新覆盖：

func updateMapForSelectedDate(_ selectedDate: Date) {
    // 移除之前的夜间覆盖层
    mapView.overlays.forEach { overlay in
        if let polygon = overlay as? MKPolygon, polygon.title == "Night" {
            mapView.removeOverlay(polygon)
        }
    }
    
    // 遍历所有州的多边形数据
    for statePolygon in allStatePolygons {
        // 取州中心点坐标计算昼夜（也可以用州内任意有效坐标）
        let centerCoord = statePolygon.coordinate
        if isNight(for: centerCoord, at: selectedDate) {
            statePolygon.title = "Night"
            mapView.addOverlay(statePolygon)
        }
    }
}

最后在滑块的valueChanged回调里触发更新：

@IBAction func dateSliderChanged(_ sender: UISlider) {
    // 根据滑块值转换为对应的Date（这里需要你自己实现滑块到日期的映射逻辑）
    let selectedDate = convertSliderValueToDate(sender.value)
    updateMapForSelectedDate(selectedDate)
}

额外注意点 #

• 边界数据准确性：尽量用公开的精准GeoJSON数据，避免手动坐标的误差
• 时区处理：计算日出日落时要确保用当地时区，避免昼夜判断错误
• 性能优化：如果州数量较多，计算逻辑可以放在后台线程，避免UI卡顿

内容的提问来源于stack exchange，提问作者M Zubair Shamshad