iOS开发不常用,倒是可以装逼iOS学习笔记

手绘图导航

2016-05-05  本文已影响620人  TroyZhang

简介

通常在项目中需要用到地图的时候我们会选择百度、高德等地图;但有的时候客户会要求提供基于手绘图的定位、导游导览功能,百度-瓦片图层高德-图片覆盖物提供了相应的解决方案,我们可以把手绘图作为瓦片、覆盖物放在地图上,但是这种方案有其局限性:必须依托百度、高德地图本身才能查看手绘图。

接下来我将为大家带来另外一种解决方案,纯手绘图导游导览、定位,先看效果图:

手绘图导游导览

NAMapKit

NAMapKit是一个开源的手绘图框架,支持缩放、地图标记、高清地图切片浏览、本地手绘图、在线手绘图功能。

NAMapKit Demo

Popup Menu

默认情况下NAMapKit的标记点弹出框不够nice,所以我在github上fork了NAMapKit,并实现了与City Guides by National Geographic这款App中类似的功能:

Fork NAMapKit on github

标记点

普通点标记

普通点的标记可以直接用尺子在手绘图上量一下,拿到目标点的CGPoint(x,y),之后把这个point作为NAPinAnnotation添加到地图上,这样就实现了打点的功能。

当前位置打点

要实现当前位置打点,就得将经纬度坐标转换成图片的平面坐标,以百度地图来说,它提供了以下转换函数:

// BMKGeometry.h
/**
 *将经纬度坐标转换为投影后的直角地理坐标
 *@param coordinate 待转换的经纬度坐标
 *@return 转换后的直角地理坐标
 */
UIKIT_EXTERN BMKMapPoint BMKMapPointForCoordinate(CLLocationCoordinate2D coordinate);

/**
 *将投影后的直角地理坐标转换为经纬度坐标
 *@param mapPoint 投影后的直角地理坐标
 *@return 转换后的经纬度坐标
 */
UIKIT_EXTERN CLLocationCoordinate2D BMKCoordinateForMapPoint(BMKMapPoint mapPoint);

这里有一个问题:以一个城市为例,在百度地图16、17、18、19等缩放级别下都可以绘制这个城市,但在16、17、18、19级别下画出来的手绘图的尺寸(像素)肯定是不一样的!那么百度地图的直角坐标是以什么为标准呢?

所以,如果确定某个经纬度点肯定在当前手绘图中,则可以利用如下公式将经纬度坐标转换成手绘图的平面坐标

// 如果手绘图是以百度地图18级为参照画出来的,则zoomRate为1
#define zoomRate            1

// 手绘图左上角点的经纬度坐标转换成百度地图的直角坐标
BMKMapPoint leftTopCoor = BMKMapPointForCoordinate(CLLocationCoordinate2DMake(lat, lng))

/**
 * 将经纬度坐标转换成手绘图的平面(像素)坐标
 */
- (CGPoint)locationCoordToCgPoint:(CLLocationCoordinate2D)coor
{
    BMKMapPoint point = BMKMapPointForCoordinate(coor);
    return CGPointMake((point.x - leftTopCoor.x) * zoomRate, (point.y - leftTopCoor.y) * zoomRate);
}

/**
 * 将手绘图的平面(像素)坐标转换成经纬度坐标
 */
- (CLLocationCoordinate2D)cgPointToLocationCoord:(CGPoint)point
{
    BMKMapPoint mapPoint;
    mapPoint.x = point.x / zoomRate + leftTopCoor.x;
    mapPoint.y = point.y / zoomRate + leftTopCoor.y;
    return BMKCoordinateForMapPoint(mapPoint);
}
判断给定经纬度是否在当前手绘图视野范围内
// 其中imageWidth、imageHeight为手绘图的像素大小(px单位)
- (BOOL)isLocationInImage:(CLLocationCoordinate2D)coor
{
    CGPoint point = [self locationCoordToCgPoint:coor];
    return !(point.x < 0 || point.y < 0 || point.x > imageWidth || point.y > imageHeight);
}
上一篇下一篇

猜你喜欢

热点阅读