区块链技术博客
www.b2bchain.cn

Babylon.js 构建 地球,支持切片地图 (一)求职学习资料

本文介绍了Babylon.js 构建 地球,支持切片地图 (一)求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

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

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

Babylon.js 构建 地球,支持切片地图 (一)

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 构建
“`javascript
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();

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

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

Babylon.js 构建 地球,支持切片地图 (一)

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 构建
“`javascript
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();

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

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

Babylon.js 构建 地球,支持切片地图 (一)

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 构建
“`javascript
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();

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Babylon.js 构建 地球,支持切片地图 (一)求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们