在绘图应用程序中，我们可以识别用户何时开始绘制并移动手指以制作线条/形状。我想在地图上做同样的事情，我该怎么做？
问问题
5271 次
3 回答
13
基本步骤将包括：
1）每当用户开始绘制时添加一个覆盖视图。
lazy var canvasView:CanvasView = {
var overlayView = CanvasView(frame: self.googleMapView.frame)
overlayView.isUserInteractionEnabled = true
overlayView.delegate = self
return overlayView
}()
@IBAction func drawActn(_ sender: AnyObject?) {
self.coordinates.removeAll()
self.view.addSubview(canvasView)
let origImage = UIImage(named: "pen")
let tintedImage = origImage?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
drawBtn.setImage(tintedImage, for: .normal)
drawBtn.tintColor = UIColor.white
drawBtn.backgroundColor = UIColor.red
}
2）在叠加视图中进行手绘。
class CanvasView: UIImageView {
weak var delegate:NotifyTouchEvents?
var lastPoint = CGPoint.zero
let brushWidth:CGFloat = 3.0
let opacity :CGFloat = 1.0
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first {
self.delegate?.touchBegan(touch: touch)
lastPoint = touch.location(in: self)
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first {
self.delegate?.touchMoved(touch: touch)
let currentPoint = touch.location(in: self)
drawLineFrom(fromPoint: lastPoint, toPoint: currentPoint)
lastPoint = currentPoint
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first {
self.delegate?.touchEnded(touch: touch)
}
}
func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {
UIGraphicsBeginImageContext(self.frame.size)
let context = UIGraphicsGetCurrentContext()
self.image?.draw(in: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height))
context?.move(to: fromPoint)
context?.addLine(to: toPoint)
context?.setLineCap(.round)
context?.setLineWidth(brushWidth)
context?.setStrokeColor(UIColor.black.cgColor)
context?.setBlendMode(.normal)
context?.strokePath()
self.image = UIGraphicsGetImageFromCurrentImageContext()
self.alpha = opacity
UIGraphicsEndImageContext()
}
}
3)使用委托模式从 OverlayView 到 Controller 获取数组中的所有坐标
//MARK: GET DRAWABLE COORDINATES
extension ViewController:NotifyTouchEvents{
func touchBegan(touch:UITouch){
let location = touch.location(in: self.googleMapView)
let coordinate = self.googleMapView.projection.coordinate(for: location)
self.coordinates.append(coordinate)
}
func touchMoved(touch:UITouch){
let location = touch.location(in: self.googleMapView)
let coordinate = self.googleMapView.projection.coordinate(for: location)
self.coordinates.append(coordinate)
}
func touchEnded(touch:UITouch){
let location = touch.location(in: self.googleMapView)
let coordinate = self.googleMapView.projection.coordinate(for: location)
self.coordinates.append(coordinate)
createPolygonFromTheDrawablePoints()
}
}
4）将该坐标更改为多边形。
func createPolygonFromTheDrawablePoints(){
let numberOfPoints = self.coordinates.count
//do not draw in mapview a single point
if numberOfPoints > 2 { addPolyGonInMapView(drawableLoc: coordinates) }//neglects a single touch
coordinates = []
self.canvasView.image = nil
self.canvasView.removeFromSuperview()
let origImage = UIImage(named: "pen")
let tintedImage = origImage?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
drawBtn.setImage(tintedImage, for: .normal)
drawBtn.tintColor = UIColor.red
drawBtn.backgroundColor = UIColor.white
}
func addPolyGonInMapView( drawableLoc:[CLLocationCoordinate2D]){
isDrawingModeEnabled = true
let path = GMSMutablePath()
for loc in drawableLoc{
path.add(loc)
}
let newpolygon = GMSPolygon(path: path)
newpolygon.strokeWidth = 3
newpolygon.strokeColor = UIColor.black
newpolygon.fillColor = UIColor.black.withAlphaComponent(0.5)
newpolygon.map = googleMapView
if cancelDrawingBtn.isHidden == true{ cancelDrawingBtn.isHidden = false }
userDrawablePolygons.append(newpolygon)
addPolygonDeleteAnnotation(endCoordinate: drawableLoc.last!,polygon: newpolygon)
}
我在这里创建了一个演示项目，用于在 Swift 3 中的 Google Map 上绘制/删除多个多边形。
请记住在 AppDelegate 中设置 API 密钥并更改包标识符以运行项目。
于 2016-10-25T12:35:26.030 回答
2
地图工具包折线或多边形绘图 - https://github.com/tazihosniomar/MapKitDrawing
此链接包含在 Apple Map 上绘制多边形的演示项目。但是，Google Map View 的逻辑保持不变。因此，您可以从中复制实现逻辑并将其应用到 Google 地图上。
我希望这能帮到您。
于 2014-07-17T11:44:42.240 回答
0
要画线，请使用polyline. 请参阅谷歌地图形状。
要使用polyline，您需要提供 locatoin 坐标。将屏幕上的点转换为GMSProjection类的坐标使用coordinateForPoint:(CGPoint)point方法。
Polyline实际上在两个坐标之间画了一条线。因此，随着 mapView 的移动，这些线也会移动。我想这就是你想要的。
于 2013-06-16T11:14:14.337 回答