地图切片

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 1.8k 阅读时长 ≈ 3 分钟

定义

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

imagePyramid

重要概念切片概念

切片方案原点(Tile scheme origin)

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

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

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

dpi

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

分辨率组

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

切片范围

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

分类

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

切片处理

根据zoom获取显示范围内tiles（x、y、z）、对应位置获取并加载对应xyz的瓦片

切片调试代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
loadTiles(zoom){
     // 根据缩放级别和当前地图范围计算瓦片范围
     const mapExtent = this.map.getView().calculateExtent();
     const tileLayer = this.map.getLayers().item(0); // 获取第一个图层
     const tileSource = tileLayer.getSource(); // 获取图层的源

     const tileGrid = this.map.getLayers().item(0).getSource().getTileGrid();
     
     const mapExtent_3857 = [fromLonLat([mapExtent[0],mapExtent[1]])[0],
       fromLonLat([mapExtent[0],mapExtent[1]])[1],
       fromLonLat([mapExtent[2],mapExtent[3]])[0],
       fromLonLat([mapExtent[2],mapExtent[3]])[1]]

     // 计算当前地图范围内的瓦片行列号
     tileGrid.forEachTileCoord(mapExtent_3857, Math.round(zoom), (tileCoord) => {
       console.log(tileCoord)
       // 加载对应的瓦片
       const tileUrl = tileSource.getTileUrlFunction()(tileCoord);
       // console.log('Tile URL:', tileUrl)
     });
   },
1
2
3
4
5
6
7
8
url: 'http://127.0.0.1:3000/tile/{z}/{x}/{y}'
// TileDebug
this.map.addLayer(new TileLayer({
       source: new TileDebug({
         projection: 'EPSG:3857',            // Web墨卡托投影坐标系
         tileGrid: this.tdLayervec.getSource().getTileGrid()   // 获取地图的瓦片坐标系
       })
     }))