Update index.html
Browse files- index.html +10 -18
index.html
CHANGED
|
@@ -18,14 +18,10 @@
|
|
| 18 |
.map-container {
|
| 19 |
width: 1440px;
|
| 20 |
height: 900px;
|
| 21 |
-
background-image: url('./map-bg.png');
|
| 22 |
-
position: relative;
|
| 23 |
-
}
|
| 24 |
-
|
| 25 |
-
.map {
|
| 26 |
-
width: 100%;
|
| 27 |
-
height: 100%;
|
| 28 |
position: relative;
|
|
|
|
|
|
|
|
|
|
| 29 |
}
|
| 30 |
|
| 31 |
#leaflet-map {
|
|
@@ -35,15 +31,13 @@
|
|
| 35 |
top: 0;
|
| 36 |
left: 0;
|
| 37 |
background: transparent;
|
| 38 |
-
z-index: 1;
|
| 39 |
}
|
| 40 |
|
| 41 |
.leaflet-tile-container img {
|
| 42 |
-
opacity: 0.
|
| 43 |
-
filter: grayscale(100%);
|
| 44 |
}
|
| 45 |
-
|
| 46 |
-
.mask {
|
| 47 |
width: 100%;
|
| 48 |
height: 100%;
|
| 49 |
background-image: url("./cloud.png");
|
|
@@ -52,7 +46,6 @@
|
|
| 52 |
position: absolute;
|
| 53 |
top: 0;
|
| 54 |
left: 0;
|
| 55 |
-
z-index: 2;
|
| 56 |
}
|
| 57 |
|
| 58 |
.track {
|
|
@@ -62,7 +55,6 @@
|
|
| 62 |
height: 900px;
|
| 63 |
mix-blend-mode: multiply;
|
| 64 |
opacity: .7;
|
| 65 |
-
z-index: 3;
|
| 66 |
pointer-events: none;
|
| 67 |
}
|
| 68 |
|
|
@@ -239,12 +231,10 @@
|
|
| 239 |
<body>
|
| 240 |
<div class="map-container">
|
| 241 |
<div class="map">
|
| 242 |
-
<div id="leaflet-map"></div>
|
| 243 |
<div id="mapMask" class="mask"></div>
|
| 244 |
</div>
|
| 245 |
-
<div id="
|
| 246 |
-
|
| 247 |
-
</div>
|
| 248 |
<div class="user-controls">
|
| 249 |
<input type="text" id="username" placeholder="输入你的名字" maxlength="20">
|
| 250 |
<button onclick="updateUsername()">更新名字</button>
|
|
@@ -348,6 +338,7 @@
|
|
| 348 |
map.setView([latitude, longitude], 16);
|
| 349 |
} else {
|
| 350 |
userMarker.setLatLng([latitude, longitude]);
|
|
|
|
| 351 |
if (!isInitialLoad && lastPosition) {
|
| 352 |
const angle = getAngle(lastPosition, newPosition);
|
| 353 |
placeFootprint(newPosition, angle);
|
|
@@ -389,6 +380,7 @@
|
|
| 389 |
otherUsers[name].lastPosition = newPos;
|
| 390 |
}
|
| 391 |
|
|
|
|
| 392 |
for (const name of Object.keys(otherUsers)) {
|
| 393 |
if (!users[name]) {
|
| 394 |
map.removeLayer(otherUsers[name].marker);
|
|
|
|
| 18 |
.map-container {
|
| 19 |
width: 1440px;
|
| 20 |
height: 900px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 21 |
position: relative;
|
| 22 |
+
background-image: url('./map-bg.png');
|
| 23 |
+
background-size: cover;
|
| 24 |
+
background-position: center;
|
| 25 |
}
|
| 26 |
|
| 27 |
#leaflet-map {
|
|
|
|
| 31 |
top: 0;
|
| 32 |
left: 0;
|
| 33 |
background: transparent;
|
|
|
|
| 34 |
}
|
| 35 |
|
| 36 |
.leaflet-tile-container img {
|
| 37 |
+
opacity: 0.5 !important;
|
| 38 |
+
filter: grayscale(100%) brightness(0) invert(1) !important;
|
| 39 |
}
|
| 40 |
+
.map .mask {
|
|
|
|
| 41 |
width: 100%;
|
| 42 |
height: 100%;
|
| 43 |
background-image: url("./cloud.png");
|
|
|
|
| 46 |
position: absolute;
|
| 47 |
top: 0;
|
| 48 |
left: 0;
|
|
|
|
| 49 |
}
|
| 50 |
|
| 51 |
.track {
|
|
|
|
| 55 |
height: 900px;
|
| 56 |
mix-blend-mode: multiply;
|
| 57 |
opacity: .7;
|
|
|
|
| 58 |
pointer-events: none;
|
| 59 |
}
|
| 60 |
|
|
|
|
| 231 |
<body>
|
| 232 |
<div class="map-container">
|
| 233 |
<div class="map">
|
|
|
|
| 234 |
<div id="mapMask" class="mask"></div>
|
| 235 |
</div>
|
| 236 |
+
<div id="leaflet-map"></div>
|
| 237 |
+
<div id="track" class="track"></div>
|
|
|
|
| 238 |
<div class="user-controls">
|
| 239 |
<input type="text" id="username" placeholder="输入你的名字" maxlength="20">
|
| 240 |
<button onclick="updateUsername()">更新名字</button>
|
|
|
|
| 338 |
map.setView([latitude, longitude], 16);
|
| 339 |
} else {
|
| 340 |
userMarker.setLatLng([latitude, longitude]);
|
| 341 |
+
// 只在非初次加载且有上一个位置时创建脚印
|
| 342 |
if (!isInitialLoad && lastPosition) {
|
| 343 |
const angle = getAngle(lastPosition, newPosition);
|
| 344 |
placeFootprint(newPosition, angle);
|
|
|
|
| 380 |
otherUsers[name].lastPosition = newPos;
|
| 381 |
}
|
| 382 |
|
| 383 |
+
// 清理断开连接的用户
|
| 384 |
for (const name of Object.keys(otherUsers)) {
|
| 385 |
if (!users[name]) {
|
| 386 |
map.removeLayer(otherUsers[name].marker);
|