iOS高德地圖WMS服務&Mapbox地圖WMS服務

阿新 • • 發佈：2020-05-21

網路地圖服務（WMS）

網路地圖服務（WMS）利用具有地理空間位置資訊的資料製作地圖。其中將地圖定義為地理資料可視的表現。能夠根據使用者的請求返回相應的地圖（包括PNG，GIF，JPEG等柵格形式或者是SVG和WEB CGM等向量形式）。WMS支援網路協議HTTP，所支援的操作是由URL定義的。

先來分析一波服務連結：
一般情況給我們的是這樣的：http://... .../geoserver/xf/wms?service=WMS&version=1.1.0&request=GetMap&layers=zgwz_lzyz_f08&styles=&bbox=-1844.9489742784644,0.0,35699.99999999942,34437.74999999997&width=768&height=704&srs=EPSG:3857&format=application/openlayers

引數：

service=WMS
version=1.1.0 ：版本（1.1...和1.3...在計算上有區別）
request=GetMap
layers=zgwz_lzyz_f08 ：圖層陣列（這個引數如果錯誤則不顯示）
styles=
bbox=-1844.9489742784644,0.0,35699.99999999942,34437.74999999997 : 盒子（顯示區域）一般是需要計算
width=768
height=704
srs=EPSG:3857 ：座標型別：3857同900913為偽墨卡託投影，也被稱為球體墨卡託座標；4326為WGS84經緯度座標

format=application/openlayers ：格式，iOS用這個format=image/png
TRANSPARENT=TRUE ：透明 true：可以看到高德底圖，false看不到高德底圖
==>**http://... .../geoserver/xf/wms?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&LAYERS=zgwz_lzyz_f08_gd&TRANSPARENT=TRUE&STYLES=&WIDTH=762&HEIGHT=768&srs=EPSG:3857&FORMAT=image/png&BBOX=

一、高德地圖:

通過高德地圖 MATileOverlay 介面，新增 WMS 服務到地圖上

1.自定義類WMSTileOverlay繼承自MATileOverlay

import UIKit

class WMSTileOverlay: MATileOverlay {
    var rootURL = ""
    var titleSize = 0
    var initialResolution = 0.0
    var originShift = 0.0
    var HALF_PI = 0.0
    var RAD_PER_DEGREE = 0.0
    var HALF_RAD_PER_DEGREE = 0.0
    var METER_PER_DEGREE = 0.0
    var DEGREE_PER_METER = 0.0
    
    /// 初始化
    /// - Parameter initRootURL: 線上地圖路徑&TRANSPARENT=TRUE&FORMAT=image/png&BBOX=
    init?(rootURL initRootURL: String?) {
        super.init()
        rootURL = initRootURL ?? ""
        titleSize = 256
        initialResolution = 156543.03392804062////2*Math.PI*6378137/titleSize
        originShift = 20037508.342789244//周長的一半 2*Math.PI*6378137/2.0
        HALF_PI = .pi / 2.0
        RAD_PER_DEGREE = .pi/180.0
        HALF_RAD_PER_DEGREE = .pi/360.0
        METER_PER_DEGREE = originShift/180.0//一度多少米
        DEGREE_PER_METER = 180.0/originShift//一米多少度
    }
    
    /**
     * @brief 以tile path生成URL。用於載入tile,此方法預設填充URLTemplate
     * @param path tile path
     * @return 以tile path生成tileOverlay
     */
    override func url(forTilePath path: MATileOverlayPath) -> URL {
        
        let strURL = "\(rootURL)\(titleBoundsBy(x: path.x, y: path.y, zoom: path.z) ?? "")"
        let url = URL(string: strURL)
        return url!
    }
    
    /**
     * @brief 載入被請求的tile,並以tile資料或載入tile失敗error訪問回撥block;預設實現為首先用URLForTilePath去獲取URL,然後用非同步NSURLConnection載入tile
     * @param path tile path
     * @param result 用來傳入tile資料或載入tile失敗的error訪問的回撥block
     */
    override func loadTile(at path: MATileOverlayPath, result: @escaping(Data?, Error?) -> Void) {
        let url = self.url(forTilePath: path)
        let request = NSMutableURLRequest(url: url)
        request.httpMethod = "GET"
        let session = URLSession.shared
        session.dataTask(with: request as URLRequest, completionHandler: {(data, response, error) in
            if error != nil {
                #if DEBUG
                print("Error downloading tile")
                #endif
                result(nil, error)
            }
            else {
                result(data, nil)
            }
        }).resume()
    }
    
    /// 取消請求瓦片，當地圖顯示區域發生變化時，會取消顯示區域外的瓦片的下載, 當disableOffScreenTileLoading=YES時會被呼叫。since 5.3.0
    /// - Parameter path: path
    override func cancelLoadOfTile(at path: MATileOverlayPath) {
        super.cancelLoadOfTile(at: path)
    }
    
    /**
     * 根據瓦片的x/y等級返回瓦片範圍
     *
     * @param tx
     * @param ty
     * @param zoom
     * @return url
     */
    func titleBoundsBy(x: Int, y: Int, zoom: Int) -> String? {
        let minX = pixels2Meters(x * titleSize, zoom: zoom)
        let maxY = -pixels2Meters(y * titleSize, zoom: zoom)
        let maxX = pixels2Meters(((x + 1) * titleSize), zoom: zoom)
        let minY = -pixels2Meters(((y + 1) * titleSize), zoom: zoom)
        
        return "\(minX),\(minY),\(maxX),\(maxY)"
    }
    
    /**
     * 根據畫素、等級算出座標
     *
     * @param p p
     * @param zoom z
     * @return double
     */
    func pixels2Meters(_ p: Int, zoom: Int) -> Double {
        return Double(p) * resolution(zoom) - originShift
    }
    
    /**
     * 計算解析度
     *
     * @param zoom z
     * @return double
     */
    func resolution(_ zoom: Int) -> Double {
        return initialResolution / (pow(2.0, Double(zoom)))
    }
}

2.在地圖控制器MapController呼叫

import UIKit
class MapController: UIViewController {
    let tileOverlay = WMSTileOverlay.init(rootURL: "http://... .../geoserver/haitu/wms?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&LAYERS=haitu:gis_t_landuse_a&TRANSPARENT=TRUE&STYLES=&srs=EPSG:3857&FORMAT=image/png&BBOX=")
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let map = MAMapView(frame: frame: view.bounds)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.setCenter(CLLocationCoordinate2D(latitude: 39.97000000, longitude: 116.3300000), zoomLevel: 20, animated: false)
        tileOverlay?.disableOffScreenTileLoading = true//停止不在顯示區域的瓦片下載
        mapView.add(tileOverlay)
        view.addSubview(mapView)
    }
}

3.異常處理

（1）WMS服務地圖沒有座標：會導致圖層不能顯示在正確的位置，這時候圖層會顯示在地圖的（0，0）座標位置（非洲），排查的方法就是將地圖中心設定在（0，0）座標，然後放大。解決辦法就是製圖工程師給你個帶座標的圖。

（2）圖層疊加了很多次：第一齣現這種情況有可能是我們自己對圖層做的快取引起的。可以刪除快取試試。

（3）出現柵格：這種情況有可能釋出的圖有問題，或者bbox引數計算出現了問題。出現這種情況的原因很多，歡迎補充。

（4）座標系不同、WMS版本1.1和1.3：如果WMS服務給的是84座標系，疊加到高德上會出現偏移，可以讓製圖工程師出一個高德座標系的圖，也可以我們自己在程式碼裡做，會有一點計算量，程式碼如下：

在第1步自定義類WMSTileOverlay中的方法func titleBoundsBy(x: Int, y: Int, zoom: Int) -> String?更改

/**
 * 根據瓦片的x/y等級返回瓦片範圍
 *
 * @param tx
 * @param ty
 * @param zoom
 * @return url
 */
func titleBoundsBy(x: Int, y: Int, zoom: Int) -> String? {
    let minX = pixels2Meters(x * titleSize, zoom: zoom)
    let maxY = -pixels2Meters(y * titleSize, zoom: zoom)
    let maxX = pixels2Meters(((x + 1) * titleSize), zoom: zoom)
    let minY = -pixels2Meters(((y + 1) * titleSize), zoom: zoom)
    
    return "\(minX),\(minY),\(maxX),\(maxY)"
}

改為

/**
 * 根據瓦片的x/y等級返回瓦片範圍
 *
 * @param tx
 * @param ty
 * @param zoom
 * @return url
 */
func titleBoundsBy(x: Int, y: Int, zoom: Int) -> String? {
    var minX = pixels2Meters(x * titleSize, zoom: zoom)
    var maxY = -pixels2Meters(y * titleSize, zoom: zoom)
    var maxX = pixels2Meters(((x + 1) * titleSize), zoom: zoom)
    var minY = -pixels2Meters(((y + 1) * titleSize), zoom: zoom)
    
    //轉換成經緯度
    minX = meters2Lon(minX)
    minY = meters2Lat(minY)
    maxX = meters2Lon(maxX)
    maxY = meters2Lat(maxY)
    
    //轉換目標經緯度為高德座標系。
    let amapcoord = AMapCoordinateConvert(CLLocationCoordinate2DMake(CLLocationDegrees(minY), CLLocationDegrees(minX)), type)
    minY = amapcoord.latitude
    minX = amapcoord.longitude
    let maxAmapcoord = AMapCoordinateConvert(CLLocationCoordinate2DMake(CLLocationDegrees(maxY), CLLocationDegrees(maxX)), type)
    maxY = maxAmapcoord.latitude
    maxX = maxAmapcoord.longitude
    
    //轉換成墨卡託
    minX = lon2Meters(minX)
    minY = lat2Meters(minY)
    maxX = lon2Meters(maxX)
    maxY = lat2Meters(maxY)
    
    //有部落格提到1.1版本和1.3版本有區別，沒有嘗試過，如果你遇到了歡迎補充
    result = "\(minX),\(minY),\(maxX),\(maxY)" //1.1
    //result = "\(minX),\(minY),\(maxX),\(maxY)"//1.3
    
    return result
}

//////新增座標轉換相應的方法
/**
 * X米轉經緯度
 */
func meters2Lon(_ mx: Double) -> Double {
    let lon = mx * DEGREE_PER_METER
    return lon
}

/**
 * Y米轉經緯度
 */
func meters2Lat(_ my: Double) -> Double {
    var lat = my * DEGREE_PER_METER
    lat = 180.0 / .pi * (2 * atan(exp(lat * RAD_PER_DEGREE)) - HALF_PI)
    return lat
}

/**
 * X經緯度轉米
 */
func lon2Meters(_ lon: Double) -> Double {
    let mx = lon * METER_PER_DEGREE
    return mx
}

/**
 * Y經緯度轉米
 */
func lat2Meters(_ lat: Double) -> Double {
    var my = log(tan((90 + lat) * HALF_RAD_PER_DEGREE))/(RAD_PER_DEGREE)
    my = my * METER_PER_DEGREE
    return my
}

二、Mapbox地圖:

建議：做室內地圖的用Mapbox，因為Mapbox縮放級別可以達到1米的效果。

1.Mapbox的WMS服務和新增柵格影象是一樣的，甚至不需要我們做修改,唯一需要注意的是引數：bbox={bbox-epsg-3857}

import UIKit
import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {
    var mapView: MGLMapView!
    var rasterLayer: MGLRasterStyleLayer?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        mapView = MGLMapView(frame: view.bounds)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        mapView.setCenter(CLLocationCoordinate2D(latitude: 39.97000000, longitude: 116.3300000), zoomLevel: 20, animated: false)
        
        mapView.delegate = self
        
        view.addSubview(mapView)
        
        // Add a UISlider that will control the raster layer’s opacity.
        addSlider()
    }
    
    func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
        // Add a new raster source and layer.
        let source = MGLRasterTileSource(identifier: "stamen-watercolor", tileURLTemplates: ["http://.../geoserver/xf/wms?service=WMS&version=1.1.0&request=GetMap&layers=zgwz_lzyz_f08_3857&styles=&bbox={bbox-epsg-3857}&width=768&height=704&srs=EPSG:3857&format=image/png"], options: [ .tileSize: 256 ])
        let rasterLayer = MGLRasterStyleLayer(identifier: "stamen-watercolor", source: source)
        
        style.addSource(source)
        style.addLayer(rasterLayer)
        
        self.rasterLayer = rasterLayer
    }
    
    @objc func updateLayerOpacity(_ sender: UISlider) {
        rasterLayer?.rasterOpacity = NSExpression(forConstantValue: sender.value as NSNumber)
    }
    
    func addSlider() {
        let padding: CGFloat = 10
        let slider = UISlider(frame: CGRect(x: padding, y: self.view.frame.size.height - 44 - 30, width: self.view.frame.size.width - padding * 2, height: 44))
        slider.minimumValue = 0
        slider.maximumValue = 1
        slider.value = 1
        slider.isContinuous = false
        slider.addTarget(self, action: #selector(updateLayerOpacity), for: .valueChanged)
        view.insertSubview(slider, aboveSubview: mapView)
        if #available(iOS 11.0, *) {
            let safeArea = view.safeAreaLayoutGuide
            slider.translatesAutoresizingMaskIntoConstraints = false
            let constraints = [
                slider.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor, constant: -mapView.logoView.bounds.height - 10),
                slider.widthAnchor.constraint(equalToConstant: self.view.frame.size.width - padding * 2),
                slider.centerXAnchor.constraint(equalTo: safeArea.centerXAnchor)
            ]
            
            NSLayoutConstraint.activate(constraints)
        } else {
            slider.autoresizingMask = [.flexibleTopMargin, .flexibleLeftMargin, .flexibleRightMargin]
        }
    }
}

iOS高德地圖WMS服務&Mapbox地圖WMS服務

網路地圖服務（WMS）

一、高德地圖:

1.自定義類WMSTileOverlay繼承自MATileOverlay

2.在地圖控制器MapController呼叫

3.異常處理

二、Mapbox地圖:

1.Mapbox的WMS服務和新增柵格影象是一樣的，甚至不需要我們做修改,唯一需要注意的是引數：bbox={bbox-epsg-3857}

iOS高德地圖WMS服務&Mapbox地圖WMS服務

IOS高德地圖使用說明

iOS 高德地圖設定中心點,獲取中心點的詳細位置和經緯度

IOS 高德地圖導航

iOS高德地圖定位.自定義標註.搜尋.分類展示(排版)

iOS高德地圖初始化重定義比例尺

ios高德地圖流程

ios高德地圖,地理編碼，基於swift 4.0

iOS 高德地圖反向地理編碼 onReGeocodeSearchDone 不回撥

Android 高德定位展示當前位置在地圖上

高德，百度，Google地圖定位偏移以及座標系轉換

Unity ios 高德定位

轉載：高德地圖API學習從零開始學高德JS API（一）地圖展現

iOS定位服務與地圖應用開發：高德地圖開發

判斷一個座標點是否在一個無規則的多邊形內 (iOS定位服務與地圖應用開發：高德地圖開發)

iOS應用內跳轉百度高德蘋果地圖

iOS unity 互相呼叫載入高德地圖時

百度&高德地圖小區景點邊界輪廓實現

關於高德地圖在iOS中呼叫騎行導航

iOS呼叫高德地圖導航

iOS高德地圖WMS服務&Mapbox地圖WMS服務

網路地圖服務（WMS）

一、高德地圖:

1.自定義類WMSTileOverlay繼承自MATileOverlay

2.在地圖控制器MapController呼叫

3.異常處理

二、Mapbox地圖:

1.Mapbox的WMS服務和新增柵格影象是一樣的，甚至不需要我們做修改,唯一需要注意的是引數：bbox={bbox-epsg-3857}

相關推薦