唯杰地图 logo唯杰地图
VJMAP
EN

输入

vjmap3d/references/interaction/input.md 9.7 KB333 行
原文

vjmap3d引擎中提供了基本的输入系统，可以统一处理鼠标与触屏的操作输入。

常用的输入事件名

事件名 信号名 描述
mouseup onMouseUp 鼠标抬起
mousemove onMouseMove 鼠标移动
mousedown onMouseDown 鼠标按下
preclick onMousePreClick 单击(click)事件触发之前
click onMouseClick 鼠标单击
dblclick onMouseDblClick 鼠标双击
mouseover onMouseOver 鼠标指针穿过被选元素或其子元素，均会触发事件
mouseout onMouseOut 鼠标指针离开被选元素或其子元素则触发事件
mouseenter onMouseEnter 鼠标指针穿过被选元素时才触发事件
mouseleave onMouseLeave 鼠标指针离开被选元素时才触发事件
contextmenu onContextMenu 上下文菜单事件
pointerdown onPointerDown 指针按下(PC和移动端)
pointermove onPointerMove 指针移动(PC和移动端)
pointerup onPointerUp 指针抬起(PC和移动端)
pointerdownup onPointerDownUp 指针直接按下松开，没有拖动
pointercancel onPointerCancel 指针取消
mousewheel onMouseWheel 鼠标滚轮
keydown onKeyDown 键盘按下
keyup onKeyUp 键盘抬起

app.on("click") 与 app.signal.onMouseClick.add(...) 双通道同发 ✓；pointerdownup 仅"按下松开无拖动"触发，拖动不触发 ✓；右键 mousedown+mouseup（button=2）由 pointerdownup 推导派发 contextmenu ✓；app.Input.x()/y()/getKeyPressed("ShiftLeft") 可用。注意 Input.isLeftButtonDown 等按键态读的是 pointer 事件通道——合成 MouseEvent("mousedown") 不翻转其状态，测试须派发 PointerEvent。

示例： 响应点击事件，弹出信息

下面两种写法效果一样

使用信号写法

app.signal.onMouseClick.add(e => app.logInfo("您点击了下!", "success" , 1000))

监听事件写法

app.on("click", e => app.logInfo("您点击了下!", "success" , 1000))

let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
    // 渲染参数
    scene: {
        gridHelper: { visible: true } // 是否显示坐标网格
    },
    camera: {  // 相机设置
        viewHelper: { enable: true } // 是否显示视角指示器
    }
})
app.on("click", e => app.logInfo("您点击了下!", "success" , 1000))
//
//app.signal.onMouseClick.add(e => app.logInfo("您点击了下!", "success" , 1000))

获取当前输入状态

通过 App 的 Input 获取当前输入状态

let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
    stat: { show: true, left: "0" },
    scene: {
        gridHelper: { visible: true } // 是否显示坐标网格
    },
    camera: {  // 相机设置
        viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
    }
})
let cfg = [
    {
        type: 'checkbox',
        label: '允许输入',
        getValue: ()=> app.Input.enabled(),
        setValue: v => app.Input.setEnable(v)
    },
    {
        type: 'number',
        label: '当前鼠标X',
        getValue: () => app.Input.x(),
        readOnly: true
    },
    {
        type: 'number',
        label: '当前鼠标Y',
        getValue: () => app.Input.y(),
        readOnly: true
    },
    {
        type: 'number',
        label: '当前鼠标移动X',
        getValue: () => app.Input.movementX(),
        readOnly: true
    },
    {
        type: 'number',
        label: '当前鼠标移动Y',
        getValue: () => app.Input.movementY(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '鼠标移动',
        getValue: () => app.Input.isMoving(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '鼠标拖动',
        getValue: () => app.Input.isDragging(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '左键按下',
        getValue: () => app.Input.isLeftButtonDown(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '左键按住',
        getValue: () => app.Input.isLeftButtonPressed(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '左键抬起',
        getValue: () => app.Input.isLeftButtonUp(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '中键按下',
        getValue: () => app.Input.isMidButtonDown(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '中键按住',
        getValue: () => app.Input.isMidButtonPressed(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '中键抬起',
        getValue: () => app.Input.isMidButtonUp(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '右键按下',
        getValue: () => app.Input.isRightButtonDown(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '右键按住',
        getValue: () => app.Input.isRightButtonPressed(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '右键抬起',
        getValue: () => app.Input.isRightButtonUp(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '按住Shift键',
        getValue: () => !!(app.Input.getKeyPressed("ShiftLeft") || app.Input.getKeyPressed("ShiftRight")),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '按住Ctrl键',
        getValue: () => !!(app.Input.getKeyPressed("ControlLeft") || app.Input.getKeyPressed("ControlRight")),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '按住Alt键',
        getValue: () => !!(app.Input.getKeyPressed("AltLeft") || app.Input.getKeyPressed("AltRight")),
        readOnly: true
    }
]
const ui = await app.getConfigPane({ title: "输入参数", style: { width: "250px"}});
cfg.forEach(c => ui.appendChild(c));

let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
    stat: { show: true, left: "0" },
    scene: {
        gridHelper: { visible: true } // 是否显示坐标网格
    },
    camera: {  // 相机设置
        viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
    }
})
let cfg = [
    {
        type: 'checkbox',
        label: '允许输入',
        getValue: ()=> app.Input.enabled(),
        setValue: v => app.Input.setEnable(v)
    },
    {
        type: 'number',
        label: '当前鼠标X',
        getValue: () => app.Input.x(),
        readOnly: true
    },
    {
        type: 'number',
        label: '当前鼠标Y',
        getValue: () => app.Input.y(),
        readOnly: true
    },
    {
        type: 'number',
        label: '当前鼠标移动X',
        getValue: () => app.Input.movementX(),
        readOnly: true
    },
    {
        type: 'number',
        label: '当前鼠标移动Y',
        getValue: () => app.Input.movementY(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '鼠标移动',
        getValue: () => app.Input.isMoving(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '鼠标拖动',
        getValue: () => app.Input.isDragging(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '左键按下',
        getValue: () => app.Input.isLeftButtonDown(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '左键按住',
        getValue: () => app.Input.isLeftButtonPressed(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '左键抬起',
        getValue: () => app.Input.isLeftButtonUp(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '中键按下',
        getValue: () => app.Input.isMidButtonDown(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '中键按住',
        getValue: () => app.Input.isMidButtonPressed(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '中键抬起',
        getValue: () => app.Input.isMidButtonUp(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '右键按下',
        getValue: () => app.Input.isRightButtonDown(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '右键按住',
        getValue: () => app.Input.isRightButtonPressed(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '右键抬起',
        getValue: () => app.Input.isRightButtonUp(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '按住Shift键',
        getValue: () => !!(app.Input.getKeyPressed("ShiftLeft") || app.Input.getKeyPressed("ShiftRight")),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '按住Ctrl键',
        getValue: () => !!(app.Input.getKeyPressed("ControlLeft") || app.Input.getKeyPressed("ControlRight")),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '按住Alt键',
        getValue: () => !!(app.Input.getKeyPressed("AltLeft") || app.Input.getKeyPressed("AltRight")),
        readOnly: true
    }
]
const ui = await app.getConfigPane({ title: "输入参数", style: { width: "250px"}});
cfg.forEach(c => ui.appendChild(c));