+ 
A WebGL virtual globe and map engine
- - ++
+
A WebGL virtual globe and map engine
- - +
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+
+
+
\ No newline at end of file
diff --git a/src/world/Camera.ts b/src/core/world/Camera.ts
old mode 100755
new mode 100644
similarity index 80%
rename from src/world/Camera.ts
rename to src/core/world/Camera.ts
index 32d0a34..91d7db9
--- a/src/world/Camera.ts
+++ b/src/core/world/Camera.ts
@@ -1,59 +1,61 @@
-import Kernel = require('./Kernel');
-import Utils = require('./Utils');
-import MathUtils = require('./math/Utils');
-import Vertice = require('./math/Vertice');
-import Vector = require('./math/Vector');
-import Line = require('./math/Line');
-import Plan = require('./math/Plan');
-import TileGrid,{TileGridPosition} from './TileGrid';
-import Matrix = require('./math/Matrix');
-import Object3D = require('./Object3D');
+import Kernel from './Kernel';
+import Utils from './Utils';
+import { EventEmitter } from './Events';
+import MathUtils from './math/Utils';
+import Vertice from './math/Vertice';
+import Vector from './math/Vector';
+import Line from './math/Line';
+import Plan from './math/Plan';
+import TileGrid, { TileGridPosition } from './TileGrid';
+import Matrix from './math/Matrix';
+import Object3D from './Object3D';
+import Extent from './Extent';
-export class CameraCore{
- constructor(private fov: number, private aspect: number, private near: number, private far: number, private floatLevel: number, private matrix: Matrix){
+export class CameraCore {
+ constructor(private fov: number, private aspect: number, private near: number, private far: number, private floatLevel: number, private matrix: Matrix) {
}
- getFov(){
+ getFov() {
return this.fov;
}
- getAspect(){
+ getAspect() {
return this.aspect;
}
- getNear(){
+ getNear() {
return this.near;
}
- getFar(){
+ getFar() {
return this.far;
}
- getFloatLevel(){
+ getFloatLevel() {
return this.floatLevel;
}
- getMatrix(){
+ getMatrix() {
return this.matrix;
}
- equals(other: CameraCore): boolean{
- if(!other){
+ equals(other: CameraCore): boolean {
+ if (!other) {
return false;
}
return this.fov === other.getFov() &&
- this.aspect === other.getAspect() &&
- this.near === other.getNear() &&
- this.far === other.getFar() &&
- this.floatLevel === other.getFloatLevel() &&
- this.matrix.equals(other.getMatrix());
+ this.aspect === other.getAspect() &&
+ this.near === other.getNear() &&
+ this.far === other.getFar() &&
+ this.floatLevel === other.getFloatLevel() &&
+ this.matrix.equals(other.getMatrix());
}
}
-const realResolutionCache:any = {};
-(function(){
- for(var i = 0; i <= Kernel.MAX_LEVEL; i++){
+const realResolutionCache: any = {};
+(function () {
+ for (var i = 0; i <= Kernel.MAX_LEVEL; i++) {
realResolutionCache[i] = Kernel.MAX_REAL_RESOLUTION / Math.pow(2, i);
}
})();
@@ -62,7 +64,7 @@ class Camera extends Object3D {
private readonly initFov: number;
private readonly animationDuration: number = 200;//层级变化的动画周期，毫秒
private readonly nearFactor: number = 0.6;
- private readonly maxPitch:number = 40;
+ private readonly maxPitch: number = 40;
private readonly resolutionFactor1: number = Math.pow(2, 0.3752950);
private readonly resolutionFactor2: number = Math.pow(2, 1.3752950);
@@ -74,7 +76,7 @@ class Camera extends Object3D {
// private resolutionInWorld: number = -1;//屏幕1px在实际世界中的距离
private level: number = -1;//当前渲染等级
- private floatLevel: number = -2;//可能是正数，可能是非整数，非整数表示缩放动画过程中的level
+ private floatLevel: number = -2;//可能是整数，可能是非整数，非整数表示缩放动画过程中的level
private lastFloatLevel: number = -3;//上次render()时所用到的this.realLevel
private lastMatrix: Matrix;//上次render()时的this.matrix
@@ -92,16 +94,21 @@ class Camera extends Object3D {
private projMatrixForDraw: Matrix;
private projViewMatrixForDraw: Matrix;//实际传递给shader的矩阵是projViewMatrixForDraw，而不是projViewMatrix
- private lonlatsOfBoundary:number[][] = null;
+ /*left top,left middle,left bottom,right top,right middle,right bottom,middle top,middle bottom*/
+ //如果没有交点，怎么没有对应的数据，长度就会小于8
+ private lonlatsOfBoundary: number[][] = null;
private animating: boolean = false;
+ private eventEmitter: EventEmitter = null;
+
//this.near一旦初始化之后就不应该再修改
//this.far可以动态计算
//this.aspect在Viewport改变后重新计算
//this.fov可以调整以实现缩放效果
- constructor(private fov:number = 45, private aspect:number = 1, private near:number = 1, private far:number = 100, level:number = 3, lonlat:number[] = [0, 0]) {
+ constructor(private canvas: HTMLCanvasElement, private fov: number = 45, private aspect: number = 1, private near: number = 1, private far: number = 100, level: number = 3, lonlat: number[] = [0, 0]) {
super();
+ this.eventEmitter = new EventEmitter();
this.lonlatsOfBoundary = [];
this.initFov = this.fov;
this.lastMatrix = new Matrix();
@@ -112,19 +119,41 @@ class Camera extends Object3D {
this.update(true);
}
- isEarthFullOverlapScreen(){
+ getExtent() {
+ var extent: Extent = null;
+ if (this.isEarthFullOverlapScreen()) {
+ var lons: number[] = [];
+ var lats: number[] = [];
+ this.lonlatsOfBoundary.forEach(function (lonlat) {
+ lons.push(lonlat[0]);
+ lats.push(lonlat[1]);
+ });
+ var minLon = Math.min(...lons);
+ var maxLon = Math.max(...lons);
+ var minLat = Math.min(...lats);
+ var maxLat = Math.max(...lats);
+ extent = new Extent(minLon, minLat, maxLon, maxLat);
+ }
+ return extent;
+ }
+
+ getEventEmitter() {
+ return this.eventEmitter;
+ }
+
+ isEarthFullOverlapScreen() {
return this.lonlatsOfBoundary.length === 8;
}
- getTileGridsOfBoundary(level:number, filterRepeat: boolean){
- var tileGridsOfBoundary: TileGrid[] = this.lonlatsOfBoundary.map((lonlat)=>{
+ getTileGridsOfBoundary(level: number, filterRepeat: boolean): TileGrid[] {
+ var tileGridsOfBoundary: TileGrid[] = this.lonlatsOfBoundary.map((lonlat) => {
return TileGrid.getTileGridByGeo(lonlat[0], lonlat[1], level);
});
return filterRepeat ? Utils.filterRepeatArray(tileGridsOfBoundary) : tileGridsOfBoundary;
}
- toJson():any{
- function matrixToJson(mat: Matrix){
+ toJson(): any {
+ function matrixToJson(mat: Matrix) {
return mat ? mat.toJson() : null;
}
var json = {
@@ -150,11 +179,11 @@ class Camera extends Object3D {
return json;
}
- toJsonString(){
+ toJsonString() {
return JSON.stringify(this.toJson());
}
- fromJson(json: any){
+ fromJson(json: any) {
this.matrix = Matrix.fromJson(json.matrix);
this.isZeroPitch = json.isZeroPitch;
this.level = json.level;
@@ -174,10 +203,9 @@ class Camera extends Object3D {
this.projViewMatrixForDraw = Matrix.fromJson(json.projViewMatrixForDraw);
this.animating = json.animating;
this.update(true);
- // Kernel.globe.refresh(true);
}
- fromJsonString(jsonStr: string){
+ fromJsonString(jsonStr: string) {
this.fromJson(JSON.parse(jsonStr));
}
@@ -252,9 +280,9 @@ class Camera extends Object3D {
return far;
}
- update(force: boolean = false): boolean{
+ update(force: boolean = false): boolean {
var shouldUpdate = this._updateCore(force);
- if(shouldUpdate){
+ if (shouldUpdate) {
this._updateTileGridsOfBoundary();
}
return shouldUpdate;
@@ -263,7 +291,7 @@ class Camera extends Object3D {
//更新各种矩阵，理论上只在用户交互的时候调用就可以
private _updateCore(force: boolean = false): boolean {
var shouldUpdate = force || this._isNeedUpdate();
- if(shouldUpdate){
+ if (shouldUpdate) {
this._normalUpdate();
this._updateProjViewMatrixForDraw();
}
@@ -276,9 +304,9 @@ class Camera extends Object3D {
return shouldUpdate;
}
- private _updateTileGridsOfBoundary(){
- var lonlatsOfBoundary:number[][] = [];
- var ndcs:number[][] = [
+ private _updateTileGridsOfBoundary() {
+ var lonlatsOfBoundary: number[][] = [];
+ var ndcs: number[][] = [
[-1, 1],//left top
[-1, 0],//left middle
[-1, -1],//left bottom
@@ -288,26 +316,26 @@ class Camera extends Object3D {
[0, 1],//middle top
[0, -1]//middle bottom
];
- ndcs.forEach((ndcXY:number[]) => {
+ ndcs.forEach((ndcXY: number[]) => {
var lonlat = this._getPickLonLatByNDC(ndcXY[0], ndcXY[1]);
- if(lonlat && lonlat.length > 0){
+ if (lonlat && lonlat.length > 0) {
lonlatsOfBoundary.push(lonlat);
}
});
this.lonlatsOfBoundary = lonlatsOfBoundary;
}
- getCameraCore(){
+ getCameraCore() {
return new CameraCore(this.fov, this.aspect, this.near, this.far, this.floatLevel, this.matrix.clone());
}
- private _isNeedUpdate(): boolean{
+ private _isNeedUpdate(): boolean {
return (this.fov !== this.lastFov) ||
- (this.aspect !== this.lastAspect) ||
- (this.near !== this.lastNear) ||
- (this.far !== this.lastFar) ||
- (this.floatLevel !== this.lastFloatLevel) ||
- (!this.matrix.equals(this.lastMatrix));
+ (this.aspect !== this.lastAspect) ||
+ (this.near !== this.lastNear) ||
+ (this.far !== this.lastFar) ||
+ (this.floatLevel !== this.lastFloatLevel) ||
+ (!this.matrix.equals(this.lastMatrix));
}
getProjViewMatrixForDraw(): Matrix {
@@ -334,7 +362,7 @@ class Camera extends Object3D {
var near = this.near;
//计算newFar
- var newPosition = this.matrixForDraw.getPosition();
+ // var newPosition = this.matrixForDraw.getPosition();
var newFar = this.far; //this._getMinimalFar(newPosition);
//根据newFov和newFar重新计算
@@ -419,7 +447,7 @@ class Camera extends Object3D {
}
//resolution,level
- measureXYResolutionAndBestDisplayLevel(): any{
+ measureXYResolutionAndBestDisplayLevel(): any {
//计算resolution
var p = this.matrix.getPosition();
var dir = Vector.fromVertice(p);
@@ -427,7 +455,7 @@ class Camera extends Object3D {
var pickResult1 = this._getPickCartesianCoordInEarthByLine(line);
var p1 = pickResult1[0];
var ndc1 = this._convertVerticeFromWorldToNDC(p1);
- var canvasXY1 = MathUtils.convertPointFromNdcToCanvas(ndc1.x, ndc1.y);
+ var canvasXY1 = MathUtils.convertPointFromNdcToCanvas(this.canvas.width, this.canvas.height, ndc1.x, ndc1.y);
var centerX = canvasXY1[0];
var centerY = canvasXY1[1];
@@ -458,15 +486,15 @@ class Camera extends Object3D {
}
//[resolution,level]
- calculateCurrentResolutionAndBestDisplayLevel(){
+ calculateCurrentResolutionAndBestDisplayLevel() {
var distance2EarthOrigin = this.getDistance2EarthOrigin();
return this._calculateResolutionAndBestDisplayLevelByDistance2EarthOrigin(distance2EarthOrigin);
}
- //L=>[resolution,level]
- private _calculateResolutionAndBestDisplayLevelByDistance2EarthOrigin(distance2EarthOrigin: number){
+ //distance2EarthOrigin=>[resolution,level]
+ private _calculateResolutionAndBestDisplayLevelByDistance2EarthOrigin(distance2EarthOrigin: number) {
var α2 = MathUtils.degreeToRadian(this.fov / 2);
- var α1 = Math.atan(2 / Kernel.canvas.height * Math.tan(α2));
+ var α1 = Math.atan(2 / this.canvas.height * Math.tan(α2));
var δ = Math.asin(distance2EarthOrigin * Math.sin(α1) / Kernel.EARTH_RADIUS);
var β = δ - α1;
var resolution = β * Kernel.EARTH_RADIUS * this.resolutionFactor2;
@@ -475,50 +503,63 @@ class Camera extends Object3D {
}
//D=>[resolution,level]
- private _calculateResolutionAndBestDisplayLevelByDistance2EarthSurface(distance2EarthSurface: number){
+ private _calculateResolutionAndBestDisplayLevelByDistance2EarthSurface(distance2EarthSurface: number) {
var distance2EarthOrigin = distance2EarthSurface + Kernel.EARTH_RADIUS;
return this._calculateResolutionAndBestDisplayLevelByDistance2EarthOrigin(distance2EarthOrigin);
}
//level=>D
- private _calculateDistance2EarthSurfaceByBestDisplayLevel(level: number){
+ private _calculateDistance2EarthSurfaceByBestDisplayLevel(level: number) {
return this._calculateDistance2EarthOriginByBestDisplayLevel(level) - Kernel.EARTH_RADIUS;
}
//level=>L
- private _calculateDistance2EarthOriginByBestDisplayLevel(level: number){
+ private _calculateDistance2EarthOriginByBestDisplayLevel(level: number) {
var resolution = this._calculateResolutionByLevel(level);
return this._calculateDistance2EarthOriginByResolution(resolution);
}
- //resolution=>L
- private _calculateDistance2EarthOriginByResolution(resolution: number){
+ //resolution=>distance2EarthOrigin
+ private _calculateDistance2EarthOriginByResolution(resolution: number) {
resolution /= this.resolutionFactor2;
var α2 = MathUtils.degreeToRadian(this.fov / 2);
- var α1 = Math.atan(2 / Kernel.canvas.height * Math.tan(α2));
+ var α1 = Math.atan(2 / this.canvas.height * Math.tan(α2));
var β = resolution / Kernel.EARTH_RADIUS;
var δ = α1 + β;
var distance2EarthOrigin = Kernel.EARTH_RADIUS * Math.sin(δ) / Math.sin(α1);
return distance2EarthOrigin;
}
- private _calculateLevelByResolution(resolution: number){
+ private _calculateLevelByResolution(resolution: number) {
var pow2value = Kernel.MAX_RESOLUTION / resolution;
var bestDisplayLevelFloat = MathUtils.log2(pow2value);
return bestDisplayLevelFloat;
}
- private _calculateResolutionByLevel(level: number){
+ private _calculateResolutionByLevel(level: number) {
return Kernel.MAX_RESOLUTION / Math.pow(2, level);
}
//屏幕1px在实际世界中的距离
- getResolutionInWorld(): number{
- if(realResolutionCache.hasOwnProperty(this.level)){
+ getResolutionInWorld(): number {
+ if (realResolutionCache.hasOwnProperty(this.level)) {
return realResolutionCache[this.level];
- }else{
+ } else {
return Kernel.MAX_REAL_RESOLUTION / Math.pow(2, this.level);
- }
+ }
+ }
+
+ getVertice() {
+ const origin2PositionVector = Vector.fromVertice(this.getPosition());
+ origin2PositionVector.setLength(Kernel.EARTH_RADIUS);
+ const p = origin2PositionVector.getVertice();
+ return p;
+ }
+
+ getLonlat() {
+ const p = this.getVertice();
+ const lonlat = MathUtils.cartesianCoordToGeographic(p);
+ return lonlat;
}
getLevel(): number {
@@ -529,18 +570,26 @@ class Camera extends Object3D {
if (!(Utils.isNonNegativeInteger(level))) {
throw "invalid level:" + level;
}
- if(level < Kernel.MIN_LEVEL){
+ if (level < Kernel.MIN_LEVEL) {
level = Kernel.MIN_LEVEL;
}
- if(level > Kernel.MAX_LEVEL){
+ if (level > Kernel.MAX_LEVEL) {
level = Kernel.MAX_LEVEL;
}
- if (level !== this.level || force) {
+ const oldLevel = this.level;
+ const levelChanged = level !== this.level;
+ if (levelChanged || force) {
//不要在this._updatePositionByLevel()方法中更新this.level，因为这会影响animateToLevel()方法
- var isLevelChanged = this._updatePositionByLevel(level, this.matrix);
+ this._updatePositionByLevel(level, this.matrix);
this.level = level;
this.floatLevel = level;
}
+ if(levelChanged){
+ Utils.publish('level-change', {
+ oldLevel: oldLevel,
+ newLevel: this.level
+ });
+ }
}
// calculateInitDistanceToOrigin(factor:number = 1){
@@ -550,7 +599,7 @@ class Camera extends Object3D {
// return initDistanceToOrigin;
// }
- private _initCameraPosition(level: number, lon:number, lat:number) {
+ private _initCameraPosition(level: number, lon: number, lat: number) {
var initDistanceToOrigin = this._calculateDistance2EarthOriginByBestDisplayLevel(level);
var initPosition = MathUtils.geographicToCartesianCoord(lon, lat, initDistanceToOrigin);
var origin = new Vertice(0, 0, 0);
@@ -562,7 +611,6 @@ class Camera extends Object3D {
//设置观察到的层级，不要在该方法中修改this.level的值
private _updatePositionByLevel(level: number, cameraMatrix: Matrix) {
- var globe = Kernel.globe;
var intersects = this._getDirectionIntersectPointWithEarth(cameraMatrix);
if (intersects.length === 0) {
throw "no intersect";
@@ -576,6 +624,9 @@ class Camera extends Object3D {
}
setDeltaPitch(deltaPitch: number) {
+ if (this.level < Kernel.MIN_PITCH_LEVEL || !this.isEarthFullOverlapScreen()) {
+ return;
+ }
var currentPitch = this.getPitch();
var newPitch = currentPitch + deltaPitch;
if (newPitch > this.maxPitch) {
@@ -610,7 +661,6 @@ class Camera extends Object3D {
//刷新
this.isZeroPitch = newPitch === 0;
this.matrix = matrix;
- // Kernel.globe.refresh();
}
//pitch表示Camera视线的倾斜角度，初始值为0，表示视线经过球心，单位为角度，范围是[0, this.maxPitch]
@@ -645,7 +695,7 @@ class Camera extends Object3D {
var pitch = MathUtils.radianToDegree(radian);
- if(pitch >= 90){
+ if (pitch >= 90) {
throw `Invalid pitch: ${pitch}`;
}
@@ -697,7 +747,7 @@ class Camera extends Object3D {
return length2EarthSurface;
}
- getDistance2EarthOrigin(): number{
+ getDistance2EarthOrigin(): number {
var position = this.getPosition();
return Vector.fromVertice(position).getLength();
}
@@ -706,7 +756,64 @@ class Camera extends Object3D {
return this.animating;
}
- animateToLevel(newLevel: number, cb?: ()=>void): void {
+ centerTo(newLon: number, newLat: number, newLevel: number = this.getLevel()) {
+ if (newLevel !== this.getLevel()) {
+ const newPosition = this._safelyGetNewPositonByLevel(newLevel);
+ const newDistance = Vector.fromVertice(newPosition).getLength();
+ this._setPositionByLonLatDistance(newLon, newLat, newDistance);
+ } else {
+ this._setPositionByLonLatDistance(newLon, newLat);
+ }
+ this.setLevel(newLevel, true);
+ }
+
+ animateTo(newLon: number, newLat: number, newLevel: number = this.getLevel(), duration: number = 1000) {
+ const promise = new Promise((resolve, reject) => {
+ if (this.isAnimating()) {
+ reject("be animating");
+ return;
+ }
+ const [startLon, startLat] = this.getLonlat();
+ const singleSpan = 1000 / 60;
+ const count = Math.floor(duration / singleSpan);
+ let start: number = -1;
+
+ const deltaLon = (newLon - startLon) / count;
+ const deltaLat = (newLat - startLat) / count;
+ let deltaLevel: number = 0;
+ let deltaHeight: number = 0;
+ if (newLevel !== this.level) {
+ deltaLevel = (newLevel - this.level) / count;
+ const startDistance = this.getDistance2EarthOrigin();
+ const newPosition = this._safelyGetNewPositonByLevel(newLevel);
+ const newDistance = Vector.fromVertice(newPosition).getLength();
+ deltaHeight = (newDistance - startDistance) / count;
+ }
+
+ this.animating = true;
+
+ const callback = (timestap: number) => {
+ if (start < 0) {
+ start = timestap;
+ }
+ var a = timestap - start;
+ if (a >= duration) {
+ this.animating = false;
+ this.floatLevel = newLevel;
+ this.centerTo(newLon, newLat, newLevel);
+ resolve();
+ } else {
+ this.floatLevel += deltaLevel;
+ this._setPositionByDeltaLonLatDistance(deltaLon, deltaLat, deltaHeight);
+ requestAnimationFrame(callback);
+ }
+ }
+ requestAnimationFrame(callback);
+ });
+ return promise;
+ }
+
+ animateToLevel(newLevel: number, cb?: () => void): void {
if (this.isAnimating()) {
return;
}
@@ -714,9 +821,10 @@ class Camera extends Object3D {
if (!(Utils.isNonNegativeInteger(newLevel))) {
throw "invalid level:" + newLevel;
}
- var newCameraMatrix = this.matrix.clone();
- this._updatePositionByLevel(newLevel, newCameraMatrix);
- var newPosition = newCameraMatrix.getPosition();
+ // var newCameraMatrix = this.matrix.clone();
+ // this._updatePositionByLevel(newLevel, newCameraMatrix);
+ // var newPosition = newCameraMatrix.getPosition();
+ const newPosition = this._safelyGetNewPositonByLevel(newLevel);
var oldPosition = this.getPosition();
var span = this.animationDuration;
@@ -739,7 +847,7 @@ class Camera extends Object3D {
this.animating = false;
this.floatLevel = newLevel;
this.setLevel(newLevel);
- if(cb){
+ if (cb) {
cb();
}
} else {
@@ -752,6 +860,87 @@ class Camera extends Object3D {
requestAnimationFrame(callback);
}
+ setExtent(extent: Extent){
+ if(extent){
+ const [lon, lat, level] = this._calculateLonLatLevelByExtent(extent);
+ this.centerTo(lon, lat, level);
+ }
+ }
+
+ animateToExtent(extent: Extent, duration: number = 1000){
+ const [lon, lat, level] = this._calculateLonLatLevelByExtent(extent);
+ return this.animateTo(lon, lat, level, duration);
+ }
+
+ private _safelyGetNewPositonByLevel(newLevel: number) {
+ const newCameraMatrix = this.matrix.clone();
+ this._updatePositionByLevel(newLevel, newCameraMatrix);
+ const newPosition = newCameraMatrix.getPosition();
+ return newPosition;
+ }
+
+ private _setPositionByLonLatDistance(newLon: number, newLat: number, newLengthFromOrigin2Positon?: number) {
+ const [lon, lat] = this.getLonlat();
+ const deltaLon = newLon - lon;
+ const deltaLat = newLat - lat;
+
+ this._setPositionByDeltaLonLatDistance(deltaLon, deltaLat);
+
+ if (newLengthFromOrigin2Positon > 0) {
+ this._setPositionByDistanceFromOrigin2Camera(newLengthFromOrigin2Positon);
+ }
+ }
+
+ private _setPositionByDeltaLonLatDistance(deltaLon: number, deltaLat: number, deltaHeight?: number) {
+ const deltaLonRadian = MathUtils.degreeToRadian(deltaLon);
+ const deltaLatRadian = MathUtils.degreeToRadian(deltaLat);
+ this.worldRotateY(deltaLonRadian);
+ const vector1 = Vector.fromVertice(this.getPosition());
+ const vector2 = new Vector(0, 1, 0);
+ const crossAxis = vector1.cross(vector2);
+ this.worldRotateByVector(deltaLatRadian, crossAxis);
+
+ if (deltaHeight > 0 || deltaHeight < 0) {
+ const vectorFromOrigin2Position = Vector.fromVertice(this.getPosition());
+ const newLength = vectorFromOrigin2Position.getLength() + deltaHeight;
+ vectorFromOrigin2Position.setLength(newLength);
+ const newPosition = vectorFromOrigin2Position.getVertice();
+ this.setPosition(newPosition);
+ }
+ }
+
+ private _setPositionByDistanceFromOrigin2Camera(newLengthFromOrigin2Positon: number) {
+ const vectorFromOrigin2Position = Vector.fromVertice(this.getPosition());
+ vectorFromOrigin2Position.setLength(newLengthFromOrigin2Positon);
+ const newPosition = vectorFromOrigin2Position.getVertice();
+ this.setPosition(newPosition);
+ }
+
+ private _safelyGetValidLevel(level: number){
+ if(level > Kernel.MAX_LEVEL){
+ level = Kernel.MAX_LEVEL;
+ }else if(level < Kernel.MIN_LEVEL){
+ level = Kernel.MIN_LEVEL;
+ }
+ return level;
+ }
+
+ private _calculateLonLatLevelByExtent(extent: Extent){
+ const centerLon = (extent.getMinLon() + extent.getMaxLon()) / 2;
+ const centerLat = (extent.getMinLat() + extent.getMaxLat()) / 2;
+ const deltaLon = extent.getMaxLon() - extent.getMinLon();
+ const deltaLonRadian = MathUtils.degreeToRadian(deltaLon);
+ const deltaLength = Kernel.EARTH_RADIUS * deltaLonRadian;
+ const resolution = deltaLength / this.canvas.width;
+ const bestFloatLevel = this._calculateLevelByResolution(resolution);
+ let level = Math.floor(bestFloatLevel);
+ // if(bestFloatLevel - level >= 0.9){
+ // level += 1;
+ // }
+ level = this._safelyGetValidLevel(level);
+ return [centerLon, centerLat, level];
+ }
+
private _look(cameraPnt: Vertice, targetPnt: Vertice, upDirection: Vector = new Vector(0, 1, 0)): void {
var cameraPntCopy = cameraPnt.clone();
var targetPntCopy = targetPnt.clone();
@@ -783,7 +972,7 @@ class Camera extends Object3D {
//根据canvasX和canvasY获取拾取向量
private _getPickDirectionByCanvas(canvasX: number, canvasY: number): Vector {
- var ndcXY = MathUtils.convertPointFromCanvasToNDC(canvasX, canvasY);
+ var ndcXY = MathUtils.convertPointFromCanvasToNDC(this.canvas.width, this.canvas.height, canvasX, canvasY);
var pickDirection = this._getPickDirectionByNDC(ndcXY[0], ndcXY[1]);
return pickDirection;
}
@@ -831,10 +1020,10 @@ class Camera extends Object3D {
return result;
}
- private _getPickLonLatByNDC(ndcX: number, ndcY: number): number[]{
- var result:number[] = null;
+ private _getPickLonLatByNDC(ndcX: number, ndcY: number): number[] {
+ var result: number[] = null;
var vertices = this._getPickCartesianCoordInEarthByNDC(ndcX, ndcY);
- if(vertices.length > 0){
+ if (vertices.length > 0) {
result = MathUtils.cartesianCoordToGeographic(vertices[0]);
}
return result;
@@ -1016,9 +1205,9 @@ class Camera extends Object3D {
var centerGrid: TileGrid = null;
var verticalCenterInfo = this._getVerticalVisibleCenterInfo();
- if(TileGrid.isValidLatitude(verticalCenterInfo.lat)){
+ if (TileGrid.isValidLatitude(verticalCenterInfo.lat)) {
centerGrid = TileGrid.getTileGridByGeo(verticalCenterInfo.lon, verticalCenterInfo.lat, level);
- }else{
+ } else {
centerGrid = new TileGrid(level, 0, 0);
}
var handleRowThis = handleRow.bind(this);
@@ -1185,11 +1374,11 @@ class Camera extends Object3D {
var cross = vector03.cross(vector01);
result.clockwise = cross.z > 0;
//计算面积
- var topWidth = Math.sqrt(Math.pow(ndcs[1].x - ndcs[2].x, 2) + Math.pow(ndcs[1].y - ndcs[2].y, 2)) * Kernel.canvas.width / 2;
- var bottomWidth = Math.sqrt(Math.pow(ndcs[0].x - ndcs[3].x, 2) + Math.pow(ndcs[0].y - ndcs[3].y, 2)) * Kernel.canvas.width / 2;
+ var topWidth = Math.sqrt(Math.pow(ndcs[1].x - ndcs[2].x, 2) + Math.pow(ndcs[1].y - ndcs[2].y, 2)) * this.canvas.width / 2;
+ var bottomWidth = Math.sqrt(Math.pow(ndcs[0].x - ndcs[3].x, 2) + Math.pow(ndcs[0].y - ndcs[3].y, 2)) * this.canvas.width / 2;
result.width = Math.floor((topWidth + bottomWidth) / 2);
- var leftHeight = Math.sqrt(Math.pow(ndcs[0].x - ndcs[1].x, 2) + Math.pow(ndcs[0].y - ndcs[1].y, 2)) * Kernel.canvas.height / 2;
- var rightHeight = Math.sqrt(Math.pow(ndcs[2].x - ndcs[3].x, 2) + Math.pow(ndcs[2].y - ndcs[3].y, 2)) * Kernel.canvas.height / 2;
+ var leftHeight = Math.sqrt(Math.pow(ndcs[0].x - ndcs[1].x, 2) + Math.pow(ndcs[0].y - ndcs[1].y, 2)) * this.canvas.height / 2;
+ var rightHeight = Math.sqrt(Math.pow(ndcs[2].x - ndcs[3].x, 2) + Math.pow(ndcs[2].y - ndcs[3].y, 2)) * this.canvas.height / 2;
result.height = Math.floor((leftHeight + rightHeight) / 2);
result.area = result.width * result.height;
diff --git a/src/world/Definitions.d.ts b/src/core/world/Definitions.d.ts
old mode 100755
new mode 100644
similarity index 68%
rename from src/world/Definitions.d.ts
rename to src/core/world/Definitions.d.ts
index 7726bf8..75ae6e7
--- a/src/world/Definitions.d.ts
+++ b/src/core/world/Definitions.d.ts
@@ -1,6 +1,6 @@
-import Matrix = require('./math/Matrix');
+import Matrix from './math/Matrix';
import Camera from './Camera';
-import GraphicGroup = require('./GraphicGroup');
+import GraphicGroup from './GraphicGroup';
interface WebGLProgramExtension extends WebGLProgram{
uMVMatrix: WebGLUniformLocation;
@@ -31,4 +31,19 @@ export interface Drawable{
draw(camera: Camera): void;
shouldDraw(camera: Camera): boolean;
destroy(): void;
-}
\ No newline at end of file
+}
+
+export interface CancelablePromise extends Promise
-
+
+
+
\ No newline at end of file
diff --git a/src/world/Extent.ts b/src/world/Extent.ts
deleted file mode 100755
index 6148548..0000000
--- a/src/world/Extent.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import TileGrid from './TileGrid';
-
-class Extent{
- constructor(private minLon: number, private minLat: number, private maxLon: number, private maxLat: number, private tileGrid: TileGrid){
-
- }
-
- getMinLon(){
- return this.minLon;
- }
-
- getMinLat(){
- return this.minLat;
- }
-
- getMaxLon(){
- return this.maxLon;
- }
-
- getMaxLat(){
- return this.maxLat;
- }
-
- getTileGrid(){
- return this.tileGrid;
- }
-
- toJson(){
- return [this.minLon, this.minLat, this.maxLon, this.maxLat];
- }
-
- static union(extents: Extent[]): Extent{
- return null;
- }
-}
-
-export = Extent;
\ No newline at end of file
diff --git a/src/world/Globe.ts b/src/world/Globe.ts
deleted file mode 100755
index b5664eb..0000000
--- a/src/world/Globe.ts
+++ /dev/null
@@ -1,270 +0,0 @@
-import Kernel = require("./Kernel");
-import Utils = require("./Utils");
-import LocationService, { LocationData } from "./LocationService";
-import Renderer = require("./Renderer");
-import Camera, { CameraCore } from "./Camera";
-import Scene = require("./Scene");
-import ImageUtils = require("./Image");
-import EventHandler = require("./EventHandler");
-import TiledLayer = require("./layers/TiledLayer");
-import { GoogleTiledLayer, GoogleLabelLayer } from "./layers/Google";
-import { AutonaviTiledLayer, AutonaviLabelLayer } from "./layers/Autonavi";
-import LabelLayer from "./layers/LabelLayer";
-import TrafficLayer from "./layers/TrafficLayer";
-import { QihuTrafficLayer } from "./layers/Qihu";
-import Atmosphere = require("./graphics/Atmosphere");
-import PoiLayer = require("./layers/PoiLayer");
-
-const initLevel = Utils.isMobile() ? 11 : 3;
-
-type RenderCallback = () => void;
-
-class Globe {
- renderer: Renderer = null;
- scene: Scene = null;
- camera: Camera = null;
- tiledLayer: TiledLayer = null;
- labelLayer: LabelLayer = null;
- trafficLayer: TrafficLayer = null;
- poiLayer: PoiLayer = null;
- debugStopRefreshTiles: boolean = false;
- private readonly REFRESH_INTERVAL: number = 150; //Globe自动刷新时间间隔，以毫秒为单位
- private lastRefreshTimestamp: number = -1;
- private lastRefreshCameraCore: CameraCore = null;
- private eventHandler: EventHandler = null;
- private allRefreshCount: number = 0;
- private realRefreshCount: number = 0;
- private beforeRenderCallbacks: RenderCallback[] = [];
- private afterRenderCallbacks: RenderCallback[] = [];
-
- constructor(private canvas: HTMLCanvasElement, level: number = initLevel, lonlat: number[] = [116.3975, 39.9085]) {
- Kernel.globe = this;
- Kernel.canvas = canvas;
- this.renderer = new Renderer(canvas, this._onBeforeRender.bind(this), this._onAfterRender.bind(this));
- this.scene = new Scene();
- var radio = canvas.width / canvas.height;
- this.camera = new Camera(30, radio, 1, Kernel.EARTH_RADIUS * 2, level, lonlat);
- this.renderer.setScene(this.scene);
- this.renderer.setCamera(this.camera);
-
- this.labelLayer = new AutonaviLabelLayer();
- // this.labelLayer = new GoogleLabelLayer();
- this.scene.add(this.labelLayer);
- // this.trafficLayer = new QihuTrafficLayer();
- // this.trafficLayer.visible = false;
- // this.scene.add(this.trafficLayer);
- var atmosphere = Atmosphere.getInstance();
- this.scene.add(atmosphere);
- this.poiLayer = PoiLayer.getInstance();
- this.scene.add(this.poiLayer);
-
- this.renderer.setIfAutoRefresh(true);
- this.eventHandler = new EventHandler(canvas);
-
- var tiledLayer = new GoogleTiledLayer("Satellite");
- // var tiledLayer = new AutonaviTiledLayer("Satellite");
- this.setTiledLayer(tiledLayer);
-
- // if(Utils.isMobile() && window.navigator.geolocation){
- // window.navigator.geolocation.getCurrentPosition((position: Position) => {
- // // var str = `accuracy:${position.coords.accuracy},heading:${position.coords.heading},speed:${position.coords.speed}`;
- // // alert(str);
- // var lon = position.coords.longitude;
- // var lat = position.coords.latitude;
- // this.showLocation(lon, lat);
- // });
- // }
-
- Utils.subscribe('location', (data: LocationData) => {
- console.info(data);
- this.afterRenderCallbacks.push(() => {
- this.showLocation(data);
- });
- });
- LocationService.getRobustLocation();
- LocationService.getLocation();
- // LocationService.watchPosition();
- }
-
- showLocation(locationData: LocationData) {
- var lon = locationData.lng;
- var lat = locationData.lat;
- // this.poiLayer.clear();
- // this.poiLayer.addPoi(lon, lat, "", "", "", "");
- this.eventHandler.moveLonLatToCanvas(lon, lat, this.canvas.width / 2, this.canvas.height / 2);
- var accuracy = locationData.accuracy;
- var level: number = 8;
- if (accuracy <= 100) {
- level = 16;
- } else if (accuracy <= 1000) {
- level = 13;
- } else {
- level = 11;
- }
- this.setLevel(level);
- }
-
- setTiledLayer(tiledLayer: TiledLayer) {
- //在更换切片图层的类型时清空缓存的图片
- ImageUtils.clear();
- if (this.tiledLayer) {
- var b = this.scene.remove(this.tiledLayer);
- if (!b) {
- console.error("this.scene.remove(this.tiledLayer)失败");
- }
- this.scene.tiledLayer = null;
- }
- this.tiledLayer = tiledLayer;
- this.scene.add(this.tiledLayer, true);
- this.refresh(true);
- }
-
- showLabelLayer() {
- if (this.labelLayer) {
- this.labelLayer.visible = true;
- }
- }
-
- hideLabelLayer() {
- if (this.labelLayer) {
- this.labelLayer.visible = false;
- }
- }
-
- showTrafficLayer() {
- if (this.trafficLayer) {
- this.trafficLayer.visible = true;
- }
- }
-
- hideTrafficLayer() {
- if (this.trafficLayer) {
- this.trafficLayer.visible = false;
- }
- }
-
- getLevel() {
- return this.camera.getLevel();
- }
-
- zoomIn() {
- this.setLevel(this.getLevel() + 1);
- }
-
- setLevel(level: number) {
- if (this.camera) {
- this.camera.setLevel(level);
- }
- }
-
- isAnimating(): boolean {
- return this.camera.isAnimating();
- }
-
- animateToLevel(level: number, cb?: () => void) {
- if (!this.isAnimating()) {
- if (level < Kernel.MIN_LEVEL) {
- level = Kernel.MIN_LEVEL;
- }
- if (level > Kernel.MAX_LEVEL) {
- level = Kernel.MAX_LEVEL;
- }
- if (level !== this.getLevel()) {
- this.camera.animateToLevel(level, cb);
- }
- }
- }
-
- animateOut(cb?: () => void) {
- this.animateToLevel(this.getLevel() - 1, cb);
- }
-
- animateIn(cb?: () => void) {
- this.animateToLevel(this.getLevel() + 1, cb);
- }
-
- private _onBeforeRender(renderer: Renderer) {
- // this.beforeRenderCallbacks.forEach((callback) => callback());
- this.refresh();
- }
-
- private _onAfterRender(render: Renderer) {
- this.afterRenderCallbacks.forEach((callback) => callback());
- this.afterRenderCallbacks = [];
- }
-
- // private _tick() {
- // try {
- // //如果refresh方法出现异常而且没有捕捉，那么就会导致无法继续设置setTimeout，从而无法进一步更新切片
- // this.refresh();
- // } catch (e) {
- // console.error(e);
- // }
- // setTimeout(() => {
- // this._tick();
- // }, this.REFRESH_INTERVAL);
- // }
-
- logRefreshInfo() {
- console.log(this.realRefreshCount, this.allRefreshCount, this.realRefreshCount / this.allRefreshCount);
- }
-
- refresh(force: boolean = false) {
- this.allRefreshCount++;
- var timestamp = Date.now();
-
- //先更新camera中的各种矩阵
- this.camera.update(force);
-
- if (!this.tiledLayer || !this.scene || !this.camera) {
- return;
- }
-
- if (this.debugStopRefreshTiles) {
- return;
- }
-
- var newCameraCore = this.camera.getCameraCore();
- // var isNeedRefresh = force || !newCameraCore.equals(this.cameraCore);
- var isNeedRefresh = false;
- if (force) {
- isNeedRefresh = true;
- } else {
- if (newCameraCore.equals(this.lastRefreshCameraCore)) {
- isNeedRefresh = false;
- } else {
- isNeedRefresh = timestamp - this.lastRefreshTimestamp >= this.REFRESH_INTERVAL;
- }
- }
-
- this.tiledLayer.updateSubLayerCount();
-
- if (isNeedRefresh) {
- this.realRefreshCount++;
- this.lastRefreshTimestamp = timestamp;
- this.lastRefreshCameraCore = newCameraCore;
- this.tiledLayer.refresh();
- }
-
- this.tiledLayer.updateTileVisibility();
-
- var a = !!(this.labelLayer && this.labelLayer.visible);
- var b = !!(this.trafficLayer && this.trafficLayer.visible);
- if (a || b) {
- var lastLevelTileGrids = this.tiledLayer.getLastLevelVisibleTileGrids();
- if (a) {
- this.labelLayer.updateTiles(this.getLevel(), lastLevelTileGrids);
- }
- if (b) {
- this.trafficLayer.updateTiles(this.getLevel(), lastLevelTileGrids);
- }
- }
- }
-
- getExtents(level?: number) {
- return this.tiledLayer.getExtents(level);
- }
-
-}
-
-export = Globe;
\ No newline at end of file
diff --git a/src/world/Kernel.ts b/src/world/Kernel.ts
deleted file mode 100755
index 29363cc..0000000
--- a/src/world/Kernel.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {WebGLRenderingContextExtension} from './Definitions';
-import Globe = require("./Globe");
-import Renderer = require("./Renderer");
-
-const REAL_EARTH_RADIUS = 6378137;
-const EARTH_RADIUS = 500;
-const SCALE_FACTOR = EARTH_RADIUS / REAL_EARTH_RADIUS;
-const MAX_PROJECTED_COORD = Math.PI * EARTH_RADIUS;
-const MAX_REAL_RESOLUTION = 156543.03392800014;
-const MAX_RESOLUTION = MAX_REAL_RESOLUTION * SCALE_FACTOR;
-
-class Kernel{
- static gl:WebGLRenderingContextExtension = null;
- static canvas:HTMLCanvasElement = null;
- static globe:Globe = null;
- static idCounter:number = 0; //Object3D对象的唯一标识
- static readonly version:string = "0.4.4";
- static readonly SCALE_FACTOR:number = SCALE_FACTOR;
- static readonly EARTH_RADIUS:number = EARTH_RADIUS;
- static readonly MAX_RESOLUTION:number = MAX_RESOLUTION;
- static readonly MAX_REAL_RESOLUTION: number = MAX_REAL_RESOLUTION;
- static readonly MAX_PROJECTED_COORD:number = MAX_PROJECTED_COORD;
- static readonly BASE_LEVEL:number = 6; //渲染的基准层级，从该层级开始segment为1
- static readonly MAX_LEVEL:number = 18;
- static readonly MIN_LEVEL:number = 2;
- static readonly proxy:string = "";
-}
-
-export = Kernel;
\ No newline at end of file
diff --git a/src/world/LocationService.ts b/src/world/LocationService.ts
deleted file mode 100755
index 833fb7c..0000000
--- a/src/world/LocationService.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import Utils = require('./Utils');
-
-//http://lbs.qq.com/tool/component-geolocation.html
-
-export class LocationData{
- module: string;//geolocation
- type: string;//h5,ip
- adcode: string;//110105
- nation: string;//中国
- province: string;//北京市
- city: string;//北京市
- district: string;//朝阳区
- addr: string;//朝阳区崔各庄乡顺白路何各庄村公交站西南
- lat: number;
- lng: number;
- accuracy: number;//25
-}
-
-const targetOrigin:string = 'https://apis.map.qq.com';
-
-var iframe = document.createElement("iframe");
-
-class LocationService{
- private static init(){
- window.addEventListener('message', function(event){
- var data:LocationData = event.data;
- if(data && data.module === 'geolocation'){
- Utils.publish('location', event.data);
- }
- }, false);
-
- iframe.setAttribute("width", "0");
- iframe.setAttribute("height", "0");
- iframe.setAttribute("frameborder", "0");
- iframe.setAttribute("scrolling", "no");
- iframe.style.display = "none";
- iframe.setAttribute("src", `${targetOrigin}/tools/geolocation?key=YLZBZ-XDPKU-LWMV6-2WNPB-PL5W5-H6BGL&referer=WebGlobe`);
- document.body.appendChild(iframe);
- }
-
- public static getLocation(){
- iframe.contentWindow.postMessage('getLocation', targetOrigin);
- }
-
- public static getRobustLocation(){
- iframe.contentWindow.postMessage('getLocation.robust', targetOrigin);
- }
-
- public static watchPosition(){
- iframe.contentWindow.postMessage('watchPosition', targetOrigin);
- }
-
- public static clearWatch(){
- iframe.contentWindow.postMessage('clearWatch', targetOrigin);
- }
-}
-
-(LocationService as any).init();
-
-export default LocationService;
\ No newline at end of file
diff --git a/src/world/Renderer.ts b/src/world/Renderer.ts
deleted file mode 100755
index 09370e3..0000000
--- a/src/world/Renderer.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import Kernel = require("./Kernel");
-import Scene = require("./Scene");
-import Camera from "./Camera";
-import { WebGLRenderingContextExtension, WebGLProgramExtension } from "./Definitions";
-
-class Renderer {
- scene: Scene = null;
- camera: Camera = null;
- autoRefresh: boolean = false;
-
- constructor(
- private canvas: HTMLCanvasElement,
- private onBeforeRender?: (renderer: Renderer) => void,
- private onAfterRender?: (renderer: Renderer) => void) {
-
- var gl: WebGLRenderingContextExtension;
-
- function initWebGL(canvas: HTMLCanvasElement) {
- try {
- var contextList = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
- for (var i = 0; i < contextList.length; i++) {
- gl = canvas.getContext(contextList[i], {
- antialias: true
- }) as WebGLRenderingContextExtension;
- if (gl) {
- Kernel.gl = gl;
- (