代码拉取完成，页面将自动刷新
不确定什么情况下会导致，在缩放浏览器大小的时候，L7会不断的触发resize事件，即使地图容器的大小已经不变，他还是会不断触发事件。
定位到是L7使用了element-resize-event库监听元素大小导致的问题，建议换成element-resize-detector
业务代码大概如下，但该代码并未复现一直触发resize事件的情况，所以暂时不清楚什么场景下会复现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#wrapper-container {
--scale: 1;
width: calc(1 / var(--scale) * 100%);
height: calc(1 / var(--scale) * 100%);
}
#wrapper {
color: #666;
width: 100%;
height: 100%;
transform: scale(var(--scale));
transform-origin: 0 0;
position: relative;
left: 0px;
top: 0px;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.left,
.right {
width: 30%;
height: 100%;
float: left;
}
.center {
float: left;
width: 40%;
height: 100%;
overflow: hidden;
}
</style>
<body>
<div id="wrapper-container">
<div id="wrapper" class="clearfix">
<div class="left"></div>
<div class="center"><div id="l7-container" style="width:100%;height:100%;overflow: hidden;position: relative;"></div></div>
<div class="right"></div>
</div>
</div>
<! --引入最新版的L7-->
<script src="https://unpkg.com/@antv/l7"></script>
<script>
window.onload = () => {
const scene = new L7.Scene({
id: "l7-container",
map: new L7.GaodeMap({
style: "dark",
center: [110.770672, 34.159869],
pitch: 45,
}),
});
window.addEventListener("resize", () => {
const scrollHeight = 1164;
const wrapperContainer = document.getElementById("wrapper-container");
const newScale =
scrollHeight > window.innerHeight
? window.innerHeight / scrollHeight
: 1;
wrapperContainer.style.setProperty("--scale", newScale);
console.log(newScale, 21312);
});
};
</script>
</body>
</html>
不要一直触发resize事件