iOS实战项目之手绘地图的实现

最近项目中实现的一个核心功能是实现手绘地图，具体的效果类似驴迹导游，有气泡弹出、路线绘制等等。

实现方式确定

经过探讨我们认为比较靠谱的两种实现方式：

• 类似百度“瓦片”，在百度或高德原有的地图API上覆盖一层我们的手绘图，然后在进行其他功能
• 直接自定义View，用scrollView+imageView的方式初步实现地图的缩放+手势点击等

对比两种方式，前者更省力，尤其是是路线绘制会很简单，但缺点是可能后期一些功能的实现会受限，考虑到该模块是我们APP的核心模块，综合考虑下决定使用笨方法：最费力但可扩展性好。

两个难点

1.手绘图坐标系的转换

因为需要实际地图在手绘图上1比1重现，就需要GPS坐标系和手绘图坐标系实现精准转换。

比如要计算区域中某一点的具体位置，过程整理如下：

坐标系转换示意图

已知:景区边界点经纬度坐标：

左上：A（x,y）

左下：B（x1,y1）

右上：C (x2,y2)

景区手绘图图片url地址-----推出手绘图宽高：

W和H

要计算的位置经纬度坐标：D (x0,y0)

求用户位置在手绘图的显示（x4,y4）

以iOS中的坐标系为例：

计算公式：x4 =（x0-x1）/(x2-x1)W*

y4同理

代码实现如下：

/// 计算某位置在手绘图中的坐标
/// @param imageSize 手绘图尺寸
/// @param locationNow 当前位置的经纬度坐标
- (CLLocationCoordinate2D)getLocationWithsize:(CGSize)imageSize location:(CLLocationCoordinate2D) locationNow{
    
    CGSize size = imageSize;
    CLLocationCoordinate2D location = CLLocationCoordinate2DMake(0, 0);
    //纬度= （左上纬度-现在纬度）/（左上高纬度-坐下）*image高度
    location.latitude = (self.leftToplocation.latitude-locationNow.latitude)/(self.leftToplocation.latitude-self.leftBottomLocation.latitude)*size.height;
    //经度=(现在经度-左上经度)/(右上经度-左上经度)*image宽度
    location.longitude = (locationNow.longitude-self.leftToplocation.longitude)/(self.rightTopLocation.longitude-self.leftToplocation.longitude)*size.width;
    return location;
}

2.曲线的绘制

关于地图中路线的绘制，需要考虑路线有直线曲线两种情况，关于CALayer绘制曲线网上的介绍很多，不再赘述，具体实现方法：

-(void)drawCurvewithImageSize:(CGSize)imagesize Array:(NSArray *)lineArr ishu:(NSInteger) ishu TopLeftPoint:(CLLocationCoordinate2D)topleftPoint TopRightPoint:(CLLocationCoordinate2D)topright LeftBottom:(CLLocationCoordinate2D)leftBottom linewidth:(CGFloat)width color:(UIColor*)color{
    
    CalculatorLocationTool *calculatorTool = [[CalculatorLocationTool alloc] init];
    calculatorTool.leftToplocation = topleftPoint;
    calculatorTool.leftBottomLocation = leftBottom;
    calculatorTool.rightTopLocation = topright;
    
    UIBezierPath *linePath = [UIBezierPath bezierPath];
    for (int i=0; i

效果展示.png

为了把项目中其他的点也体现出来，整理成项目了，有兴趣的同学可以下载下来看看。