禁用所有视图导航

尝试一下在线预览

此示例演示如何在 MapView 实例上禁用所有缩放手势。虽然禁用拖动事件也会禁用使用鼠标或触摸输入平移地图,但键盘(例如方向箭头)仍然有效。默认情况下,以下手势对视图执行缩放操作:

以下各节详细介绍了如何禁用这些手势/微件中的每一个,以防止在视图上出现任何缩放手势。

禁用缩放微件

通过从默认 UI 微件列表中排除 zoom 字符串,从视图的默认 UI 组件中删除缩放微件。您可以在视图的构造函数中执行此操作:

        
1
2
3
4
5
6
7
8
const view = new MapView({
  container: "viewDiv",
  map: map,
  // Exclude the zoom widget from the default UI
  ui: {
    components: ["attribution"]
  }
});

... 或准备就绪后:

 
1
view.ui.components = ["attribution"];

禁用默认的 +/- 按键手势

要禁用键盘缩放,请侦听按键事件,并停止默认行为,方法是仅在按下 +- 键时在时间对象上调用 stopPropagation()。由于 Shift + = 键也会触发 + 键,因此我们也禁用了这些键。

       
1
2
3
4
5
6
7
view.on("key-down", (event) => {
  const prohibitedKeys = ["+", "-", "Shift", "_", "="];
  const keyPressed = event.key;
  if (prohibitedKeys.indexOf(keyPressed) !== -1) {
    event.stopPropagation();
  }
});

禁用默认鼠标滚轮行为

只需在鼠标滚轮事件对象上调用 stopPropagation(),即可防止用户通过滚动鼠标滚轮进行缩放。

   
1
2
3
view.on("mouse-wheel", (event) => {
  event.stopPropagation();
});

通过双击禁用缩放

用于防止使用 mouse-wheel 手势缩放的相同函数可以传递给事件侦听器进行双击,以防止通过双击放大。

   
1
2
3
view.on("double-click", (event) => {
  event.stopPropagation();
});

添加 ["Control"] 修饰符以防止使用 Control + double-click 缩小。

   
1
2
3
view.on("double-click", ["Control"], (event) => {
  event.stopPropagation();
});

禁用捏合缩放和平移

停止在拖动事件对象上的传播以禁用平移和收缩缩放。

   
1
2
3
view.on("drag", (event) => {
  event.stopPropagation();
});

禁用视图的缩放框

若要防止用户通过使用 Shift + dragShift + Control + drag 创建缩放框来放大或缩小,请使用 ShiftControl+Shift 修饰符调用拖动事件对象的 stopPropagation() 方法。

       
1
2
3
4
5
6
7
view.on("drag", ["Shift"], (event) => {
  event.stopPropagation();
});

view.on("drag", ["Shift", "Control"], (event) => {
  event.stopPropagation();
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.