iOS 地圖繪製折線 虛線 方向箭頭 高德 Google

方向箭頭樣式只實現了高德 google 沒有實現 官方文檔沒有找到實現方式 有找到的請務必告訴我下 謝謝

Google地圖:

我是創建了一個單例來實現google相關的東西

這個是畫線的方法

這裏只是畫出一條線 並不是虛線

    /// 畫線 

    func addGoogleLine(mapView: T,mapLineModel:[CLLocationCoordinate2D]) -> GMSPolyline{

        if mapLineModel.count <= 1{return GMSPolyline()}

        let polyline = GMSPolyline()

        linepath.removeAllCoordinates()

        polyline.strokeWidth = 4

        

        mapLineModel.forEach { (item) in

//            polyline.strokeColor = UIColor.xFF3366

            linepath.add(item)

        }

        polyline.path = linepath

        polyline.geodesic = true

        polyline.map = mapView

        mapView.animate(with: GMSCameraUpdate.fit(GMSCoordinateBounds(coordinate: mapLineModel.first!, coordinate: mapLineModel.last!), with: UIEdgeInsets(top: 64, left: 30, bottom: 30, right: 30)))

        return polyline

    }

虛線需要在GMSMapViewDelegate下面這個回調中實現

func mapView(_ mapView: GMSMapView, didChange position: GMSCameraPosition) {

        updateLine()

 }

///設置虛線

private func updateLine() {

        if self.googleMapView != nil {

            let styles: [GMSStrokeStyle] = [.solidColor(UIColor.xFF3366), .solidColor(.clear)]

            let scale = 1.0 / self.googleMapView!.projection.points(forMeters: 1, at: self.googleMapView!.camera.target)

            let solidLine = NSNumber(value: 15.0 * Float(scale))

            let gap = NSNumber(value: 10.0 * Float(scale))

            if self.polyline.path != nil {

                self.polyline.spans = GMSStyleSpans(self.polyline.path!, styles, [solidLine, gap], GMSLengthKind.rhumb)

            }

        }

    }

 

高德地圖:

需要在 MAMapViewDelegate

設置線的樣式

func mapView(_ mapView: MAMapView!, rendererFor overlay: MAOverlay!) -> MAOverlayRenderer! {

        ///畫線的樣式

        if overlay.isKind(of: MAPolyline.self) {

            let model = MAPolylineRenderer(overlay: overlay)

            model?.lineWidth = 5

            model?.strokeColor = UIColor.xFF3366

            model?.fillColor = UIColor.x000000

            model?.lineJoinType = kMALineJoinRound

            model?.lineCapType = kMALineCapArrow

            model?.lineDashType = .square

            return model

        }

        return nil

    }

方向箭頭樣式

func mapView(_ mapView: MAMapView!, rendererFor overlay: MAOverlay!) -> MAOverlayRenderer! {

        ///畫線的樣式

if overlay.isKind(of: MAPolyline.self) {

            let line = MAPolylineRenderer(overlay: overlay)

            line?.lineWidth   = 20

            line?.strokeImage = UIImage(named: "jiantouMap") //UI設計圖片 圖片必須是正方形 寬度必須是2的整數冪

            return line

        }

        return nil

    }

 

///自己的單例方法 將多個座標折現添加到地圖上 使地圖展示線段大小

func addMoreLine(mapView: MAMapView,lineCoordinates: [CLLocationCoordinate2D]) {

        var coordinates = lineCoordinates

        if coordinates.count <= 0{ return }

        if let oldMAPolyline = oldMAPolyline {

            mapView.remove(oldMAPolyline)

        }

        let polyline = MAPolyline(coordinates: &coordinates, count: UInt(lineCoordinates.count))

        mapView.add(polyline)

        let rect = mapView.mapRectThatFits(polyline?.boundingMapRect ?? MAMapRect(origin: MAMapPoint(x: lineCoordinates.first?.longitude ?? 0, y: lineCoordinates.first?.latitude ?? 0), size: MAMapSize(width: Double(ScreenInfo.Width), height: Double(ScreenInfo.Height - 193))))

        mapView.setVisibleMapRect(rect, edgePadding: UIEdgeInsets(top: 40,left: 40,bottom: 40,right: 40), animated: true)

        oldMAPolyline = polyline

    }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章