跟牛老师一起学WEBGIS——WEBGIS基础（地图切片）

2.1 切片服务

1.定义

瓦片数据是将矢量或影像数据进行预处理，采用高效的缓存机制（如金字塔）形成的缓存图片集，采用“级、行、列”方式进行组织，可在网页中快速加载。因此，瓦片地图加载是根据客户端请求的地图范围和级别，通过计算行列号获取对应级别下网格的瓦片（即服务器预裁剪的图片），由这些瓦片集在客户端形成一张地图。

切片示意图

2. 重要概念

切片概念

1.切片方案原点(Tile scheme origin)

采用源数据集空间参考的坐标值，一般切片方案原点取左上角（例如：谷歌切片方案的原点是[-20037508.34,20037508.34]），但是有些切片方案原点确实左下角（例如：TMS切片方案原点是[-20037508.34,-20037508.34]）。源数据集的范围必须在此原点范围内（但不必与原点重合）。

2.切片大小（Tile Size：width，height）

缓存切片的宽度和高度（以像素为单位）。默认设置为 256x256。为在性能和可管理性之间寻求最佳平衡，应避免偏离宽度值 256 或 512。

3.dpi

专用输出设备的每英寸点数。如果所选择的 DPI 与输出设备（通常是显示器）的分辨率不匹配，则切片将显示错误比例。默认值为 96。

4.分辨率组

这个是在做切片的时候非常重要的一个参数，在前面一片文章里面已经说过了。

3857分辨率

5.切片范围

切片范围不是地图范围，是切片方案下的做切片的范围。例如，谷歌的切片范围是：[-20037508.34,-20037508.34,20037508.34,20037508.34]。

3.切片的分类

GIS的底图一直使用金字塔技术进行切图，使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片，无法进行交互。于是又引入了矢量图层用来显示矢量点线面，这通常需要先获取矢量地理数据（例如GeoJson），然后通过前端将其绘制成不同元素便能通过鼠标进行响应交互了。

栅格和矢量切片比较

1.栅格切片

随着大数据技术的发展，人们对电子地图的快速共享需求也越来越强烈。传统电子地图共享时，通常会通过瓦片裁剪工具获取栅格瓦片。相对于其他技术，栅格瓦片底图有其优越性，例如有效减少了传输数据体积，多级缩放等。然而，栅格瓦片底图也有一些短处，缺乏灵活性、实时性，数据完整性受损是比较突出的问题，这正是栅格数据的问题：

• 缺乏灵活性。栅格瓦片完成后，已经保存为图片格式，样式不可修改。若要多种栅格底图，需裁剪多分栅格瓦片底图；
• 缺乏实时性。由于栅格瓦片已保存为图片格式，当现实世界地物有变化时，不能实时更新，只能重新裁剪栅格瓦片；
• 丢失属性信息。栅格瓦片没有属性信息，若要查询图片的多边形的属性，需要到服务器重新请求。

2.矢量切片

基于栅格瓦片底图的劣势，矢量瓦片针对矢量电子地图，按照一定的标准和技术将其保存为多种比例尺的矢量分块数据，在前端显示电子地图时，可直接调用矢量分块进行绘制。

• 可保留属性信息，在客户端进行查询时，无需再次请求服务器；
• 采用分块编码模式，客户端获取时只返回请求区域和相应级别的矢量瓦片底图，且采用实时绘制矢量模式，绘制效率更高；
• 无级缩放。矢量瓦片分辨率高达4096*4096，是栅格瓦片的16倍，可保证缩放过程中的细节高度还原，且满足高分屏绘制需求；
• 自定义渲染样式。客户端显示矢量瓦片底图时，可以按照用户赋予的样式渲染。如导航地图有白天和黑夜两种模式，只需共用一份矢量瓦片底图，利用两套样式进行渲染即可；可以通过属性过滤条件可以任意过滤筛选图元，实现个性化定制；可以编辑底图中每一个矢量图层的可见状态，调整矢量层的叠加压盖顺序，修改矢量图层的颜色、大小等显示样式。

4.相关计算

说明：下面说到的计算都是基于谷歌切片方案下的计算，因此，有些参数是固定的：

const tileExtent = [-20037508.34,-20037508.34,20037508.34,20037508.34];
const tileOrigin = [-20037508.34,20037508.34];
const tileSize = 256;

1.计算xyz

// 计算经纬度100, 39在8级时的行列号
var lonlat = [100, 39];
var xy = proj(lonlat, 'EPSG:4326', 'EPSG:3857');// [11131949.079327358, 4721671.572580107]
var res8 = ((20037508.34 - (-20037508.34)) / tileSize ) / Math.pow(2, 8); // 611.4962261962891
var size = res8 * 256;// 4891.9698095703125
var x = Math.floor((xy[0] - tileOrigin[0]) / size); //6371
var y = Math.floor((tileOrigin[1] - xy[1]) / size); //3130

2.计算切片范围

// 计算8级，行列号为100， 100的切片范围
var res8 = ((20037508.34 - (-20037508.34)) / tileSize ) / Math.pow(2, 8); // 611.4962261962891
var size = res8 * 256;// 4891.9698095703125
var xmin = 100 * size + tileOrigin[0]; //-19548311.35904297
var xmax = (100 + 1) * size + tileOrigin[0]; //-19543419.3892334
var ymin = tileOrigin[1] - (100 + 1) * size; //19543419.3892334
var ymax = tileOrigin[1] - 100 * size; //19548311.35904297