Babylon.js 构建 地球，支持切片地图 （一）

今天我们来分享一下用babylonjs 构建三维地球， 并且支持 常用的第三方切片

首先我们先有一个工具类，支持切片计算，设置等级 经纬度转化等函数工具类

Tile 类

export class Tile {
constructor(offsetX, offsetY, level, k, j, nFaces, quadKey) {
this.offsetX = offsetX,
this.offsetY = offsetY,
this.level = level,
this.k = k,
this.j = j,
this.nFaces = nFaces,
this.quadKey = quadKey
}
}
EarthTool 构建

const BABYLON = require('babylonjs');
import {Tile} from './Tile'
export class EarthTool {
static ComputeVisibleTiles(t, i, n, r, o) {
o && (t -= 3,
i -= 3);
const s = []
, a = Math.pow(2, n)
, c = EarthTool.Size / a;
let l = 0
, u = 0
, h = 180
, d = 360;
for (let e = 0; e < n; e++) h /= 2, d /= 2, l += h, u += d; const f = -l , p = l; for (let m = i; m < i + r; m++) for (let i = t; i < t + r; i++) { if (m < 0 || i < 0) continue; const t = -(u + f - i * c) , r = p - m * c; if (m > a - 1 || i > a - 1)
continue;
const o = EarthTool.TileXYToQuadKey(i, m, n);
s.push(new Tile(t,r,n,i,m,a,o))
}
return s
}
static CameraToLatlong(t, i) {
Math;
const n = -(t % EarthTool.PIX2 * 180 / Math.PI - 90);
let r = i % EarthTool.PIX2;
return r < 0 && (r += EarthTool.PIX2), r *= 180 / Math.PI, r > 180 && (r -= 360),
new BABYLON.Vector2(n,r)
}
static SetLevel() {
for (let t = 0; t < 21; t++) EarthTool.Levels.push(512 * Math.pow(2, t)) } static GetBestLevelResolution(t, i) { const n = window.devicePixelRatio * i , r = Math.tan(t / 100 * .5); let o = 0; for (o = 0; o < EarthTool.Levels.length; o++) if (r * EarthTool.Levels[o] >= n)
return 0 === o ? 1 : o;
return o - 1
}
static LatLongToVec3(t, i, n) {
EarthTool.RadiusOffset = n,
EarthTool.Phi = (90 - t) * (Math.PI / 180),
EarthTool.Theta = i * (Math.PI / 180);
const r = EarthTool.RadiusOffset * Math.sin(EarthTool.Phi) * Math.cos(EarthTool.Theta)
, o = EarthTool.RadiusOffset * Math.cos(EarthTool.Phi)
, s = EarthTool.RadiusOffset * Math.sin(EarthTool.Phi) * Math.sin(EarthTool.Theta);
return new BABYLON.Vector3(r,o,s)
}
static Vec3ToLatLong(e, t) {
const i = BABYLON.Vector2.Zero();

更多参考 https://xiaozhuanlan.com/topic/5876129340