Update index.html
Browse files- index.html +16 -16
index.html
CHANGED
|
@@ -22,6 +22,7 @@
|
|
| 22 |
background-image: url('./map-bg.png');
|
| 23 |
background-size: cover;
|
| 24 |
background-position: center;
|
|
|
|
| 25 |
}
|
| 26 |
|
| 27 |
#leaflet-map {
|
|
@@ -31,6 +32,7 @@
|
|
| 31 |
top: 0;
|
| 32 |
left: 0;
|
| 33 |
background: transparent;
|
|
|
|
| 34 |
}
|
| 35 |
|
| 36 |
.leaflet-tile-container img {
|
|
@@ -38,17 +40,6 @@
|
|
| 38 |
filter: grayscale(100%) !important;
|
| 39 |
}
|
| 40 |
|
| 41 |
-
.map .mask {
|
| 42 |
-
width: 100%;
|
| 43 |
-
height: 100%;
|
| 44 |
-
background-image: url("./cloud.png");
|
| 45 |
-
mix-blend-mode: lighten;
|
| 46 |
-
animation: 0s linear 0s magic forwards;
|
| 47 |
-
position: absolute;
|
| 48 |
-
top: 0;
|
| 49 |
-
left: 0;
|
| 50 |
-
}
|
| 51 |
-
|
| 52 |
.track {
|
| 53 |
position: absolute;
|
| 54 |
top: 0;
|
|
@@ -57,6 +48,19 @@
|
|
| 57 |
mix-blend-mode: multiply;
|
| 58 |
opacity: .7;
|
| 59 |
pointer-events: none;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 60 |
}
|
| 61 |
|
| 62 |
.footprint {
|
|
@@ -231,11 +235,9 @@
|
|
| 231 |
</head>
|
| 232 |
<body>
|
| 233 |
<div class="map-container">
|
| 234 |
-
<div class="map">
|
| 235 |
-
<div id="mapMask" class="mask"></div>
|
| 236 |
-
</div>
|
| 237 |
<div id="leaflet-map"></div>
|
| 238 |
<div id="track" class="track"></div>
|
|
|
|
| 239 |
<div class="user-controls">
|
| 240 |
<input type="text" id="username" placeholder="输入你的名字" maxlength="20">
|
| 241 |
<button onclick="updateUsername()">更新名字</button>
|
|
@@ -339,7 +341,6 @@
|
|
| 339 |
map.setView([latitude, longitude], 16);
|
| 340 |
} else {
|
| 341 |
userMarker.setLatLng([latitude, longitude]);
|
| 342 |
-
// 只在非初次加载且有上一个位置时创建脚印
|
| 343 |
if (!isInitialLoad && lastPosition) {
|
| 344 |
const angle = getAngle(lastPosition, newPosition);
|
| 345 |
placeFootprint(newPosition, angle);
|
|
@@ -381,7 +382,6 @@
|
|
| 381 |
otherUsers[name].lastPosition = newPos;
|
| 382 |
}
|
| 383 |
|
| 384 |
-
// 清理断开连接的用户
|
| 385 |
for (const name of Object.keys(otherUsers)) {
|
| 386 |
if (!users[name]) {
|
| 387 |
map.removeLayer(otherUsers[name].marker);
|
|
|
|
| 22 |
background-image: url('./map-bg.png');
|
| 23 |
background-size: cover;
|
| 24 |
background-position: center;
|
| 25 |
+
z-index: 1;
|
| 26 |
}
|
| 27 |
|
| 28 |
#leaflet-map {
|
|
|
|
| 32 |
top: 0;
|
| 33 |
left: 0;
|
| 34 |
background: transparent;
|
| 35 |
+
z-index: 2;
|
| 36 |
}
|
| 37 |
|
| 38 |
.leaflet-tile-container img {
|
|
|
|
| 40 |
filter: grayscale(100%) !important;
|
| 41 |
}
|
| 42 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 43 |
.track {
|
| 44 |
position: absolute;
|
| 45 |
top: 0;
|
|
|
|
| 48 |
mix-blend-mode: multiply;
|
| 49 |
opacity: .7;
|
| 50 |
pointer-events: none;
|
| 51 |
+
z-index: 3;
|
| 52 |
+
}
|
| 53 |
+
|
| 54 |
+
.mask {
|
| 55 |
+
width: 100%;
|
| 56 |
+
height: 100%;
|
| 57 |
+
background-image: url("./cloud.png");
|
| 58 |
+
mix-blend-mode: lighten;
|
| 59 |
+
animation: 4s linear 0s magic forwards;
|
| 60 |
+
position: absolute;
|
| 61 |
+
top: 0;
|
| 62 |
+
left: 0;
|
| 63 |
+
z-index: 4;
|
| 64 |
}
|
| 65 |
|
| 66 |
.footprint {
|
|
|
|
| 235 |
</head>
|
| 236 |
<body>
|
| 237 |
<div class="map-container">
|
|
|
|
|
|
|
|
|
|
| 238 |
<div id="leaflet-map"></div>
|
| 239 |
<div id="track" class="track"></div>
|
| 240 |
+
<div id="mapMask" class="mask"></div>
|
| 241 |
<div class="user-controls">
|
| 242 |
<input type="text" id="username" placeholder="输入你的名字" maxlength="20">
|
| 243 |
<button onclick="updateUsername()">更新名字</button>
|
|
|
|
| 341 |
map.setView([latitude, longitude], 16);
|
| 342 |
} else {
|
| 343 |
userMarker.setLatLng([latitude, longitude]);
|
|
|
|
| 344 |
if (!isInitialLoad && lastPosition) {
|
| 345 |
const angle = getAngle(lastPosition, newPosition);
|
| 346 |
placeFootprint(newPosition, angle);
|
|
|
|
| 382 |
otherUsers[name].lastPosition = newPos;
|
| 383 |
}
|
| 384 |
|
|
|
|
| 385 |
for (const name of Object.keys(otherUsers)) {
|
| 386 |
if (!users[name]) {
|
| 387 |
map.removeLayer(otherUsers[name].marker);
|