Skip to content

Commit ee5ce28

Browse files
authored
Merge pull request #90 from iSpring/develop
merge develop to master
2 parents 0f30b03 + d38d102 commit ee5ce28

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1716
-540
lines changed

README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<div align="center">
22
<a target="_blank" href="https://ispring.github.io/WebGlobe/index.html">
3-
<img src="https://github.com/iSpring/WebGlobe/blob/develop/images/webglobe.png">
3+
<img src="https://cdn.rawgit.com/iSpring/WebGlobe/develop/images/webglobe.png">
44
</a>
55
<p align="center">A WebGL virtual globe and map engine</p>
66
</div>
77

88

99
## WebGlobe
1010
[![Build Status](https://travis-ci.org/iSpring/WebGlobe.svg?branch=develop)](https://travis-ci.org/iSpring/WebGlobe)
11-
[![Release](https://img.shields.io/badge/release-0.5.1-blue.svg)](https://github.com/iSpring/WebGlobe/releases)
11+
[![Release](https://img.shields.io/badge/release-0.6.0-blue.svg)](https://github.com/iSpring/WebGlobe/releases)
1212
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/iSpring/WebGlobe)
1313

1414
[![Chrome 8+](https://img.shields.io/badge/Chrome-8+-1DA362.svg)](http://caniuse.com/#search=WebGL)
@@ -30,7 +30,7 @@ WebGlobe是基于HTML5原生WebGL实现的轻量级Google Earth三维地图引
3030

3131
移动版二维码访问(小米系统中的微信、小米默认浏览器在某些情况下存在已知bug):
3232
<div align="center">
33-
<img src="https://github.com/iSpring/WebGlobe/blob/develop/images/qrcode.png">
33+
<img src="https://cdn.rawgit.com/iSpring/WebGlobe/develop/images/qrcode.png">
3434
</div>
3535

3636
**如果觉得不错,欢迎Star和Fork!**
@@ -69,62 +69,62 @@ WebGlobe是基于HTML5原生WebGL实现的轻量级Google Earth三维地图引
6969
**1. WebGlobe移动端主界面**
7070
<div align="left">
7171
<a target="_blank" href="#">
72-
<img src="https://github.com/iSpring/WebGlobe/blob/develop/images/1.png">
72+
<img src="https://cdn.rawgit.com/iSpring/WebGlobe/develop/images/1.png">
7373
</a>
7474
</div>
7575

7676

7777
**2. 附近搜索**
7878
<div align="left">
7979
<a target="_blank" href="#">
80-
<img src="https://github.com/iSpring/WebGlobe/blob/develop/images/2.png">
80+
<img src="https://cdn.rawgit.com/iSpring/WebGlobe/develop/images/2.png">
8181
</a>
8282
</div>
8383

8484

8585
**3. 搜索结果列表展示**
8686
<div align="left">
8787
<a target="_blank" href="#">
88-
<img src="https://github.com/iSpring/WebGlobe/blob/develop/images/3.png">
88+
<img src="https://cdn.rawgit.com/iSpring/WebGlobe/develop/images/3.png">
8989
</a>
9090
</div>
9191

9292

9393
**4. 搜索结果地图展示**
9494
<div align="left">
9595
<a target="_blank" href="#">
96-
<img src="https://github.com/iSpring/WebGlobe/blob/develop/images/4.png">
96+
<img src="https://cdn.rawgit.com/iSpring/WebGlobe/develop/images/4.png">
9797
</a>
9898
</div>
9999

100100

101101
**5. 路线规划**
102102
<div align="left">
103103
<a target="_blank" href="#">
104-
<img src="https://github.com/iSpring/WebGlobe/blob/develop/images/5.png">
104+
<img src="https://cdn.rawgit.com/iSpring/WebGlobe/develop/images/5.png">
105105
</a>
106106
</div>
107107

108108

109109
**6. 驾车出行路线**
110110
<div align="left">
111111
<a target="_blank" href="#">
112-
<img src="https://github.com/iSpring/WebGlobe/blob/develop/images/6.png">
112+
<img src="https://cdn.rawgit.com/iSpring/WebGlobe/develop/images/6.png">
113113
</a>
114114
</div>
115115

116116

117117
**7. 公交出行路线**
118118
<div align="left">
119119
<a target="_blank" href="#">
120-
<img src="https://github.com/iSpring/WebGlobe/blob/develop/images/7.png">
120+
<img src="https://cdn.rawgit.com/iSpring/WebGlobe/develop/images/7.png">
121121
</a>
122122
</div>
123123

124124

125125
**8. 步行出行路线**
126126
<div align="left">
127127
<a target="_blank" href="#">
128-
<img src="https://github.com/iSpring/WebGlobe/blob/develop/images/8.png">
128+
<img src="https://cdn.rawgit.com/iSpring/WebGlobe/develop/images/8.png">
129129
</a>
130130
</div>

images/3.png

-22.4 KB
Loading

images/4.png

-15.8 KB
Loading

images/5.png

-18.6 KB
Loading

images/6.png

-26.3 KB
Loading

images/7.png

-24.8 KB
Loading

images/8.png

-25 KB
Loading

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "webglobe",
3-
"version": "0.5.1",
3+
"version": "0.6.0",
44
"description": "A WebGL virtual globe and map engine.",
55
"main": "require.js",
66
"scripts": {

src/core/world/Camera.ts

Lines changed: 115 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
declare const Promise: any;
12
import Kernel from './Kernel';
23
import Utils from './Utils';
34
import { EventEmitter } from './Events';
@@ -65,8 +66,14 @@ class Camera extends Object3D {
6566
private readonly animationDuration: number = 200;//层级变化的动画周期,毫秒
6667
private readonly nearFactor: number = 0.6;
6768
private readonly maxPitch: number = 40;
68-
private readonly resolutionFactor1: number = Math.pow(2, 0.3752950);
69-
private readonly resolutionFactor2: number = Math.pow(2, 1.3752950);
69+
//resolutionFactor1的值为1时量算出的分辨率就是实际分辨率,但是图片不是256大小显示
70+
//为了确保图片以256显示,需要将resolutionFactor1设置为Math.pow(2, 0.3752950)
71+
//getResolution()和getResolutionInWorld()方法用于让其他类调用获取实际的分辨率,需要除以resolutionFactor1以便获取真实值
72+
// private resolutionFactor1: number = Math.pow(2, 0.3752950);
73+
private resolutionFactor1: number;
74+
//resolutionFactor2用于矫正计算出的分辨率与实际分辨率之间的差别
75+
// private resolutionFactor2: number = this.resolutionFactor1 * 2;
76+
private resolutionFactor2: number;
7077

7178
//旋转的时候,绕着视线与地球交点进行旋转
7279
//定义抬头时,旋转角为正值
@@ -106,8 +113,22 @@ class Camera extends Object3D {
106113
//this.far可以动态计算
107114
//this.aspect在Viewport改变后重新计算
108115
//this.fov可以调整以实现缩放效果
109-
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]) {
116+
constructor(
117+
private canvas: HTMLCanvasElement,
118+
private fov: number = 45,
119+
private aspect: number = 1,
120+
private near: number = 1,
121+
private far: number = 100,
122+
level: number = 3,
123+
lonlat: number[] = [0, 0],
124+
resolutionFactor: number = Math.pow(2, 0.3752950)) {
125+
110126
super();
127+
if(!(resolutionFactor > 0)){
128+
resolutionFactor = Math.pow(2, 0.3752950);
129+
}
130+
this.resolutionFactor1 = resolutionFactor;
131+
this.resolutionFactor2 = this.resolutionFactor1 * 2;
111132
this.eventEmitter = new EventEmitter();
112133
this.lonlatsOfBoundary = [];
113134
this.initFov = this.fov;
@@ -446,8 +467,34 @@ class Camera extends Object3D {
446467
return newFov;
447468
}
448469

470+
//返回x和y综合的平均分辨率
471+
//for public use
472+
getResolution(): number {
473+
const {
474+
resolutionX,
475+
bestDisplayLevelFloatX,
476+
resolutionY,
477+
bestDisplayLevelFloatY
478+
} = this.measureXYResolutionAndBestDisplayLevel();
479+
return (resolutionX + resolutionY) / 2 / this.resolutionFactor1;
480+
}
481+
482+
//for public use
483+
getResolutionInWorld(): number {
484+
return this.getResolution() / Kernel.SCALE_FACTOR;
485+
}
486+
487+
//屏幕1px在实际世界中的距离,for test
488+
private getResolutionInWorld2(): number {
489+
if (realResolutionCache.hasOwnProperty(this.level)) {
490+
return realResolutionCache[this.level];
491+
} else {
492+
return Kernel.MAX_REAL_RESOLUTION / Math.pow(2, this.level);
493+
}
494+
}
495+
449496
//resolution,level
450-
measureXYResolutionAndBestDisplayLevel(): any {
497+
private measureXYResolutionAndBestDisplayLevel(): any {
451498
//计算resolution
452499
var p = this.matrix.getPosition();
453500
var dir = Vector.fromVertice(p);
@@ -486,7 +533,7 @@ class Camera extends Object3D {
486533
}
487534

488535
//[resolution,level]
489-
calculateCurrentResolutionAndBestDisplayLevel() {
536+
private calculateCurrentResolutionAndBestDisplayLevel() {
490537
var distance2EarthOrigin = this.getDistance2EarthOrigin();
491538
return this._calculateResolutionAndBestDisplayLevelByDistance2EarthOrigin(distance2EarthOrigin);
492539
}
@@ -540,15 +587,6 @@ class Camera extends Object3D {
540587
return Kernel.MAX_RESOLUTION / Math.pow(2, level);
541588
}
542589

543-
//屏幕1px在实际世界中的距离
544-
getResolutionInWorld(): number {
545-
if (realResolutionCache.hasOwnProperty(this.level)) {
546-
return realResolutionCache[this.level];
547-
} else {
548-
return Kernel.MAX_REAL_RESOLUTION / Math.pow(2, this.level);
549-
}
550-
}
551-
552590
getVertice() {
553591
const origin2PositionVector = Vector.fromVertice(this.getPosition());
554592
origin2PositionVector.setLength(Kernel.EARTH_RADIUS);
@@ -584,7 +622,7 @@ class Camera extends Object3D {
584622
this.level = level;
585623
this.floatLevel = level;
586624
}
587-
if(levelChanged){
625+
if (levelChanged) {
588626
Utils.publish('level-change', {
589627
oldLevel: oldLevel,
590628
newLevel: this.level
@@ -702,9 +740,48 @@ class Camera extends Object3D {
702740
return pitch;
703741
}
704742

705-
//计算拾取射线与地球的交点,以笛卡尔空间直角坐标系坐标数组的形式返回
706-
//该方法需要projViewMatrixForDraw系列矩阵进行计算
707-
getPickCartesianCoordInEarthByCanvas(canvasX: number, canvasY: number): Vertice[] {
743+
// _doWorkByMatrixForDraw(cb: any) {
744+
// this._updateCore();
745+
746+
// //暂存projViewMatrix系列矩阵
747+
// var matrix = this.matrix;
748+
// var viewMatrix = this.viewMatrix;
749+
// var projMatrix = this.projMatrix;
750+
// var projViewMatrix = this.projViewMatrix;
751+
752+
// //将projViewMatrix系列矩阵赋值为projViewMatrixForDraw系列矩阵
753+
// this.matrix = this.matrixForDraw;
754+
// this.viewMatrix = this.viewMatrixForDraw;
755+
// this.projMatrix = this.projMatrixForDraw;
756+
// this.projViewMatrix = this.projViewMatrixForDraw;
757+
758+
// //基于projViewMatrixForDraw系列矩阵进行计算,应该没有误差
759+
// // var pickDirection = this._getPickDirectionByCanvas(canvasX, canvasY);
760+
// // var p = this.getPosition();
761+
// // var line = new Line(p, pickDirection);
762+
// // var result = this._getPickCartesianCoordInEarthByLine(line);
763+
// cb();
764+
765+
// //还原projViewMatrix系列矩阵
766+
// this.matrix = matrix;
767+
// this.viewMatrix = viewMatrix;
768+
// this.projMatrix = projMatrix;
769+
// this.projViewMatrix = projViewMatrix;
770+
// }
771+
772+
/**
773+
* 该方法需要projViewMatrixForDraw系列矩阵进行计算
774+
* 返回拾取的射线相关信息,result.line表示拾取的直线,result.vertices表示拾取的点,即射线与地球的交点
775+
* @param canvasX
776+
* @param canvasY
777+
* @param verticesResult 如果为true,那么会计算result.vertices
778+
* return {line, vertices}
779+
*/
780+
getPickInfoByCanvas(canvasX: number, canvasY: number, verticesResult: boolean = false):any {
781+
const result: any = {
782+
line: null,
783+
vertices: []
784+
};
708785
this._updateCore();
709786

710787
//暂存projViewMatrix系列矩阵
@@ -722,8 +799,10 @@ class Camera extends Object3D {
722799
//基于projViewMatrixForDraw系列矩阵进行计算,应该没有误差
723800
var pickDirection = this._getPickDirectionByCanvas(canvasX, canvasY);
724801
var p = this.getPosition();
725-
var line = new Line(p, pickDirection);
726-
var result = this._getPickCartesianCoordInEarthByLine(line);
802+
result.line = new Line(p, pickDirection);
803+
if(verticesResult){
804+
result.vertices = this._getPickCartesianCoordInEarthByLine(result.line);
805+
}
727806

728807
//还原projViewMatrix系列矩阵
729808
this.matrix = matrix;
@@ -734,6 +813,13 @@ class Camera extends Object3D {
734813
return result;
735814
}
736815

816+
//计算拾取射线与地球的交点,以笛卡尔空间直角坐标系坐标数组的形式返回
817+
//该方法需要projViewMatrixForDraw系列矩阵进行计算
818+
getPickCartesianCoordInEarthByCanvas(canvasX: number, canvasY: number): Vertice[] {
819+
const pickInfo = this.getPickInfoByCanvas(canvasX, canvasY, true);
820+
return pickInfo.vertices;
821+
}
822+
737823
getLightDirection(): Vector {
738824
var dirVertice = this.matrix.getVectorZ();
739825
var direction = new Vector(-dirVertice.x, -dirVertice.y, -dirVertice.z);
@@ -768,7 +854,7 @@ class Camera extends Object3D {
768854
}
769855

770856
animateTo(newLon: number, newLat: number, newLevel: number = this.getLevel(), duration: number = 1000) {
771-
const promise = new Promise((resolve, reject) => {
857+
const promise = new Promise((resolve:any, reject:any) => {
772858
if (this.isAnimating()) {
773859
reject("be animating");
774860
return;
@@ -860,14 +946,14 @@ class Camera extends Object3D {
860946
requestAnimationFrame(callback);
861947
}
862948

863-
setExtent(extent: Extent){
864-
if(extent){
949+
setExtent(extent: Extent) {
950+
if (extent) {
865951
const [lon, lat, level] = this._calculateLonLatLevelByExtent(extent);
866-
this.centerTo(lon, lat, level);
952+
this.centerTo(lon, lat, level);
867953
}
868954
}
869955

870-
animateToExtent(extent: Extent, duration: number = 1000){
956+
animateToExtent(extent: Extent, duration: number = 1000) {
871957
const [lon, lat, level] = this._calculateLonLatLevelByExtent(extent);
872958
return this.animateTo(lon, lat, level, duration);
873959
}
@@ -916,16 +1002,16 @@ class Camera extends Object3D {
9161002
this.setPosition(newPosition);
9171003
}
9181004

919-
private _safelyGetValidLevel(level: number){
920-
if(level > Kernel.MAX_LEVEL){
1005+
private _safelyGetValidLevel(level: number) {
1006+
if (level > Kernel.MAX_LEVEL) {
9211007
level = Kernel.MAX_LEVEL;
922-
}else if(level < Kernel.MIN_LEVEL){
1008+
} else if (level < Kernel.MIN_LEVEL) {
9231009
level = Kernel.MIN_LEVEL;
9241010
}
9251011
return level;
9261012
}
9271013

928-
private _calculateLonLatLevelByExtent(extent: Extent){
1014+
private _calculateLonLatLevelByExtent(extent: Extent) {
9291015
const centerLon = (extent.getMinLon() + extent.getMaxLon()) / 2;
9301016
const centerLat = (extent.getMinLat() + extent.getMaxLat()) / 2;
9311017
const deltaLon = extent.getMaxLon() - extent.getMinLon();

src/core/world/Definitions.d.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
declare const Promise: any;
2+
import Line from './math/Line';
13
import Matrix from './math/Matrix';
24
import Camera from './Camera';
35
import GraphicGroup from './GraphicGroup';
@@ -33,6 +35,13 @@ export interface Drawable{
3335
destroy(): void;
3436
}
3537

38+
export interface Pickable{
39+
ifIntersectLocalLine(localLine: Line): boolean;
40+
ifIntersectWorldLine(worldLine: Line): boolean;
41+
}
42+
43+
export type PickListener = (target: Pickable) => void;
44+
3645
export interface CancelablePromise extends Promise<any>{
3746
cancel: () => void;
3847
}
@@ -41,6 +50,10 @@ export interface Destroyable{
4150
destroy: () => void;
4251
}
4352

53+
export interface Attributes{
54+
[key: string]: any
55+
}
56+
4457
// declare module "*.png" {
4558
// const content: any;
4659
// export default content;

0 commit comments

Comments
 (0)