iOS平台正确使用WhirlyGlobe-Maply及地图区域颜色修改技术问询

DevOps 小满

2026-5-19

刚好我在iOS上用WhirlyGlobe-Maply做过几个地理可视化项目，给你梳理下实操步骤，都是踩过坑后的经验：

1. iOS平台下正确使用WhirlyGlobe-Maply框架的步骤

集成框架：优先用CocoaPods集成，比手动拖库省心太多。在你的Podfile里添加一行：
```
pod 'WhirlyGlobe-Maply'
```
然后执行pod install即可。如果非要手动集成，去框架仓库拉取源码，把静态库和头文件拖进项目，别忘了添加CoreLocation、QuartzCore、OpenGLES这些系统依赖框架。

初始化地图视图：根据需求选2D地图（MaplyViewController）或3D地球（WhirlyGlobeViewController），这里以3D地球为例：

import WhirlyGlobe

class GlobeViewController: UIViewController {
    private var globeVC: WhirlyGlobeViewController!

    override func viewDidLoad() {
        super.viewDidLoad()
        // 初始化并添加地球视图到当前页面
        globeVC = WhirlyGlobeViewController()
        addChild(globeVC)
        globeVC.view.frame = view.bounds
        view.addSubview(globeVC.view)
        globeVC.didMove(toParent: self)
    }
}

配置地图瓦片源：框架自带了几个默认瓦片源，但推荐用自定义的在线瓦片（比如OpenStreetMap），适配性更好：

// 初始化OpenStreetMap瓦片源
let tileSource = MaplyRemoteTileSource(
    baseURL: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
    minZoom: 0, maxZoom: 19
)
// 添加瓦片图层到地球视图
let tileLayer = globeVC.add(tileSource)
tileLayer?.coverPoles = true // 开启极地区域覆盖，避免出现空白

处理交互逻辑：框架默认支持缩放、旋转等手势，如果要监听地图点击、长按等操作，设置代理即可：

// 先让ViewController遵循MaplyViewControllerDelegate协议
extension GlobeViewController: MaplyViewControllerDelegate {
    func maplyViewController(_ viewC: MaplyBaseViewController, didSelect obj: MaplySelectable, at screenPt: CGPoint) {
        // 处理地图选中事件，比如获取选中对象的信息
        if let vecObj = obj as? MaplyVectorObject {
            print("选中了地理对象：\(vecObj)")
        }
    }
}

// 在viewDidLoad里设置代理
globeVC.delegate = self

2. 读取用户数据并修改指定地区的地图颜色

假设你已经从用户存储中拿到了去过的城市列表（比如["New York", "Washington"]），要给这些地区上色，步骤如下：

准备地理边界数据：要给城市区域上色，得先有城市的多边形边界数据，一般用GeoJSON格式，把对应城市的GeoJSON文件打包到项目里（比如newyork.geojson、washington.geojson）。然后写个方法读取并转换为框架能识别的矢量对象：

private func loadCityGeoJSON(named cityName: String) -> MaplyVectorObject? {
    guard let filePath = Bundle.main.path(
        forResource: cityName.lowercased(),
        ofType: "geojson"
    ), let data = try? Data(contentsOf: URL(fileURLWithPath: filePath)),
          let vectorObjects = MaplyVectorObject.fromGeoJSON(data) else {
        print("无法加载\(cityName)的GeoJSON数据")
        return nil
    }
    // 通常GeoJSON里会包含多个多边形，取第一个即可
    return vectorObjects.first
}

创建高亮样式并添加到地图：针对每个去过的城市，生成矢量对象后，设置填充颜色和边框样式，再添加到地球视图：

private func highlightVisitedCities(_ cities: [String]) {
    for city in cities {
        guard let cityVector = loadCityGeoJSON(named: city) else { continue }
        
        // 设置填充样式：半透明蓝色，确保在瓦片之上显示
        let fillStyle = MaplyVectorStyle()
        fillStyle.color = UIColor.blue.withAlphaComponent(0.5).maplyColor()
        fillStyle.drawPriority = 100 // 数值越大，显示层级越高
        
        // 设置边框样式：黑色细边框，增强区域辨识度
        let borderStyle = MaplyVectorStyle()
        borderStyle.color = UIColor.black.maplyColor()
        borderStyle.lineWidth = 2.0
        
        // 将样式应用到矢量对象并添加到地图
        globeVC.add(cityVector, style: fillStyle, lineStyle: borderStyle)
    }
}

调用方法处理用户数据：拿到用户的访问城市列表后，直接调用上面的方法即可：

// 假设这里是从用户偏好设置或接口获取的数据
let visitedCities = ["New York", "Washington"]
highlightVisitedCities(visitedCities)

备选方案（无精确边界时）：如果没有城市的GeoJSON边界数据，也可以用城市中心点加圆形区域模拟高亮：

// 纽约的经纬度坐标
let nyCoord = MaplyCoordinateMakeWithDegrees(-74.0060, 40.7128)
// 创建半径10公里的圆形矢量对象
let nyCircle = MaplyVectorObject.circle(withCenter: nyCoord, radius: 10000, segments: 32)
// 同样设置样式添加到地图
globeVC.add(nyCircle, style: fillStyle, lineStyle: borderStyle)

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