發布時間：2022/08/15 點擊數：2059
前面介紹了《景區手繪地圖（電子地圖、智慧導覽系統）如何制作》以及《景區手繪地圖的繪制流程》，接下來介紹一些手繪地圖制作的關鍵點。
作者：輕輕的煙霧（微信：z281099678）
手繪地圖最關鍵的一點，就是把手繪地圖準確的覆蓋到地圖平臺。
手繪地圖體驗
這是首要的關鍵點。
通過前面的介紹，我們知道，手繪地圖是基于地圖平臺針對某一區域進行美化及手繪，從而生產一張精美的手繪圖片文件。但這個文件并不能拿來直接使用，而必須要覆蓋到地圖平臺之上才可發揮其價值。
要實現這個目的，我先簡單介紹幾個概念（這些概念在前面的文章都有比較詳細的介紹，這里只做簡單的回顧）：
瓦片圖是256像素的正方形圖片，整個地圖都是由瓦片圖構成的。用瓦片圖原因是，可按需要加載（按屏幕顯示范圍內的區域加載），解決的問題是，服務器及客戶端設備內存問題，以及網絡流量問題。
高德、百度、騰訊、谷歌等等地圖平臺，都有開放的接口。通過這些開放接口，便可實現讓手繪圖覆蓋到地圖平臺上。
高德地圖demo
每個地圖開放平臺都提供了多種把手繪地圖覆蓋到平臺的實現方式。
此處以高德地圖為例說明。高德地圖一共提供了這么多接口，分別都可以實現自定義圖層覆蓋到地圖平臺：
根據我的經驗，在手繪地圖覆蓋這個場景，比較適用的是：
這兩個接口，分別對應上文描述的“瓦片圖實現地圖”及“一整張圖實現地圖”。ImageLayer這個接口，可以實現把整張手繪地圖覆蓋到地圖平臺上。事實上，依我的了解，業內也有采取這個解決方案的系統。但是就個人而言，我更推薦接口TileLayer.Flexible，此接口就是采取瓦片圖的方案來把手繪地圖覆蓋到地圖平臺。
ImageLayer接口代碼如下所示（高德官方代碼），由其圖片參數可見，是一張整圖：
TileLayer.Flexible接口代碼如下所示：
此接口有createTile方法，開放了3個參數，就是至關重要的地圖層級zoom，以及瓦片圖的坐標x/y。通過這3個參數，我們就可以把整張手繪地圖切為瓦片圖來覆蓋到地圖平臺之上，達到用戶使用時也按需加載的效果。
三個參數決定瓦片圖
高德地圖的TileLayer.Flexible接口還有一個參數，便是success這個函數。在createTile方法里，我們其實還可以自定義更加復雜的內容，然后傳入success這個函數，高德地圖會自動把傳入的對象渲染到瓦片里。
根據這個原理，我們可以實現更加復雜的需求，如：因為國內無法正常訪問谷歌地圖，而高德、百度等地圖在國外訪問網絡延遲嚴重且地圖數據欠缺，所以對于國外的區域或景區這種場景，我們就可以通過此接口實現全球可訪問的手繪地圖。
具體的實現方式如下：
這樣就實現了加載兩個瓦片圖，重疊到瓦片區里。其中除了我們自己的手繪地圖的瓦片之外，另外的瓦片圖是谷歌地圖的底圖瓦片。
谷歌地圖在國內無法訪問，我們可以采用把它緩存到服務器的方案，這樣就可以達到國內能通過高德地圖來實現訪問谷歌地圖的底圖。而國外區域的用戶，則直接調用谷歌地圖。這樣實現國內國外均能訪問。
順便說一下，谷歌地圖的瓦片圖加載方案，也是大同小異的。
這里另外有一個需要注意注意的點就是，怎么判斷當前用戶是在國內還是國外。可以通過經緯度判斷，可以通過IP判斷。我建議通過經緯度，更加直觀明了且準確。但是中國的版圖區域，是一個很復雜的多邊形，因此，需要一些較為復雜的計算。這個點現在就不展開，后面有機會再細說。
復雜的多圖瓦片
通過上文可知，手繪地圖要覆蓋到平臺，最關鍵的點就在于瓦片圖的層級、x/y坐標。
而這一點，其本質又是手繪地圖所在區域的經緯度所決定的。
因此，在《景區手繪地圖（電子地圖、智慧導覽系統）如何制作》以及《景區手繪地圖的繪制流程》都有所提及或強調，手繪地圖底圖的獲取，可以基于系統直接下載。然后設計師在設計手繪地圖的時候，需要特別注意，不能隨意修改手繪地圖的像素尺寸。因為修改之后，就會導致區域發生變化，然后經緯度就會出現誤差。
在下載地圖底圖的時候，系統已知地圖的經緯度，因此系統在對完成的手繪地圖進行切片的時候，就會從默認記憶的經緯度開始計算，通過地球的經緯度、墨卡托坐標、像素偏移三者的轉換關系，計算出當前手繪圖層的第一張瓦片的偏移位置。找到此關鍵之后，后面切圖就非常簡單，只需要以256像素為依據，進行累加切圖即可。
這里需要注意的是，實際上256像素的瓦片，在手機上的顯示效果并不佳，看上去不是很清晰。這里涉及手機屏幕和PC屏幕硬件及顯示像素的差異原理。解決此問題不難，這里便不展開說明了。
瓦片圖準確覆蓋
因為手繪地圖打開之后，要加載的瓦片圖很多，即便是只加載可視區域內的瓦片圖，數量也是不少。因此，為了用戶在使用手繪地圖時有更好的放大、縮小查看的體驗，我們可以使用預加載瓦片圖方案。
具體的方案就是，系統在完成用戶當前所在層級的瓦片圖加載之后，便可以對相鄰的大一級和小一級的瓦片圖進行加載。因為知道當前層級的經緯度，因此也能計算出相鄰的兩個級別的經緯度，進而對相應的瓦片圖進行加載。加載之后，當用戶放大或縮小手繪地圖層級時，便可快速顯示瓦片圖而不需要再臨時加載，獲得“網絡更快”的體驗。
實現預加載的核心代碼：
預加載的兩個相鄰層級的瓦片圖
手繪地圖覆蓋到底圖的方式，其實還有更多，但根據我有限的經驗，覺得其他方式都沒有TileLayer.Flexible接口靈活和實用，因此不再過多贅述。
另外說一點，這個接口的復雜效果，個人經驗是高德地圖支持最完善。因此一直以來我都首推高德地圖作為手繪地圖平臺。
在本文最后，衷心感謝各大地圖開放平臺。他們提供了大量可免費使用的資源，使得無數企業作為服務商可以為更多各行各業的需求方提供各種各樣的解決方案，創造了難以估量的經濟價值，體現了大企業的責任和擔當。
最后，列一些開放地圖平臺文檔：
高德地圖：
百度地圖：
騰訊地圖：
谷歌地圖：
掃碼關注微信公眾號
