Skip to content

Commit e420406

Browse files
itanka9itanka9
committed
globe sat
1 parent 3903747 commit e420406

File tree

8 files changed

+156
-36
lines changed

8 files changed

+156
-36
lines changed

‎src/globe-sputnik/index.html

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>MapGL Globe</title>
7+
<meta name="description" content="Getting into Globe with MapGL" />
8+
<meta name="category" content="Globe" />
9+
<style>
10+
html,
11+
body,
12+
#container {
13+
margin: 0;
14+
width: 100%;
15+
height: 100%;
16+
overflow: hidden;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<div id="container"></div>
22+
<script src="https://mapgl.2gis.com/api/js/v0.0.366"></script>
23+
<script>
24+
const map = new mapgl.Map('container', {
25+
center: [84.43, 33.92],
26+
zoom: 2,
27+
zoomControl: false,
28+
lang: navigator.language.split('-')[0],
29+
// API key can be used on 2gis.github.io/mapgl-examples only!
30+
key: 'f1e71868-5c3d-4743-825c-90485bebbef4',
31+
style: 'c080bb6a-8134-4993-93a1-5b4d8c36a59b',
32+
styleState: { globeEnabled: true },
33+
graphicsPreset: 'immersive'
34+
});
35+
36+
const elevation = 10 ** 7;
37+
38+
const T = 40000;
39+
40+
const orbitParams = {
41+
inclination: 65,
42+
longitude: 10,
43+
};
44+
45+
const sputnikParams = {
46+
coordinates: [0, 0, elevation],
47+
modelSrc: `https://disk.2gis.com/styles/assets/models/east1-2-ae1e1bb19bdcd8d7b6aec614c193859664c1f16dd6f640d709aec22ddf48c54a.glb`,
48+
scale: 100000,
49+
minZoom: 1,
50+
maxZoom: 5,
51+
offset: [0, 0, 0],
52+
rotation: [0, 0, 0],
53+
interactive: true,
54+
};
55+
56+
const jakarta = map._impl;
57+
58+
let trackSputnik = false;
59+
let isAnimating = false;
60+
let startTime = null;
61+
let animationFrameId = null;
62+
63+
const onSputnikClick = () => {
64+
trackSputnik = !trackSputnik;
65+
};
66+
67+
const disableTracking = () => {
68+
if (trackSputnik) {
69+
trackSputnik = false;
70+
}
71+
};
72+
73+
const sputnik = new mapgl._J.GltfModel(jakarta, sputnikParams);
74+
75+
/**При клике в спутник начинаем отслеживание */
76+
sputnik.on('click', onSputnikClick);
77+
78+
const container = jakarta.getContainer();
79+
/**При клике в карту мимо спутника сбрасываем отслеживание */
80+
container.addEventListener('click', disableTracking);
81+
82+
const startAnimation = () => {
83+
if (!isAnimating) {
84+
isAnimating = true;
85+
startTime = null; // Сбрасываем время для новой анимации
86+
animationFrameId = requestAnimationFrame(aroundTheWorld);
87+
}
88+
};
89+
90+
const stopAnimation = () => {
91+
if (isAnimating && animationFrameId !== null) {
92+
cancelAnimationFrame(animationFrameId);
93+
animationFrameId = null;
94+
isAnimating = false;
95+
}
96+
};
97+
98+
/**Рекурсивная функция рассчета положения спутника */
99+
const aroundTheWorld = (timestamp) => {
100+
if (!startTime) startTime = timestamp;
101+
const elapsed = (timestamp - startTime) % T;
102+
103+
const progress = elapsed / T;
104+
105+
let longitude = orbitParams.longitude + 180 + (2 * progress - 1) * 180;
106+
if (longitude > 180) {
107+
longitude -= 360;
108+
}
109+
110+
const latitude = Math.sin(progress * Math.PI * 2) * orbitParams.inclination;
111+
112+
const rotationY = longitude + 90;
113+
const rotationX = Math.sin(Math.PI * 0.5 + progress * Math.PI * 2) * orbitParams.inclination;
114+
115+
// Применяем трансформацию только если координаты изменились
116+
sputnik.transform([
117+
{ coordinates: [longitude, latitude, elevation], duration: 0 },
118+
{ rotation: [-rotationX, rotationY, 0], duration: 0 },
119+
]);
120+
121+
if (trackSputnik) {
122+
/**Фиксируем центр карты над спутником */
123+
jakarta.setCenter([longitude, latitude], { duration: 0 });
124+
}
125+
126+
animationFrameId = requestAnimationFrame(aroundTheWorld);
127+
};
128+
129+
const handleZoom = () => {
130+
const currentZoom = jakarta.getZoom();
131+
if (currentZoom > 5) {
132+
stopAnimation();
133+
disableTracking();
134+
} else {
135+
startAnimation();
136+
}
137+
};
138+
139+
jakarta.on('zoom', handleZoom);
140+
141+
startAnimation();
142+
</script>
143+
</body>
144+
</html>

‎src/globe-sputnik/preview.png

150 KB
Loading

‎src/globe/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</head>
2020
<body>
2121
<div id="container"></div>
22-
<script src="https://mapgl.2gis.com/api/js/v0.0.360"></script>
22+
<script src="https://mapgl.2gis.com/api/js/v1"></script>
2323
<script>
2424
const map = new mapgl.Map('container', {
2525
center: [0, 25.23584],

‎src/lottie-marker/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const map = new mapgl.Map('map', {
22
center: [55.31878, 25.23584],
33
zoom: 13,
4-
key: '4970330e-7f1c-4921-808c-0eb7c4e63001',
4+
key: 'a1893935-6834-4445-b97a-3405fb426c5b',
55
});
66

77
const marker = new mapgl.HtmlMarker(map, {

‎src/lottie-tex-thorvg/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const map = (window.map) = new mapgl.Map('map', {
55
zoom: 19,
66
pitch: 17,
77
rotation: 160,
8-
key: '4970330e-7f1c-4921-808c-0eb7c4e63001',
8+
key: 'a1893935-6834-4445-b97a-3405fb426c5b',
99
});
1010

1111
const _wasmUrl = './thorvg-wasm.wasm';

‎src/lottie-tex/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const map = new mapgl.Map('map', {
33
zoom: 19,
44
pitch: 17,
55
rotation: 160,
6-
key: '4970330e-7f1c-4921-808c-0eb7c4e63001',
6+
key: 'a1893935-6834-4445-b97a-3405fb426c5b',
77
});
88

99
const raster = new mapgl.Raster(map, {

‎src/reload-test/index.html

Lines changed: 7 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
let map;
4949

5050
const url = new URL(location);
51-
const mapType = url.searchParams.get('mapType');
51+
const mapType = 'mapgl'; // url.searchParams.get('mapType');
5252
const mapglUrl = url.searchParams.get('mapglUrl') ?? undefined;
5353

5454
if (mapType === 'mapgl') {
@@ -63,9 +63,12 @@
6363

6464
map = window.map = new mapgl.Map('map', {
6565
center: [37.62708, 55.750471],
66-
key: '4970330e-7f1c-4921-808c-0eb7c4e63001',
67-
// key: 'a1893935-6834-4445-b97a-3405fb426c5b',
68-
zoom: 16,
66+
key: 'a1893935-6834-4445-b97a-3405fb426c5b',
67+
maxPitch: 80,
68+
lowZoomMaxPitch: 80,
69+
pitch: 75,
70+
rotation: 33,
71+
zoom: 17.5,
6972
});
7073
}
7174
reload();
@@ -84,34 +87,6 @@
8487
window.reload = reload;
8588
window.destroy = destroy;
8689
}
87-
88-
if (mapType === 'mapbox') {
89-
function reload () {
90-
if (map) {
91-
map.remove();
92-
}
93-
94-
map = window.map = new mapboxgl.Map({
95-
container: 'map',
96-
style: 'mapbox://styles/mapbox/streets-v9',
97-
zoom: 16,
98-
center: [37.62708, 55.750471]
99-
});
100-
101-
}
102-
103-
reload();
104-
105-
106-
function destroy () {
107-
if (map) {
108-
map.remove();
109-
}
110-
}
111-
112-
window.reload = reload;
113-
window.destroy = destroy;
114-
}
11590
</script>
11691
</body>
11792
</html>

‎src/terrain/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
center: [82.9314, 55.0301],
5353
zoom: 2,
5454
maxZoom: 22,
55+
maxPitch: 70,
5556
hillshade: true,
5657
style: 'eb10e2c3-3c28-4b81-b74b-859c9c4cf47e',
5758
key: 'f1e71868-5c3d-4743-825c-90485bebbef4',

0 commit comments

Comments
 (0)