新人求教，对arcgis 4.x的map容器设置了transform:scale 进行缩放后，地图的平移缩放，以及map与屏幕的对应点仍然不变
您好，我目前在使用arcgis js 4.x时，设置地图容器div的tranform变换时，遇到了关于变换后map点与屏幕点不对应的问题，请问下应该如何解决，这是复现问题的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://js.arcgis.com/4.28/esr ... ot%3B
/>
<script src="https://js.arcgis.com/4.28/%26 ... gt%3B
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.map-container {
width: 100vw;
height: 100vh;
}
#btn-container {
position: fixed;
top: 100px;
right: 100px;
background-color: white;
z-index: 1;
}
#btn-container button,
div {
padding: 10px;
}
</style>
</head>
<body>
<div id="btn-container">
<div id="txt">map容器缩放比例：1</div>
<button id="fd">放大</button>
<button id="sx">缩小</button>
</div>
<div class="map-container" id="map"></div>
<script>
require(["esri/Map", "esri/views/MapView"], function (Map, MapView) {
const myMap = new Map({
basemap: "streets-vector",
});
const view = new MapView({
map: myMap,
container: "map",
center: [120, 33],
zoom: 12,
});
view.on("click", (e) => {
console.log(e.x,e.y); // 缩放后，与屏幕坐标不对应，仍然是缩放前的屏幕坐标
});
});
const mapContainer = document.getElementById("map");
/** 默认缩放级别为1 */
let scale = 1;
document
.getElementById("btn-container")
.addEventListener("click", (e) => {
if (e.target.id === "fd") {
if (scale < 2) {
scale += 0.25;
}
} else {
if (scale >= 0.5) {
scale -= 0.25;
}
}
mapContainer.style.transform = `scale(${scale})`;
document.getElementById('txt').innerText=`map容器缩放比例：${scale}`
});
</script>
</body>
</html>
1 个回复
谢军
赞同来自: 安图生
要回复问题请先登录或注册