mirror of
https://github.com/openglobus/openglobus.git
synced 2025-12-08 19:25:27 +00:00
Fixed example
This commit is contained in:
Zemledelec
parent
e9e2b66708
commit
df39ed3a80
@ -3,38 +3,37 @@
|
||||
<head>
|
||||
<title>OpenGlobus - Earth planet</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../css/og.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../css/og.css" type="text/css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="globus" style="width:100%;height:100%"></div>
|
||||
<script type="module">
|
||||
'use strict';
|
||||
<div id="globus" style="width:100%;height:100%"></div>
|
||||
<script type="module">
|
||||
'use strict';
|
||||
|
||||
import * as math from '../../src/og/math.js';
|
||||
import { Globe } from '../../src/og/Globe.js';
|
||||
import { LonLat } from '../../src/og/LonLat.js';
|
||||
import { XYZ } from '../../src/og/layer/XYZ.js';
|
||||
import { Vector } from '../../src/og/layer/Vector.js';
|
||||
import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
|
||||
import { Ellipsoid } from '../../src/og/ellipsoid/Ellipsoid.js';
|
||||
import { Entity } from '../../src/og/entity/Entity.js';
|
||||
import * as math from '../../src/og/math.js';
|
||||
import {Globe} from '../../src/og/Globe.js';
|
||||
import {LonLat} from '../../src/og/LonLat.js';
|
||||
import {XYZ} from '../../src/og/layer/XYZ.js';
|
||||
import {Vector} from '../../src/og/layer/Vector.js';
|
||||
import {GlobusTerrain} from '../../src/og/terrain/GlobusTerrain.js';
|
||||
import {Entity} from '../../src/og/entity/Entity.js';
|
||||
|
||||
const POINTS_NUMBER = 70;
|
||||
const POINTS_NUMBER = 70;
|
||||
|
||||
fetch('routes.json')
|
||||
fetch('routes.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
|
||||
let paths = [],
|
||||
colors = [];
|
||||
colors = [];
|
||||
|
||||
let animIndex = [];
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let p = data[i],
|
||||
dst = new LonLat(Number(p.dstAirport.lng), Number(p.dstAirport.lat)),
|
||||
src = new LonLat(Number(p.srcAirport.lng), Number(p.srcAirport.lat));
|
||||
dst = new LonLat(Number(p.dstAirport.lng), Number(p.dstAirport.lat)),
|
||||
src = new LonLat(Number(p.srcAirport.lng), Number(p.srcAirport.lat));
|
||||
|
||||
let path = getPath(globus.planet.ellipsoid, src, dst);
|
||||
|
||||
@ -48,7 +47,7 @@
|
||||
'polyline': {
|
||||
'path3v': paths,
|
||||
'pathColors': colors,
|
||||
'thickness': 0.8,
|
||||
'thickness': 1.8,
|
||||
'color': "red",
|
||||
'isClosed': false
|
||||
}
|
||||
@ -68,8 +67,8 @@
|
||||
}
|
||||
|
||||
let r = colors[i][0][0],
|
||||
g = colors[i][0][1],
|
||||
b = colors[i][0][2];
|
||||
g = colors[i][0][1],
|
||||
b = colors[i][0][2];
|
||||
e.setPointColor([r, g, b, 0.8], ind, i);
|
||||
e.setPointColor([r, g, b, 0.6], ind - 1, i);
|
||||
e.setPointColor([r, g, b, 0.3], ind - 2, i);
|
||||
@ -80,70 +79,67 @@
|
||||
|
||||
});
|
||||
|
||||
function getPath(ell, start, end) {
|
||||
let num = POINTS_NUMBER;
|
||||
function getPath(ell, start, end) {
|
||||
let num = POINTS_NUMBER;
|
||||
|
||||
let brng = Ellipsoid.getInitialBearing(start, end);
|
||||
let dist = ell.getGreatCircleDistance(start, end);
|
||||
let {distance, initialAzimuth} = ell.inverse(start, end);
|
||||
|
||||
let p25 = ell.getGreatCircleDestination(start, brng, dist * 0.25),
|
||||
p75 = ell.getGreatCircleDestination(start, brng, dist * 0.75);
|
||||
let p25 = ell.getGreatCircleDestination(start, initialAzimuth, distance * 0.25),
|
||||
p75 = ell.getGreatCircleDestination(start, initialAzimuth, distance * 0.75);
|
||||
|
||||
start.height = 50;
|
||||
end.height = 50;
|
||||
let h = dist / 4;
|
||||
p25.height = h;
|
||||
p75.height = h;
|
||||
start.height = 50;
|
||||
end.height = 50;
|
||||
let h = distance / 4;
|
||||
p25.height = h;
|
||||
p75.height = h;
|
||||
|
||||
let startCart = ell.lonLatToCartesian(start),
|
||||
let startCart = ell.lonLatToCartesian(start),
|
||||
endCart = ell.lonLatToCartesian(end),
|
||||
p25Cart = ell.lonLatToCartesian(p25),
|
||||
p75Cart = ell.lonLatToCartesian(p75);
|
||||
|
||||
let path = [],
|
||||
let path = [],
|
||||
colors = [];
|
||||
let color = [Math.random(), Math.random(), Math.random()];
|
||||
for (let i = 0; i <= num; i++) {
|
||||
let cn = math.bezier3v(i / num, startCart, p25Cart, p75Cart, endCart);
|
||||
path.push(cn);
|
||||
let color = [math.random(0, 2), math.random(0, 2), math.random(0, 2)];
|
||||
for (let i = 0; i <= num; i++) {
|
||||
let cn = math.bezier3v(i / num, startCart, p25Cart, p75Cart, endCart);
|
||||
path.push(cn);
|
||||
|
||||
colors.push([color[0], color[1], color[2], 0.1]);
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
path: path,
|
||||
colors: colors
|
||||
};
|
||||
colors.push([color[0], color[1], color[2], 0.1]);
|
||||
}
|
||||
|
||||
var collection = new Vector("Collection", {
|
||||
'entities': []
|
||||
});
|
||||
return {
|
||||
path: path,
|
||||
colors: colors
|
||||
};
|
||||
}
|
||||
|
||||
var osm = new XYZ("OpenStreetMap", {
|
||||
isBaseLayer: true,
|
||||
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
visibility: true,
|
||||
attribution: 'Data @ OpenStreetMap contributors, ODbL',
|
||||
ambient: [0.06, 0.06, 0.08],
|
||||
diffuse: [0.22, 0.26, 0.34]
|
||||
});
|
||||
var collection = new Vector("Collection", {
|
||||
'entities': []
|
||||
});
|
||||
|
||||
var globus = new Globe({
|
||||
"target": "globus",
|
||||
"name": "Earth",
|
||||
"layers": [osm, collection],
|
||||
"terrain": new GlobusTerrain()
|
||||
});
|
||||
var osm = new XYZ("OpenStreetMap", {
|
||||
isBaseLayer: true,
|
||||
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
visibility: true,
|
||||
attribution: 'Data @ OpenStreetMap contributors, ODbL',
|
||||
ambient: [0.06, 0.06, 0.08],
|
||||
diffuse: [0.22, 0.26, 0.34]
|
||||
});
|
||||
|
||||
globus.planet.renderer.gamma = 0.6;
|
||||
globus.planet.renderer.exposure = 3.0;
|
||||
globus.planet.renderer.backgroundColor.set(0, 0, 0);
|
||||
var globus = new Globe({
|
||||
"target": "globus",
|
||||
"name": "Earth",
|
||||
"layers": [osm, collection],
|
||||
"terrain": new GlobusTerrain()
|
||||
});
|
||||
|
||||
window.globus = globus;
|
||||
globus.planet.renderer.controls.SimpleSkyBackground.colorOne = "#444";
|
||||
globus.planet.renderer.controls.SimpleSkyBackground.colorTwo = "#000"
|
||||
|
||||
</script>
|
||||
window.globus = globus;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,9 +1,9 @@
|
||||
module.exports = {
|
||||
2 module.exports = {
|
||||
clearMocks: true,
|
||||
coverageDirectory: "coverage",
|
||||
collectCoverage: true,
|
||||
coverageProvider: "v8",
|
||||
setupFiles: ["jest-canvas-mock"],
|
||||
setupFiles: ["jest-canvas-mock"],
|
||||
testEnvironment: "jsdom",
|
||||
setupFilesAfterEnv: ["./tests/setupTests.js"]
|
||||
};
|
||||
|
||||
@ -137,7 +137,6 @@ class Globe {
|
||||
}
|
||||
}), {
|
||||
autoActivate: false,
|
||||
backgroundColor: createColorRGB(options.backgroundColor, new Vec3(115 / 255, 203 / 255, 249 / 255)),
|
||||
msaa: options.msaa
|
||||
}
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user