禁用鼠标滚轮和单点触控导航
此示例演示如何在 MapView 实例上禁用鼠标滚轮缩放和单指平移(适用于触摸设备)。这可以通过在视图的导航实例上将 mouseWheelZoomEnabled 和 browserTouchPanEnabled 属性设置为 false
来完成。
在触摸设备上禁用鼠标滚轮导航和单指平移
1
2
3
4
5
6
7
8
9
10
11
12
13
const view = new MapView({
container: "viewDiv",
map: new EsriMap({
basemap: "hybrid"
}),
center: [174.062376, -39.355675],
zoom: 11,
// Disable mouse-wheel and single-touch map navigation.
navigation: {
mouseWheelZoomEnabled: false,
browserTouchPanEnabled: false
}
});
当用户尝试使用禁用的导航手势时,可以通过侦听视图上的鼠标滚轮和指针事件,向他们显示警告消息。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// Listen to events that have been disallowed for navigation.
view.on("mouse-wheel", () => {
warnUser("To zoom in please double click the map. Use zoom in/out buttons.");
});
// Trap attempted single touch panning.
const pointers = new Map(); // javascript map
view.on("pointer-down", (event) => {
if (event.pointerType !== "touch") {
return;
}
pointers.set(event.pointerId, { x: event.x, y: event.y});
});
view.on(["pointer-up", "pointer-leave"], (event) => {
if (event.pointerType !== "touch") {
return;
}
pointers.delete(event.pointerId);
});
view.on("pointer-move", (event) => {
if (event.pointerType !== "touch") {
return;
}
if (pointers.size !== 1) {
return;
}
const distance = Math.sqrt(
Math.pow(event.x - pointers.get(event.pointerId).x, 2) +
Math.pow(event.y - pointers.get(event.pointerId).y, 2)
);
if (distance < 20) { return; }
warnUser("Please use two fingers to pan the map.");
});
// Display a warning.
let timeout;
function warnUser(warning) {
const warningDiv = document.getElementById("warning");
warningDiv.innerHTML = '<div class="message">' + warning + '</div>';
warningDiv.style.opacity = 1;
if (timeout) {
window.clearTimeout(timeout);
}
timeout = window.setTimeout(() => {
warningDiv.style.opacity = 0;
warningDiv.innerHTML = "";
}, 4000);
}