Skip to content

Tile System(Compatibility)

huangkui edited this page Jul 13, 2020 · 1 revision

Tile System

栅格瓦片系统 通过distance error计算地图的level 通过PerspectiveCamera矩阵构造的视锥(Frustrum)与地球表面相交覆盖的区域,获取瓦片 在交互Camera时会更新Frustrum相关参数(在Quadtree.js应用相关参数计算覆盖区域) 获取到瓦片和瓦片的boundary后,通过构建8x8个顶点的曲面,在曲面上贴瓦片纹理以实现球面的效果

//构造 8x8 个顶点的曲面
const lerp = 8, factor = 1/lerp;
 for (let x = 0; x <= lerp; x++)
    for (let y = 0; y <= lerp; y++) {
        const g1 = new Geographic(start.longitude + x * factor * rangeX, 
        start.latitude + y * factor * rangeY,
        0);
        //经纬度插值后,算成笛卡尔坐标
        const spaceCoord = PSEUDOMERCATOR.geographicToSpace(g1);
        //顶点数组
        vertices = vertices.concat(spaceCoord._out);
        //纹理索引
        texcoords = texcoords.concat([x * factor, y * factor]);
    }

矢量瓦片系统 矢量瓦片系统相比于栅格瓦片系统,多了经纬度坐标换算笛卡尔坐标的过程。 绘制方法远比直接应用纹理,将瓦片当作纹理贴在8x8个顶点构成的曲面上。

Clone this wiki locally