优化代码。

This commit is contained in:
tengge1 2019-04-05 10:52:14 +08:00
parent ee83ea2a33
commit 87f9903db4
4 changed files with 69 additions and 131 deletions

View File

@ -135,7 +135,7 @@ TiledLayerRenderer.prototype.render = function (layer) {
this.creator.get().forEach((n, i) => {
if (!n.mesh) {
n.mesh = new THREE.ArrowHelper(new THREE.Vector3().copy(n._p0).normalize(), new THREE.Vector3().copy(n._p0), WGS84.a * 0.2);
n.mesh = new THREE.ArrowHelper(new THREE.Vector3().copy(n._vertices[0]).normalize(), new THREE.Vector3().copy(n._vertices[0]), WGS84.a * 0.2);
}
this.globe.add(n.mesh);

View File

@ -1,3 +1,4 @@
import WGS84 from '../core/WGS84';
import TileCreator from './TileCreator';
import Tile from './Tile';
import TiledMaterial from '../render/material/TiledMaterial';
@ -14,6 +15,7 @@ function SphereTileCreator(camera) {
this.cache = new Map();
this._center = new THREE.Vector3();
this._centerZoom = 0;
this._projScreenMatrix = new THREE.Matrix4();
this._frustum = new THREE.Frustum();
@ -27,6 +29,9 @@ SphereTileCreator.prototype.get = function () {
this.tiles.length = 0;
MathUtils.xyzToLonlat(this.camera.position, this._center);
this._centerZoom = MathUtils.altToZoom(this.camera.position.length() - WGS84.a);
this._projScreenMatrix.multiplyMatrices(this.camera.projectionMatrix, this.camera.matrixWorldInverse);
this._frustum.setFromMatrix(this._projScreenMatrix);
@ -70,12 +75,25 @@ SphereTileCreator.prototype.canFork = function () {
var xyz = new THREE.Vector3();
return function (tile) {
if (tile.z < 1) {
// if (tile.z > this._centerZoom) { // this._centerZoom: { min: 0 }
// return false;
// }
if (tile.z === 0) {
return true;
}
return false;
// 判断tile是否在视野范围内
// var intersect = false;
// debugger
// return false;
// return true;
// var frustum = this._frustum;
// if (tile.z >= 5) {

View File

@ -1,8 +1,6 @@
import WGS84 from '../core/WGS84';
import MathUtils from '../utils/MathUtils';
var lonlat = new THREE.Vector3();
/**
* 瓦片
* @author tengge / https://github.com/tengge1
@ -15,23 +13,13 @@ function Tile(x = 0, y = 0, z = 0) {
this.y = y;
this.z = z;
// 范围(弧度)
this._aabb = this._getBox(x, y, z);
// 中心点
this._center = new THREE.Vector2();
this._aabb.getCenter(this._center);
// 顶点
this._p0 = MathUtils._lonlatToXYZ(lonlat.set(this._center.x, this._center.y, 0)); // 中心点
this._p1 = MathUtils._lonlatToXYZ(lonlat.set(this._aabb.min.x, this._aabb.min.y, 0)); // 左下
this._p2 = MathUtils._lonlatToXYZ(lonlat.set(this._aabb.max.x, this._aabb.min.y, 0)); // 右下
this._p3 = MathUtils._lonlatToXYZ(lonlat.set(this._aabb.max.x, this._aabb.max.y, 0)); // 右上
this._p4 = MathUtils._lonlatToXYZ(lonlat.set(this._aabb.min.x, this._aabb.max.y, 0)); // 左上
this._center = this._getCenter(this._aabb);
this._vertices = this._getVertices(this._aabb, this._center);
}
/**
* 计算包围盒弧度
* 获取包围盒
* @param {*} x
* @param {*} y
* @param {*} z
@ -43,9 +31,8 @@ Tile.prototype._getBox = function (x, y, z) {
var maxY = Math.PI - size * y;
var minY = maxY - size;
// 墨卡托投影反算
minY = 2 * Math.atan(Math.exp(minY)) - Math.PI / 2;
maxY = 2 * Math.atan(Math.exp(maxY)) - Math.PI / 2;
minY = MathUtils._mercatorLatInvert(minY);
maxY = MathUtils._mercatorLatInvert(maxY);
return new THREE.Box2(
new THREE.Vector2(minX, minY),
@ -53,4 +40,30 @@ Tile.prototype._getBox = function (x, y, z) {
);
};
/**
* 获取中心点
* @param {*} aabb
*/
Tile.prototype._getCenter = function (aabb) {
var center = new THREE.Vector2();
return aabb.getCenter(center);
};
/**
* 获取顶点
*/
Tile.prototype._getVertices = function () {
var lonlat = new THREE.Vector3();
return function (aabb, center) {
var p0 = MathUtils._lonlatToXYZ(lonlat.set(center.x, center.y, 0)); // 中心点
var p1 = MathUtils._lonlatToXYZ(lonlat.set(aabb.min.x, aabb.min.y, 0)); // 左下
var p2 = MathUtils._lonlatToXYZ(lonlat.set(aabb.max.x, aabb.min.y, 0)); // 右下
var p3 = MathUtils._lonlatToXYZ(lonlat.set(aabb.max.x, aabb.max.y, 0)); // 右上
var p4 = MathUtils._lonlatToXYZ(lonlat.set(aabb.min.x, aabb.max.y, 0)); // 左上
return [p0, p1, p2, p3, p4];
};
}();
export default Tile;

View File

@ -82,7 +82,7 @@ function xyzToLonlat(xyz, lonlat) {
/**
* 层级转海拔
* @param {float} zoom 层级
* @param {Number} zoom 层级
*/
function zoomToAlt(zoom) {
return 7820683 / 2 ** zoom;
@ -90,7 +90,7 @@ function zoomToAlt(zoom) {
/**
* 海拔转层级
* @param {float} alt 海拔
* @param {Number} alt 海拔
*/
function altToZoom(alt) {
return Math.log2(7820683 / alt);
@ -98,71 +98,38 @@ function altToZoom(alt) {
/**
* 墨卡托投影弧度
* @param {THREE.Vector2} lonlat 经纬度弧度
* @param {THREE.Vector2} mercatorXY 墨卡托投影坐标
* @param {Number} lat 纬度弧度
* @see https://github.com/d3/d3-geo/blob/master/src/projection/mercator.js
*/
function _mercator(lonlat, mercatorXY) {
if (mercatorXY === undefined) {
mercatorXY = new THREE.Vector2();
}
return mercatorXY.set(
lonlat.x,
Math.log(Math.tan((Math.PI / 2 + lonlat.y) / 2))
);
function _mercatorLat(lat) {
return Math.log(Math.tan((Math.PI / 2 + lat) / 2));
}
/**
* 墨卡托投影角度
* @param {THREE.Vector2} lonlat 经纬度角度
* @param {THREE.Vector2} mercatorXY 墨卡托投影坐标
* @param {Number} lat 纬度角度
* @see https://github.com/d3/d3-geo/blob/master/src/projection/mercator.js
*/
function mercator(lonlat, mercatorXY) {
if (mercatorXY === undefined) {
mercatorXY = new THREE.Vector2();
}
mercatorXY.x = lonlat.x * Math.PI / 180;
mercatorXY.y = lonlat.y * Math.PI / 180;
return _mercator(mercatorXY, mercatorXY);
function mercatorLat(lat) {
return _mercatorLat(lat * Math.PI / 180);
}
/**
* 墨卡托投影反算弧度
* @param {THREE.Vector2} mercatorXY 墨卡托坐标
* @param {THREE.Vector2} lonlat 经纬度弧度
* @param {Number} y 墨卡托投影Y坐标
* @see https://github.com/d3/d3-geo/blob/master/src/projection/mercator.js
*/
function _mercatorInvert(mercatorXY, lonlat) {
if (lonlat === undefined) {
lonlat = new THREE.Vector2();
}
return lonlat.set(
mercatorXY.x,
2 * Math.atan(Math.exp(mercatorXY.y)) - Math.PI / 2
);
function _mercatorLatInvert(y) {
return 2 * Math.atan(Math.exp(y)) - Math.PI / 2;
}
/**
* 墨卡托投影反算角度
* @param {THREE.Vector3} mercatorXY 墨卡托坐标
* @param {THREE.Vector3} lonlat 经纬度角度
* @param {Number} y 墨卡托投影Y坐标
* @see https://github.com/d3/d3-geo/blob/master/src/projection/mercator.js
*/
function mercatorInvert(mercatorXY, lonlat) {
if (lonlat === undefined) {
lonlat = new THREE.Vector2();
}
_mercatorInvert(mercatorXY, lonlat);
lonlat.x *= 180 / Math.PI;
lonlat.y *= 180 / Math.PI;
return lonlat;
function mercatorLatInvert(y) {
return _mercatorLatInvert(y) * 180 / Math.PI;
}
/**
@ -195,59 +162,6 @@ function getDistance(lon1, lat1, lon2, lat2) {
return _getDistance(lon1, lat1, lon2, lat2);
}
/**
* 获取瓦片墨卡托投影范围(弧度)
* @param {*} x
* @param {*} y
* @param {*} z
*/
function _getTileMercatorBox(x, y, z) {
var size = Math.PI * 2 / 2 ** z;
var minX = -Math.PI + size * x;
var maxX = minX + size;
var maxY = Math.PI - size * y;
var minY = maxY - size;
return { minX, minY, maxX, maxY };
}
/**
* 获取瓦片墨卡托投影范围(角度)
* @param {*} x
* @param {*} y
* @param {*} z
*/
function getTileMercatorBox(x, y, z) {
var aabb = _getTileMercatorBox(x, y, z);
aabb.minX *= 180 / Math.PI;
aabb.minY *= 180 / Math.PI;
aabb.maxX *= 180 / Math.PI;
aabb.maxY *= 180 / Math.PI;
return { minX, minY, maxX, maxY };
}
/**
* 获取瓦片真实经纬度范围弧度
* @param {*} x
* @param {*} y
* @param {*} z
*/
function _getTileBox(x, y, z) {
let { minX, minY, maxX, maxY } = _getTileMercatorBox(x, y, z);
minY = 2 * Math.atan(Math.exp(minY)) - Math.PI / 2;
maxY = 2 * Math.atan(Math.exp(maxY)) - Math.PI / 2;
return {
minX,
minY,
maxX,
maxY,
};
}
/**
* 数学工具
* @author tengge / https://github.com/tengge1
@ -268,23 +182,16 @@ var MathUtils = {
altToZoom,
// 墨卡托投影
_mercator,
mercator,
_mercatorLat,
mercatorLat,
// 墨卡托投影反算
_mercatorInvert,
mercatorInvert,
_mercatorLatInvert,
mercatorLatInvert,
// 计算两个经纬度之间距离
_getDistance,
getDistance,
// 获取瓦片墨卡托投影范围
_getTileMercatorBox,
getTileMercatorBox,
// 获取瓦片真实范围
_getTileBox,
};
export default MathUtils;