02Cesium中常用的鼠标事件

于 2024-09-30 02:09:07 发布
阅读量1.1k 收藏 28
点赞数 22
分类专栏： Cesium Vue 文章标签： Cesium Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62317155/article/details/142646672
版权
Vue 同时被 2 个专栏收录
21 篇文章 1 订阅
订阅专栏
Cesium
2 篇文章 0 订阅
订阅专栏

文章目录

02Cesium中常用的鼠标事件

Cesium中常用的鼠标事件有左键单击事件、左键双击事件、左键按下事件、左键弹起事件、中键按下事件、中键弹起事件、鼠标移动事件、右键单击事件、右键按下事件、右键弹起事件、鼠标滚轮事件。注意：是没有鼠标右键双击事件的说法的。这里只是涉及到鼠标对应事件的API用法，记录一下常用的鼠标事件，至于具体在场景中的应用，如屏幕坐标与经纬度的转换，鼠标点击获取经纬度等，看后续文章。

1、左键单击事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('左键单击事件：',click.position);   
},Cesium.ScreenSpaceEventType.LEFT_CLICK);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

2、左键双击事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('左键双击事件：',click.position);   
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

3、左键按下事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('左键按下事件：',click.position);   
},Cesium.ScreenSpaceEventType.LEFT_DOWN);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);

4、左键弹起事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('左键弹起事件：',click.position);   
},Cesium.ScreenSpaceEventType.LEFT_UP);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);

5、中键按下事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
   console.log('中键按下事件：',click.position);   
},Cesium.ScreenSpaceEventType.MIDDLE_DOWN);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_DOWN);

6、中键弹起事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('中键弹起事件：',click.position);   
},Cesium.ScreenSpaceEventType.MIDDLE_UP);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_UP);

7、鼠标移动事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement){
  console.log('移动事件：',movement.endPosition);   
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);

8、右键单击事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('右键单击事件',click.position);   
},Cesium.ScreenSpaceEventType.RIGHT_CLICK);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);

9、右键按下事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('右键按下事件',click.position);   
},Cesium.ScreenSpaceEventType.RIGHT_DOWN);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_DOWN);

10、右键弹起事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('右键弹起事件',click.position);   
},Cesium.ScreenSpaceEventType.RIGHT_UP);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_UP);

11、鼠标滚轮事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(wheelment){
  console.log('滚轮事件：',wheelment);   
},Cesium.ScreenSpaceEventType.WHEEL);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL);

具体在代码中的应用如下所示

在对应vue中的代码如下所示，可以先看后面的截图，然后结合截图看代码相关的内容。对应的项目地址：https://gitee.com/the-world-keeps-blooming/my-vite-vue-cesium

<template>
    <div style="width: 100%; height: 100%; position: relative;">
        <div id="cesiumContainer"></div>
        <div class="cesium-viewer-toolbar">
            <el-row>
                <div style="font-size: 16px;">Cesium中常用的鼠标事件</div>
            </el-row>
            <el-row style="margin-top: 16px;">
                <el-form label-width="auto" style="max-width: 600px">
                    <el-form-item label="左键单击事件：">
                        <el-button type="primary" @click="LEFT_CLICK">左键单击</el-button>
                        <el-button type="primary" @click="REMOVE_LEFT_CLICK">移除左键单击</el-button>
                    </el-form-item>
                    <el-form-item label="左键双击事件：">
                        <el-button type="primary" @click="LEFT_DOUBLE_CLICK">左键双击</el-button>
                        <el-button type="primary" @click="REMOVE_LEFT_DOUBLE_CLICK">移除左键双击</el-button>
                    </el-form-item>
                    <el-form-item label="左键按下事件：">
                        <el-button type="primary" @click="LEFT_DOWN">左键按下</el-button>
                        <el-button type="primary" @click="REMOVE_LEFT_DOWN">移除左键按下</el-button>
                    </el-form-item>
                    <el-form-item label="左键弹起事件：">
                        <el-button type="primary" @click="LEFT_UP">左键弹起</el-button>
                        <el-button type="primary" @click="REMOVE_LEFT_UP">移除左键弹起</el-button>
                    </el-form-item>
                    <el-form-item label="中键按下事件：">
                        <el-button type="primary" @click="MIDDLE_DOWN">中键按下</el-button>
                        <el-button type="primary" @click="REMOVE_MIDDLE_DOWN">移除中键按下</el-button>
                    </el-form-item>
                    <el-form-item label="中键弹起事件：">
                        <el-button type="primary" @click="MIDDLE_UP">中键弹起</el-button>
                        <el-button type="primary" @click="REMOVE_MIDDLE_UP">移除中键弹起</el-button>
                    </el-form-item>
                    <el-form-item label="鼠标移动事件：">
                        <el-button type="primary" @click="MOUSE_MOVE">鼠标移动</el-button>
                        <el-button type="primary" @click="REMOVE_MOUSE_MOVE">移除鼠标移动</el-button>
                    </el-form-item>
                    <el-form-item label="右键单击事件：">
                        <el-button type="primary" @click="RIGHT_CLICK">右键单击</el-button>
                        <el-button type="primary" @click="REMOVE_RIGHT_CLICK">移除右键单击</el-button>
                    </el-form-item>
                    <el-form-item label="右键弹起事件：">
                        <el-button type="primary" @click="RIGHT_UP">右键弹起</el-button>
                        <el-button type="primary" @click="REMOVE_RIGHT_UP">移除右键弹起</el-button>
                    </el-form-item>
                    <el-form-item label="滚轮事件：">
                        <el-button type="primary" @click="WHEEL">滚轮事件</el-button>
                        <el-button type="primary" @click="REMOVE_WHEEL">移除滚轮事件</el-button>
                    </el-form-item>
                    <el-form-item label="多个事件结合：">
                        <el-button type="primary" @click="MORE_EVENTS">多个事件</el-button>
                        <el-button type="primary" @click="REMOVE_MORE_EVENTS">移除多个事件</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <div style="font-size: 16px;">确保鼠标在地球上点击有效，这里以鼠标左键点击为例，其他以此类推</div>
            </el-row>
            <el-row style="margin-top: 16px;">
                <el-form label-width="auto" style="max-width: 600px">
                    <el-form-item label="左键单击事件：">
                        <el-button type="primary" @click="LEFT_CLICK_IN_EARTH">左键单击</el-button>
                        <el-button type="primary" @click="REMOVE_LEFT_CLICK_IN_EARTH">移除左键单击</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import * as Cesium from 'cesium';

let viewer = null;
// const viewer = reactive(null)

// 开启鼠标监听事件
let handler = null;

/**
 * 左键单击事件
 */
const LEFT_CLICK = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('左键单击事件：', click.position);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

/**
 * 移除左键单击事件
 */
const REMOVE_LEFT_CLICK = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

/**
 * 左键双击事件
 */
const LEFT_DOUBLE_CLICK = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('左键双击事件：', click.position);
    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}

/**
 * 移除左键双击事件
 */
const REMOVE_LEFT_DOUBLE_CLICK = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
}

/**
 * 左键按下事件
 */
const LEFT_DOWN = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('左键按下事件：', click.position);
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
}

/**
 * 移除左键按下事件
 */
const REMOVE_LEFT_DOWN = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)
}

/**
 * 左键弹起事件
 */
const LEFT_UP = () => {

    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('左键弹起事件：', click.position);
    }, Cesium.ScreenSpaceEventType.LEFT_UP);
}

/**
 * 移除左键弹起事件
 */
const REMOVE_LEFT_UP = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
}

/**
 * 中键按下事件
 */
const MIDDLE_DOWN = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('中键按下事件：', click.position);
    }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
}

/**
 * 移除中键弹起事件
 */
const REMOVE_MIDDLE_DOWN = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
}

/**
 * 中键弹起事件
 */
const MIDDLE_UP = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('中键弹起事件：', click.position);
    }, Cesium.ScreenSpaceEventType.MIDDLE_UP);
}

/**
 * 移除中键弹起事件
 */
const REMOVE_MIDDLE_UP = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_UP)
}

/**
 * 鼠标移动事件
 */
const MOUSE_MOVE = () => {
    handler.setInputAction(function (movement) {
        // 这里的movement.endPosition指的是屏幕坐标
        console.log('鼠标移动事件：', movement.endPosition);
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

/**
 * 移除鼠标移动事件
 */
const REMOVE_MOUSE_MOVE = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
}

/**
 * 右键单击事件
 */
const RIGHT_CLICK = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('右键单击事件：', click.position);
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}

/**
 * 移除右键单击事件
 */
const REMOVE_RIGHT_CLICK = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}

/**
 * 右键弹起事件
 */
const RIGHT_UP = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('右键弹起事件：', click.position);
    }, Cesium.ScreenSpaceEventType.RIGHT_UP);
}

/**
 * 移除右键弹起事件
 */
const REMOVE_RIGHT_UP = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_UP)
}

/**
 * 滚轮事件
 */
const WHEEL = () => {
    handler.setInputAction(function (movement) {
        console.log('滚轮事件：', movement.endPosition);
    }, Cesium.ScreenSpaceEventType.WHEEL);
}

/**
 * 移除滚轮事件
 */
const REMOVE_WHEEL = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL)
}

/**
 * 多个事件结合使用
 */
const MORE_EVENTS = () => {
    // 为了防止其他事件影响，先移除所有事件
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL)
    // 以下三个方法在绘制的时候通常都是需要结合一起使用的。
    // 鼠标左键击事件
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('左键单击事件：', click.position);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    // 鼠标移动事件
    handler.setInputAction(function (movement) {
        // 这里的movement.endPosition指的是屏幕坐标
        console.log('鼠标移动事件：', movement.endPosition);
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    // 鼠标右键事件
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('右键单击事件：', click.position);
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}

/**
 * 移除多个事件结合
 */
const REMOVE_MORE_EVENTS = () => {
    // 移除：鼠标左键击事件、鼠标移动事件、鼠标右键事件
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)

}

/**
 * 确保鼠标在地球上点击有效，这里以鼠标左键点击为例，其他以此类推，左键单击事件
 */
const LEFT_CLICK_IN_EARTH = () => {

    // 为了防止其他事件影响，先移除所有事件
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL)
    
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        // 保证鼠标在地球上
        var ray = viewer.camera.getPickRay(click.position)
        var position = viewer.scene.globe.pick(ray, viewer.scene)
        if (position) {
            console.log("点击了地球，鼠标在地球上，焦点坐标：", position)
        } else {
            console.log('左键单击事件，鼠标不在地球上：', click.position);
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

const REMOVE_LEFT_CLICK_IN_EARTH = () => {
    // 这里也可以移除对应的所有事件，但是如果没有绑定其他事件的话就没必要了移除了，其实移除其他的也不影响，还能保证不受到其他事件的影响
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

onMounted(() => {
    // 对应的Cesium的token
    let token = '你的token'
    Cesium.Ion.defaultAccessToken = token
    viewer = new Cesium.Viewer('cesiumContainer', {
        // 搜索框
        geocoder: false,
        // home键
        homeButton: false,
        // 全屏按钮
        fullscreenButton: false,
        // 动画控件
        animation: false,
        // 场景模式选择器,就是控制二三维的那个
        sceneModePicker: false,
        // 时间轴
        timeline: false,
        // 导航帮助提示按钮
        navigationHelpButton: false,
        // 地图选择器
        baseLayerPicker: false,
    });

    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
})

onUnmounted(() => {
    // 这个要不要都可以
    if (handler) {
        handler.destroy();
    }
    
})

</script>

<style scoped>
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 隐藏底部 */
:deep(.cesium-viewer-bottom) {
    display: none !important;
}

.cesium-viewer-toolbar {
    position: absolute;
    background-color: #FFFFFF;
    width: 400px;
    height: 800px;
    top: 16px;
    left: 16px;
    padding: 16px;
}
</style>

结果如下图所示，点击的时候，F12打开浏览器的控制台，看着点击就可以了。
在这里插入图片描述

代码中还有确保鼠标在地球上点击有效，从而实现拿到的点位可以保证在地球上，这里以鼠标左键点击为例，其他以此类推。
在这里插入图片描述

m0_62317155
关注
专栏目录
Cesium鼠标事件及其实现方式
ByteZenith的博客
09-17 285
在上面的示例中，我们首先创建了一个Cesium的Viewer对象，并指定了用于渲染地球的容器元素。通过监听鼠标事件，您可以实现丰富的交互式功能，例如获取点击位置的地理坐标。在实际应用中，您可以根据自己的需求扩展和定制鼠标事件的处理逻辑。希望本文对您有所帮助！例如，您可以监听mouseMove事件来实现鼠标移动时的交互效果，或者监听mouseDown和mouseUp事件来实现鼠标按下和释放时的交互效果。首先，我们需要创建一个Cesium的场景（Scene）对象，以及一个用于渲染地球的容器元素。
cesium移除所有鼠标绑定事件
weixin_35751194的博客
12-29 896
如果您想要在 Cesium 中移除所有鼠标绑定事件，可以使用以下方法： 首先，获取 Cesium 的场景对象，例如： var viewer = new Cesium.Viewer('cesiumContainer'); var scene = viewer.scene; 然后，获取鼠标事件管理器： var handler =new Cesium.ScreenSpaceEventHandl...
cesium(鼠标事件)
weixin_34245169的博客
11-12 1623
本文示列 cesium 鼠标添加事件、及删除事件。 创建viewer var viewer = new Cesium.Viewer('cesiumContainer'); 鼠标事件 var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //1、左键单击事件 handler....
Cesium中的鼠标事件
DTCloud
04-18 1523
在Cesium中，有部分情况需要和场景进行交互，这就离不开鼠标的操作。Cesium为实现这一功能，分成了两个过程。类，例如实例化后的名称为handler；然后，为 handler 注册鼠标事件的监听；最后，在监听事件的回调方法中获取。鼠标的事件接口类型。在其官方文档里共有十五种类型，此处介绍三种常用的事件。方法获取对应的选中对象。因此简单介绍一下Cesium提供的鼠标监听接口。可以监听Cesium的父容器canvas的事件。设置要在输入事件上执行的函数。对监听事件属性进行设置。以鼠标左键点击事件为例。
Cesium鼠标事件
StupidlyGrass的博客
02-27 1222
【代码】Cesium鼠标事件。
Cesium06-事件处理之鼠标事件
m0_56492004的博客
03-13 1055
Cesium将事件大致分成了三大类：01、屏幕空间事件处理程序（Screen Space Event Handler）;02、屏幕空间相机控制器（Screen Space Camera Controller）；03、场景渲染事件。
Cesium 地图显示鼠标经纬度和高度
02-23
在事件处理器中，我们可以调用`viewer.camera.pickEllipsoid()`方法获取鼠标在地图上的位置，再通过`Cesium.Cartographic`对象转换为地理坐标（经度、纬度）： ```javascript var handler = new Cesium....
Cesium 中 实体类entity多种实例对象-实现点击事件
06-04
本主题将深入探讨如何在Cesium中利用Entity类创建不同的实例对象，并实现点击事件功能，以便与用户进行交互。 首先，让我们了解Cesium中的Entity类。Entity类是Cesium中的一个抽象基类，它提供了用于在3D场景中表示...
Cesium使用鼠标中键，视角不进入地下
07-31
使用Cesium的同志们，肯定会被拖动鼠标中键时，一不小心视角就会进入地下的问题所困扰，因为Cesium地球引擎并没有处理这个问题。这个问题已经解决，希望能给大家带来帮助
cesium中实现鼠标事件
06-01
在Cesium中实现鼠标事件可以通过以下步骤： 1. 获取Cesium的场景实例(scene)。 2. 使用Cesium的viewer对象绑定鼠标事件监听器。 3. 在监听器中通过场景实例(scene)获取鼠标位置。 4. 根据鼠标位置进行相应的操作...
cesium 常用鼠标事件
最新发布
Light_10的博客
04-11 248
5、中键单击事​​件。
4、CCesium鼠标点击事件
mylove10086
07-06 828
cesium鼠标点击事件
cesium鼠标事件
qq_38122757的博客
02-27 229
5、中键单击事​​件。
Cesium 事件详解（鼠标事件、相机事件、键盘事件、场景触发事件）
热门推荐
GISer小辉
11-29 2万+
内容包括：鼠标事件、相机事件、键盘事件、场景触发事件等，持续更新。
Cesium事件处理
【cacrle】的博客
01-26 2192
无论是二维GIS应用系统还是三维GIS应用系统，都离不开各种事件的应用，特别是鼠标左键单击事件、鼠标左键双击事件等。根据事件的类型、用途，Cesium将事件大致分成了三大类，即屏幕空间事件处理程序（Screen Space Event Handler）、屏幕空间相机控制器（Screen Space Camera Controller）和场景渲染事件。
Cesium 鼠标事件监听
现在学习也不晚
01-25 2万+
在Cesium里面，我们可以通过Cesium.ScreenSpaceEventHandler的实例化对象的setInputAction方法绑定鼠标事件： var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //todo：在椭球下点击创建点 handler.setInputAction(function(event) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值