基於ios的室內地圖基本繪製 —— (1)大頭針的繪製

關於在ios上地圖的加載,如果你是隻有一張img圖片,和相關的一系列地圖信息(座標點信息)的話,貌似與之相關的沒有什麼開源框架可以用。小編這裏自己實現了一下(但不是可用框架,純粹爲了提供一個解決思路)

首先你的座標數據肯定是地理座標,而你要把它轉化成app上的座標,需要轉換。這個轉換過程並不複雜,但是很麻煩(痛苦)

如果僅僅是一個點的話,那還比較好辦

我這裏的原始座標點是相對於機場原始地圖的座標點,所以我的計算公式是:

原始座標點(x) / 機場尺寸(w(寬)) * 當前顯示的圖片尺寸(w(寬))   (爲什麼是當前顯示的圖片尺寸,因爲我們的圖片肯定是課縮放的,畢竟地圖嘛)

如果這是一個大頭針的話,那麼我們還要做一些移動。

由於圖片的加載默認是在左上角的,所以我們要把我們的位置要向左上方偏移。具體的偏移量計算方式如下

x方向上,向左側偏移大頭針寬度的一半

y方向是,向上偏移大頭針的高度

這個是顯而易見的,大家可能會問,這有什麼難的,是個人稍微想一想都知道嘛。

目前來看是沒有什麼問題,但是圖片一旦縮放,問題就來了。

地圖如果放大,地圖顯示的範圍會變小的,細節會更豐富,那大頭針的變化呢。

我們可以打開百度或者高德地圖看一下。如果放大地圖,大頭針會怎麼樣(沒錯,大頭針是變小了)

所以,如果你僅僅是一個座標點的話,放大和縮小是不成什麼問題的,但是你要顯示的是大頭針,你的圖片加載的x,y的位置並不是商家變化後的座標點位置,所以要加入縮放處理的。

地圖縮放的大小,我們可以設一個值,縮放度=原始圖片大小(w) / 當前圖片大小(w)  (這裏要說一些條件,原始圖片肯定是比當前圖片大或者相等的,也就是說,我們這個縮放度的值是<=1的)

根據上邊的分析,地圖放的越大,大頭針越小。所以大頭針的尺寸,我們可以設置爲:

大頭針尺寸=大頭針圖片尺寸 / 縮放度

所以,大頭針的這個button如何setframe我們就知道了

這裏上一點小小但乾貨吧,但是有點亂,需要慢慢看

[button setFrame:
    CGRectMake(
        button.longitude / indoorImage.size.width *  (_indoorMapView.frame.size.width) - 40 / 4 * (_indoorMapView.frame.size.width / oldFrame.width), 
        button.latitude / indoorImage.size.height * (_indoorMapView.frame.size.height) - 66 / 2 * (_indoorMapView.frame.size.height / oldFrame.height), 
        40 / 2 / (_indoorMapView.frame.size.width / oldFrame.width), 
        66 / 2 / (_indoorMapView.frame.size.height / oldFrame.height)
    )
];

其實上邊的代碼就是把之前講的換成了代碼,button.longitude和latitude就是原始的座標點,首先是對座標點做變換,然後40和60是我的大頭針的寬和高,這裏是像素點,而我們ios上使用的顯示單位是點,iphone7是 1點 = 2個像素點,所以要天生/2,然後根據前面的公式,寬要再 / 2,高則不用。

ps:indoorImage.size是原始圖片的大小,oldFrame是初始圖片的尺寸大小(由於後面我們還要延伸到縮放,設計多個狀態下的圖片尺寸,這裏起名字叫old,對應的還有當前的current)

然後在監聽縮放手勢的函數中,添加如下代碼

[btn setFrame:
    CGRectMake(
        btn.frame.origin.x + (btn.frame.size.width - btn.frame.size.width / pinchGestureRecognizer.scale) / 2, 
        btn.frame.origin.y + (btn.frame.size.height - btn.frame.size.height / pinchGestureRecognizer.scale), 
        btn.frame.size.width / pinchGestureRecognizer.scale, 
        btn.frame.size.height / pinchGestureRecognizer.scale
    )
];

這裏就是在縮放的時候,要對其座標的位置,還有大頭針的尺寸做出相應的改變,嗯,沒有什麼好說的吧,加上或者減去相應的變化值即可。

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