前言
- 此文我首發(fā)于CSDN（所以里面的圖片有它的水印）
- 趁著隔離梳理一下之前做的一個有用的功能：在瀏覽器中去切割多分辨率瓦片圖
- 這是一個有趣的過程，跟我一起探索吧
- 閱讀本文需具備前置知識：對krpano有所了解，如：使用krpano去開發(fā)全景
1.功能簡介
- 減輕服務(wù)器壓力，krpano切圖比較消耗CPU和內(nèi)存，我們團(tuán)隊的服務(wù)器曾經(jīng)因為太多人同時切圖導(dǎo)致卡頓、宕機(jī)
- 提升切圖速度，在js切圖速度會比后端快，前端切圖與后端切圖可以同時使用，這樣切圖速度可以快100%以上
- 無水印，krpano是需要花錢注冊的，沒有注冊的情況下去切圖會有無數(shù)水印，使用本工具可以解決這個問題
- 提升用戶體驗，立方體切圖僅需要幾秒鐘，在移動端APP中，切圖可以立馬生成全景且僅保留在本地，點(diǎn)擊保存的時候才上傳到云端
- ......
DEMO: https://irispro.github.io/krpanoJSToolDemo/dist/index.htmlGitHub源碼地址：https://github.com/IrisPro/KrpanoToolJSNPM地址：https://www.npmjs.com/package/@krpano/js-tools2.回顧krpano切圖
- 在以往，咱們最常用的切圖方式是使用krpanotools命令行工具在服務(wù)器切圖，如果是手動切圖的話，就會在本地使用 MAKE VTOUR (MULTIRES) droplet、MAKE VTOUR (NORMAL) droplet，在1.20開始使用krpano Tools應(yīng)用程序可以進(jìn)行可視化操作，除了切圖外，還能方便還原全景圖 。
文章插圖
3.krpano切圖最常用的方式
- 第一，普通切圖，即立方體切圖，將全景圖切為上、下、左、右、前、后6張圖 。優(yōu)點(diǎn)：切圖速度快，占用存儲少 。缺點(diǎn)：場景啟動時間不夠快，放大模糊 。
- 第二，多分辨率切圖，跟瓦片地圖原理類似 。優(yōu)點(diǎn)：啟動速度快，圖片清晰 。缺點(diǎn)：占用存儲較多，切圖時間較久，一般用于航拍、風(fēng)景等大范圍場景的需求，室內(nèi)樣板間預(yù)覽，幾乎不太需要 。比較著名的應(yīng)用案例大家可以看看720云上的何同學(xué)六百萬粉絲合影，這一個場景的圖片超過了百萬張 。在地圖領(lǐng)域中是必用的技術(shù).（如此就能夠根據(jù)不同的縮放等級來顯示不同的清晰度的圖像，這樣的好處是如果要加載一張4k的全景圖，不需要一次性就將整個全景圖都加載進(jìn)來，可以先加載一個縮放等級低的全景，然后當(dāng)使用者進(jìn)行縮放查看細(xì)節(jié)的時候再加載清晰度更高的圖像，這樣就可以明顯提高加載速度，避免因為圖片過大使得加載時間過長和不必要的流量浪費(fèi) 。不足之處就是需要為一張全景圖額外準(zhǔn)備不同清晰度的圖片，增加了圖片處理的工作量，也增加了圖片存儲的空間占用 。）
瓦片地圖金字塔模型是一種多分辨率層次模型，從瓦片金字塔的底層到頂層，分辨率越來越低，但表示的地理范圍不變 。首先確定地圖服務(wù)平臺所要提供的縮放級別的數(shù)量N，把縮放級別最高、地圖比例尺最大的地圖圖片作為金字塔的底層，即第0層，并對其進(jìn)行分塊，從地圖圖片的左上角開始，從左至右、從上到下進(jìn)行切割，分割成相同大小(比如256x256像素)的正方形地圖瓦片，形成第0層瓦片矩陣;在第0層地圖圖片的基礎(chǔ)上，按每像素分割為2×2個像素的方法生成第1層地圖圖片，并對其進(jìn)行分塊，分割成與下一層相同大小的正方形地圖瓦片，形成第1層瓦片矩陣;采用同樣的方法生成第2層瓦片矩陣;…;如此下去，直到第N一1層，構(gòu)成整個瓦片金字塔 。
經(jīng)驗總結(jié)擴(kuò)展閱讀
