独辟蹊径：逆推Krpano切图算法，实现在浏览器切多层级瓦片图 _生活百科

前言

此文我首发于CSDN（所以里面的图片有它的水?。?/li>
趁着隔离梳理一下之前做的一个有用的功能：在浏览器中去切割多分辨率瓦片图
这是一个有趣的过程，跟我一起探索吧
阅读本文需具备前置知识：对krpano有所了解，如：使用krpano去开发全景

本着故弄玄虚的原则，最精彩的会放到最后揭晓，由浅入深，层层递进！
1.功能简介

减轻服务器压力，krpano切图比较消耗CPU和内存，我们团队的服务器曾经因为太多人同时切图导致卡顿、宕机
提升切图速度，在js切图速度会比后端快，前端切图与后端切图可以同时使用，这样切图速度可以快100%以上
无水印， krpano是需要花钱注册的，没有注册的情况下去切图会有无数水?。?使用本工具可以解决这个问题
提升用户体验，立方体切图仅需要几秒钟，在移动端APP中，切图可以立马生成全景且仅保留在本地，点击保存的时候才上传到云端
......

DEMO: https://irispro.github.io/krpanoJSToolDemo/dist/index.htmlGitHub源码地址：https://github.com/IrisPro/KrpanoToolJSNPM地址：https://www.npmjs.com/package/@krpano/js-tools

2.回顾krpano切图

在以往，咱们最常用的切图方式是使用krpanotools命令行工具在服务器切图，如果是手动切图的话，就会在本地使用 MAKE VTOUR (MULTIRES) droplet、MAKE VTOUR (NORMAL) droplet，在1.20开始使用krpano Tools应用程序可以进行可视化操作，除了切图外，还能方便还原全景图。

文章插图
3.krpano切图最常用的方式

第一，普通切图，即立方体切图，将全景图切为上、下、左、右、前、后6张图。优点：切图速度快，占用存储少。缺点：场景启动时间不够快，放大模糊。
第二，多分辨率切图，跟瓦片地图原理类似。优点：启动速度快，图片清晰。缺点：占用存储较多，切图时间较久，一般用于航拍、风景等大范围场景的需求，室内样板间预览，几乎不太需要。比较著名的应用案例大家可以看看720云上的何同学六百万粉丝合影，这一个场景的图片超过了百万张。在地图领域中是必用的技术.（如此就能够根据不同的缩放等级来显示不同的清晰度的图像，这样的好处是如果要加载一张4k的全景图，不需要一次性就将整个全景图都加载进来，可以先加载一个缩放等级低的全景，然后当使用者进行缩放查看细节的时候再加载清晰度更高的图像，这样就可以明显提高加载速度，避免因为图片过大使得加载时间过长和不必要的流量浪费。不足之处就是需要为一张全景图额外准备不同清晰度的图片，增加了图片处理的工作量，也增加了图片存储的空间占用。）

4.瓦片地图金字塔模型

瓦片地图金字塔模型是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但表示的地理范围不变。首先确定地图服务平台所要提供的缩放级别的数量N，把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层，即第0层，并对其进行分块，从地图图片的左上角开始，从左至右、从上到下进行切割，分割成相同大小(比如256x256像素)的正方形地图瓦片，形成第0层瓦片矩阵;在第0层地图图片的基础上，按每像素分割为2×2个像素的方法生成第1层地图图片，并对其进行分块，分割成与下一层相同大小的正方形地图瓦片，形成第1层瓦片矩阵;采用同样的方法生成第2层瓦片矩阵;…;如此下去，直到第N一1层，构成整个瓦片金字塔。

文章插图