HTML超大圖片加載顯示解決方案--圖片切割轉換成瓦片地圖(BaiduMapTileCutter)

前言

項目中遇到加載網頁加載顯示大圖片的需求(>100MB),參考百度地圖等地圖加載思路,將超大圖片切割成瓦片地圖,分級別展示,這樣動態加載大圖片時,只異步加載圖片的部分區域,實現超大圖片的高效加載顯示。

1.瓦片切分工具-BaiduMapTileCutter

在github上發現一款開源瓦片切割工具,BaiduMapTileCutter,能夠將圖片切分成3-20級的瓦片,同時會生成一個index.html文件,用瀏覽器打開就能看到切分成瓦片地圖的圖片的展示效果,不過index.html需要聯網加載一些js文件才能正常顯示。

但是在實際使用時發現該工具處理超過100MB的圖片時,會出現崩潰,報內存不足,最終錯誤定位在new Bitmap(imgPath)函數,說明問題出在加載大圖片這塊。猜測可能時該程序使用32位編譯,文件過大會導致內存不足。

2.重新按64位編譯BaiduMapTileCutter

首先感謝github。

BaiduMapTileCutter使用C#語言編寫,可以用VS2013直接打開該工程,更改工程按X64編譯,如果F5調試並編譯可能會報 ***工作站**錯誤,是由於workstation服務未開jiwei5啓,不是什麼大問題,百度該錯誤解決即可,不慌。

可能由於.Net版本的問題,VS2013中我的C#不支持 get => y;;這種語法,改成get {return y;}即可編譯通過。

如果是編譯運行成功後,會在bin下生成X64文件夾,裏面的.exe程序即是我們想要的64位版本的BaiduMapTileCutter。

測試運行64的BaiduMapTileCutter,加載處理200MB的圖片毫無壓力。

 

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