跟牛老师一起学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

logo

LZU-GIS CSDN认证博客专家 牛老师 lzugis webgis
12年毕业于兰州大学地理信息系统专业。毕业至今,一直在从事着GIS开发相关的工作,精通GIS与webgis原理,精通openlayers、leaflet、mapbox等webgis框架,精通PostGIS、OracleSpatial等空间数据库,熟练掌握html、css、js、vue等前端技术。乐于分享,同时在腾讯课堂上有开设开源webgis、mapboxGL相关的课程。
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页