Skip to content

Commit a0aa0ec

Browse files
itanka9itanka9
committed
globe sat
1 parent 3903747 commit a0aa0ec

File tree

3 files changed

+144
-1
lines changed

3 files changed

+144
-1
lines changed

‎src/globe-sputnik/index.html

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
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.5,
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+
});
34+
35+
const elevation = 10 ** 7;
36+
37+
const T = 40000;
38+
39+
const orbitParams = {
40+
inclination: 65,
41+
longitude: 10,
42+
};
43+
44+
const sputnikParams = {
45+
coordinates: [0, 0, elevation],
46+
modelSrc: `https://disk.2gis.com/styles/assets/models/east1-2-ae1e1bb19bdcd8d7b6aec614c193859664c1f16dd6f640d709aec22ddf48c54a.glb`,
47+
scale: 100000,
48+
minZoom: 1,
49+
maxZoom: 5,
50+
offset: [0, 0, 0],
51+
rotation: [0, 0, 0],
52+
interactive: true,
53+
};
54+
55+
const jakarta = map._impl;
56+
57+
let trackSputnik = false;
58+
let isAnimating = false;
59+
let startTime = null;
60+
let animationFrameId = null;
61+
62+
const onSputnikClick = () => {
63+
trackSputnik = !trackSputnik;
64+
};
65+
66+
const disableTracking = () => {
67+
if (trackSputnik) {
68+
trackSputnik = false;
69+
}
70+
};
71+
72+
const sputnik = new mapgl._J.GltfModel(jakarta, sputnikParams);
73+
74+
/**При клике в спутник начинаем отслеживание */
75+
sputnik.on('click', onSputnikClick);
76+
77+
const container = jakarta.getContainer();
78+
/**При клике в карту мимо спутника сбрасываем отслеживание */
79+
container.addEventListener('click', disableTracking);
80+
81+
const startAnimation = () => {
82+
if (!isAnimating) {
83+
isAnimating = true;
84+
startTime = null; // Сбрасываем время для новой анимации
85+
animationFrameId = requestAnimationFrame(aroundTheWorld);
86+
}
87+
};
88+
89+
const stopAnimation = () => {
90+
if (isAnimating && animationFrameId !== null) {
91+
cancelAnimationFrame(animationFrameId);
92+
animationFrameId = null;
93+
isAnimating = false;
94+
}
95+
};
96+
97+
/**Рекурсивная функция рассчета положения спутника */
98+
const aroundTheWorld = (timestamp) => {
99+
if (!startTime) startTime = timestamp;
100+
const elapsed = (timestamp - startTime) % T;
101+
102+
const progress = elapsed / T;
103+
104+
let longitude = orbitParams.longitude + 180 + (2 * progress - 1) * 180;
105+
if (longitude > 180) {
106+
longitude -= 360;
107+
}
108+
109+
const latitude = Math.sin(progress * Math.PI * 2) * orbitParams.inclination;
110+
111+
const rotationY = longitude + 90;
112+
const rotationX = Math.sin(Math.PI * 0.5 + progress * Math.PI * 2) * orbitParams.inclination;
113+
114+
// Применяем трансформацию только если координаты изменились
115+
sputnik.transform([
116+
{ coordinates: [longitude, latitude, elevation], duration: 0 },
117+
{ rotation: [-rotationX, rotationY, 0], duration: 0 },
118+
]);
119+
120+
if (trackSputnik) {
121+
/**Фиксируем центр карты над спутником */
122+
jakarta.setCenter([longitude, latitude], { duration: 0 });
123+
}
124+
125+
animationFrameId = requestAnimationFrame(aroundTheWorld);
126+
};
127+
128+
const handleZoom = () => {
129+
const currentZoom = jakarta.getZoom();
130+
if (currentZoom > 5) {
131+
stopAnimation();
132+
disableTracking();
133+
} else {
134+
startAnimation();
135+
}
136+
};
137+
138+
jakarta.on('zoom', handleZoom);
139+
140+
startAnimation();
141+
</script>
142+
</body>
143+
</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],

0 commit comments

Comments
 (0)