Cesium开发:常用地图事件

简介: Cesium开发:常用地图事件

在地图开发中,地图移动、鼠标操作等一系列事件,都会使用到,而在地图封装的API中,一般都会进行提供。
Cesium开发中,会使用到对应的一些事件,下边列举一些常用的事件以及事件的使用。

Cesium相机移动结束事件,这个在判断地图场景是否移动完成中进行使用,在移动完后,获取地图的相机坐标或者其他的一些坐标信息。

viewer.scene.camera.moveEnd.addEventListener(function() {
   
 //实现对应的移动结束操作
 });

鼠标移动事件,这个在判断当前地图的鼠标所在位置,获取鼠标位置的坐标,同时能够判断当前鼠标处,是否存在地图中的对象。

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

 handler.setInputAction(function (movement) {
   

//鼠标移动的结束坐标,也有起始坐标

 var pickedObject = scene.pick(movement.endPosition);

 //判断当前鼠标处,是否有对象

        if (

          Cesium.defined(pickedObject) &&

          pickedObject.id instanceof Cesium.Entity

        ) {
    
       //实体对象的处理

      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

//鼠标的点击事件,这个是判断数据点击所在的位置

 var handler.setInputAction(function (movement) {
   

//此处就只有鼠标的点击位置了   

 var pickedObject = scene.pick(movement.position);

        if (

 //同样也是判断点击处的对象信息

   Cesium.defined(pickedObject) &&

     pickedObject.id instanceof Cesium.Entity

        ) {
    

        }

      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

在使用完成后,用以下的方式去移除不需要的事件。
//移除鼠标点击事件
handler.removeInputAction(

          Cesium.ScreenSpaceEventType.LEFT_CLICK

        );

//移除鼠标移动事件

handler.removeInputAction(

          Cesium.ScreenSpaceEventType.MOUSE_MOVE
);

下边的是Cesium场景的实时渲染事件,每间隔很短的一个时间,就会执行一次事件,这个可以判断场景中的一些实时的对象情况。

viewer.scene.preRender.addEventListener(function() {
   

});

其他的还有诸如鼠标的滚轮事件、鼠标按下或抬起的事件,这在Cesium的API文档中都能进行找到使用。

相关文章
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
3760 10
|
4月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
1051 0
|
6月前
|
缓存 前端开发 定位技术
Cesium加载Mapbox自定义地图
Cesium加载Mapbox自定义地图
171 0
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
289 1
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
328 0
|
前端开发 数据可视化 定位技术
GIS前端-地图标绘与动画
GIS前端-地图标绘与动画
180 0
|
定位技术 API
Cesium开发:限制地图浏览范围
Cesium开发:限制地图浏览范围
791 1
|
数据可视化 定位技术
svg地图数据可视化鼠标操作事件函数
svg地图数据可视化鼠标操作事件函数
105 0
|
存储 资源调度 JavaScript
2.Vue3中Cesium地图初始化及地图控件配置
本文中,我们主要介绍 Cesium 在 Vue 3运行环境的配置,以及 Cesium 实例中控件的显隐设置,本文是后续文章内容的基础,项目代码在此查看;通过本文,我们可以得到一个纯净的 cesium 项目,后续的操作我们就可以在此基础上进行;
733 0
|
定位技术
街道社区网格化信息管理Echarts集成百度地图bmap样式表冲突导致的无法显示地图的解决方案
街道社区网格化信息管理Echarts集成百度地图bmap样式表冲突导致的无法显示地图的解决方案
143 0