记录一下最近的一些测试效果
turf demo 需要翻墙
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mapbox 视觉中心偏移对齐</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
rel="stylesheet"
/>
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#car {
position: fixed;
width: 40px;
height: 40px;
top: calc(50% + 100px);
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
pointer-events: none; /* 防止点击穿透 */
}
button {
position: fixed;
top: 10px;
right: 10px;
z-index: 999;
}
button#center {
left: 10px;
width: 200px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoidGhlMzY4IiwiYSI6ImNsdGloODd5eTBpN3AycXFvb3RyZm1ubTgifQ.flw3jmiR1KODoEvl-ft0ig"; // 替换为你的 Mapbox 访问令牌
let selfMarker = null; // 用于存储自定义标记
let nearestMarker = null; // 用于存储最近点标记
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/dark-v10",
center: [-77.020339, 38.884084],
zoom: 15,
});
const lineCoords = [
[-77.031669, 38.878605],
[-77.029609, 38.881946],
[-77.020339, 38.884084],
[-77.025661, 38.885821],
[-77.021884, 38.889563],
[-77.019824, 38.892368],
];
map.on("click", (e) => {
// 添加地图控件
if (selfMarker) {
selfMarker.remove(); // 移除之前的标记
}
if (nearestMarker) {
nearestMarker.remove(); // 移除之前的最近点标记
}
const clickCoord = [e.lngLat.lng, e.lngLat.lat];
selfMarker = new mapboxgl.Marker().setLngLat(clickCoord).addTo(map);
var line = turf.lineString(lineCoords);
var pt = turf.point(clickCoord);
const nearestCoord = turf.nearestPointOnLine(line, pt);
nearestMarker = new mapboxgl.Marker({
color: "red",
draggable: false,
})
.setLngLat(nearestCoord.geometry.coordinates)
.addTo(map);
});
// 添加 GeoJSON 数据
const geojsonData = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: lineCoords,
},
properties: {
name: "Line 1",
},
},
],
};
map.on("load", () => {
map.addSource("lines", {
type: "geojson",
data: geojsonData,
});
// 添加图层
map.addLayer({
id: "lines-layer",
type: "line",
source: "lines",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": [
"match",
["get", "name"],
"Line 1",
"#ff0000", // Line 1 为红色
"Line 2",
"#00ff00", // Line 2 为绿色
"#0000ff", // 默认颜色为蓝色
],
"line-width": 5,
},
});
for (let i = 0; i < lineCoords.length; i++) {
console.log(lineCoords[i]);
const marker = new mapboxgl.Marker({
color: "green",
draggable: false,
})
.setLngLat(lineCoords[i])
.addTo(map);
}
});
</script>
</body>
</html>
卡片收起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.dark {
--bg-global: #1d1f29;
--text-color-1: rgba(255, 255, 255, 0.8);
--text-color-2: rgba(255, 255, 255, 0.5);
--bg-color-1: rgba(255, 255, 255, 0.1);
--bg-color-2: rgba(0, 0, 0, 0.6);
--border-color-1: rgba(255, 255, 255, 0.2);
--input-focus-bg-color: rgba(255, 255, 255, 0.2);
}
.light {
--bg-global: #dedede;
--text-color-1: rgba(0, 0, 0, 0.8);
--text-color-2: rgba(0, 0, 0, 0.5);
--bg-color-1: rgba(255, 255, 255, 0.4);
--bg-color-2: rgba(229, 229, 234, 0.97);
--border-color-1: rgba(0, 0, 0, 0.2);
--input-focus-bg-color: rgba(0, 0, 0, 0.1);
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--bg-global);
}
.notice {
position: relative;
transform-style: preserve-3d;
perspective: 800px;
cursor: pointer;
}
.item {
width: 300px;
height: 100px;
/* padding: 10px; */
border-radius: 10px;
position: relative;
background-color: #33353e;
-webkit-backdrop-filter: saturate(130%) blur(20px);
backdrop-filter: saturate(130%) blur(20px);
transition: 0.6s;
overflow: hidden;
color: var(--text-color-1);
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
/* mix-blend-mode: difference; */
}
.item:nth-child(2) {
position: absolute;
top: 0;
left: 0;
z-index: -1;
color: transparent;
transform: translateY(20px) translateZ(-3rem);
background-color: var(--bg-color-1);
}
.item:nth-child(3) {
position: absolute;
top: 0;
left: 0;
z-index: -2;
color: transparent;
transform: translateY(40px) translateZ(-6rem);
background-color: var(--bg-color-1);
}
.item:nth-child(4) {
position: absolute;
top: 0;
left: 0;
z-index: -3;
color: transparent;
transform: translateY(60px) translateZ(-9rem);
box-shadow: none;
background-color: var(--bg-color-1);
}
.item:nth-child(5) {
position: absolute;
top: 0;
left: 0;
z-index: -3;
color: transparent;
transform: translateY(60px) translateZ(-9rem);
box-shadow: none;
background-color: var(--bg-color-1);
}
.notice.unfolded .item {
color: black;
background-color: var(--bg-color-1);
}
.notice.unfolded .item:nth-child(2) {
transform: translateY(calc(100% + 10px));
}
.notice.unfolded .item:nth-child(3) {
transform: translateY(calc(200% + 20px));
}
.notice.unfolded .item:nth-child(4) {
transform: translateY(calc(300% + 30px));
}
.notice.unfolded .item:nth-child(5) {
transform: translateY(calc(400% + 40px));
}
.test-txt {
width: 80px;
height: 80px;
padding: 10px;
background-color: yellow;
overflow: hidden; /* 隐藏超出内容区域的部分 */
box-sizing: border-box; /* 确保宽度和高度包括 padding */
word-wrap: break-word; /* 自动换行 */
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
</style>
</head>
<body class="dark">
<button onclick="handleThemeChange()">切换主题</button>
<button onclick="notices.classList.toggle('unfolded')">折叠</button>
<ul class="notice">
<li class="item">
<img
src="https://img.zcool.cn/community/0312b4f5566c67b000001cc29e59fa2.jpg?imageMogr2/auto-orient/thumbnail/520x390r%3e/gravity/center/crop/520x390/sharpen/0.5/quality/80/format/webp"
/>
</li>
<li class="item">
<img
src="https://img.zcool.cn/community/01162e5d903ad6a8012060bee46bf3.jpg?imageMogr2/auto-orient/thumbnail/1280x%3e/sharpen/0.5/quality/100/format/webp"
/>
</li>
<li class="item">
<img
src="https://img.zcool.cn/community/0121a55d903ad6a801211d53066683.jpg?imageMogr2/auto-orient/thumbnail/1280x%3e/sharpen/0.5/quality/100/format/webp"
/>
</li>
<li class="item">
<img
src="https://img.zcool.cn/community/031yppcrrl24gtkezv3cnra3931.png?imageMogr2/auto-orient/thumbnail/520x390r%3e/gravity/center/crop/520x390/sharpen/0.5/quality/80/format/webp"
/>
</li>
<li class="item">
<img
src="https://img.zcool.cn/community/010996610b549411013eaf70ff8f9d.jpg?imageMogr2/auto-orient/thumbnail/520x390r%3e/gravity/center/crop/520x390/sharpen/0.5/quality/80/format/webp"
/>
</li>
</ul>
<script>
const notices = document.querySelector(".notice");
const list = document.querySelectorAll(".item");
list.forEach((item) => {
item.addEventListener("click", () => {
notices.classList.toggle("unfolded");
});
});
function handleThemeChange() {
const newTheme = document.body.classList.contains("dark")
? "light"
: "dark";
document.body.className = newTheme;
}
</script>
</body>
</html>
