首页 > 其他分享 >Cesium 事件监听

Cesium 事件监听

时间:2024-03-01 17:25:07浏览次数:19  
标签:false 鼠标 viewer scene let 事件 Cesium 监听

viewer = window.map = new Cesium.Viewer('mapView', {
    animation: false, //是否创建动画小器件,左下角仪表
    baseLayerPicker: false, //是否显示图层选择器
    fullscreenButton: false, //是否显示全屏按钮
    geocoder: false, //是否显示geocoder小器件,右上角查询按钮
    homeButton: false, //是否显示Home按钮
    infoBox: false, //是否显示信息框
    sceneModePicker: false, //是否显示3D/2D选择器
    scene3DOnly: false, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, //是否显示时间轴
    navigationHelpButton: false, //是否显示右上角的帮助按钮
    baselLayerPicker: false, // 将图层选择的控件关掉,才能添加其他影像数据
    shadows: true //是否显示背影
  })
  //去除版权信息
  viewer._cesiumWidget._creditContainer.style.display = 'none'
  // 将原来鼠标中键倾斜视图修改为鼠标右键触发
  viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
  // 将原来鼠标右键放大缩放修改为鼠标滚轮滚动
  viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.WHEEL]

  // 地球初次加载完成调用
  let helper = new Cesium.EventHelper()
  const RemoveCallback = helper.add(viewer.scene.globe.tileLoadProgressEvent, (e) => {
    if (e == 0) {
      console.log('onload')
      // 删除事件监听
      RemoveCallback()
    }
  })

  // 监听点击事件
  viewer.screenSpaceEventHandler.setInputAction((e) => {
    // 获取点击位置的笛卡尔坐标
    let cartesian = viewer.camera.pickEllipsoid(e.position, viewer.scene.globe.ellipsoid)
    if (cartesian) {
      // 将笛卡尔坐标转换为地理坐标
      let cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian)
      let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2)
      let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2)
      console.log('点击位置经度:' + longitudeString + ',纬度:' + latitudeString)
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

  // 监听鼠标移动事件
  viewer.scene.canvas.addEventListener('mousemove', (e) => {
    // 获取鼠标位置的屏幕坐标
    let screenPosition = new Cesium.Cartesian2(e.clientX, e.clientY)
    // 获取鼠标位置的地理坐标
    let ray = viewer.camera.getPickRay(screenPosition)
    let globePosition = viewer.scene.globe.pick(ray, viewer.scene)
    if (globePosition) {
      let cartographic = Cesium.Cartographic.fromCartesian(globePosition)
      let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
      let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
      console.log('鼠标位置经度:' + longitudeString + ',纬度:' + latitudeString);
    }
  })

  // 监听摄像机属性的变化
  viewer.camera.changed.addEventListener(() => {
    // 获取当前地图的缩放级别(zoom 层级)
    let height = viewer.camera.positionCartographic.height
    console.log('视图中心位置的高度:', height );
  })

  // 监听摄像机停止移动后触发
  viewer.camera.moveEnd.addEventListener(() => {
    // 获取相机的位置的经纬度坐标
    let centerCartographic = viewer.camera.positionCartographic
    // 获取经纬度坐标
    let centerLongitude = Cesium.Math.toDegrees(centerCartographic.longitude)
    let centerLatitude = Cesium.Math.toDegrees(centerCartographic.latitude)
    let centerHeight = centerCartographic.height
    console.log('视图中心位置的经度:', centerLongitude);
    console.log('视图中心位置的纬度:', centerLatitude);
    console.log('视图中心位置的高度:', centerHeight);
  })

https://blog.csdn.net/u010358183/article/details/121610901

标签:false,鼠标,viewer,scene,let,事件,Cesium,监听
From: https://www.cnblogs.com/echohye/p/18047526

相关文章

  • 学习unigui【22】unistringGrid的标题栏双击事件
    第一步:在TuniStringGrid的ClientEvents.ExtEvents中定义Ext.grid.Panel的reconfigure事件:functionreconfigure(sender,store,columns,oldStore,oldColumns,eOpts){columns.forEach(function(col){if(col.titleEl){col.titleEl.on('dblcli......
  • C# 监听usb插拔
    privatestaticManagementEventWatcherinsertWatcher;privatestaticManagementEventWatcherremoveWatcher;staticvoidMain(string[]args){insertWatcher=newManagementEventWatcher();WqlEventQueryinsertQuery=newWqlEventQuery("SELECT*FROM__I......
  • 在K8S中,如何查看pod状态的详情? 事件显示cpu不足如何处理?
    在Kubernetes(K8s)中,查看Pod状态的详情通常涉及使用kubectl命令行工具,这是Kubernetes提供的一个强大的管理工具。以下是如何查看Pod状态详情的步骤:1.查看Pod状态详情列出所有Pod:使用kubectlgetpods命令可以查看集群中所有Pod的概览信息,包括名称、状态、IP地址等。查看特定Pod......
  • 14.分布式事件总线MassTransit的简单使用
    简介:    MassTransit,直译公共交通,是由ChrisPatterson开发的基于消息驱动的.NET分布式应用框架,其核心思想是借助消息来实现服务之间的松耦合异步通信,进而确保应用更高的可用性、可靠性和可扩展性。通过对消息模型的高度抽象,以及对主流的消息代理(包括RabbitMQ、Active......
  • JavaScript事件
    键盘事件:keypress键盘事件,keyup抬起,keydown按下文档:load加载表单:focus获得焦点,blur失去焦点,submit提交事件,change改变事件其他:scroll滚动事件,selectstart选择事件1.event事件对象常见的属性和方法e.target返回触发事件的对象标准e.srcElement返回触发事件的对象......
  • MutationObserver监听DOM结构变化
    前面有IntersectionObserver观察器实现页面懒加载的功能,原理就是观察dom是否进入视口。那么如果不管是否可见或者要实现随时监听,则需要使用MutationObserver。示例代码:1filterObserve:function(_id){2if($("#"+_id+"formt-form-item").length<5)returnnull......
  • Vue CLI 系列之(十二)全局事件总线
    全局事件总线【GlobalEventBus】......
  • Vue CLI 系列之(十一)组件自定义事件
    组件自定义事件区别于js内置事件,内置事件是给html元素用的,而自定义事件是给组件用的1.给组件实例对象绑定自定义事件给组件绑定自定义事件v-on:自定义事件名="回调函数"比如:<Studentv-on:atguigu="demo"/>上面代码的含义为:由于v-on是在Student这个组件标签上,所以是给stu......
  • 【Cesium杂谈】Cesium的tilingScheme和天地图服务
    Cesium的tilingSchemeCesium的tilingSchme决定了瓦片的组织方式。内部实现了两种tilingScheme方式:GeographicTilingScheme和WebMercatorTilingScheme。tilingScheme类有以下一些成员变量ellipsoid:椭球体,这个都是WGS84projection:使用的投影方式,GeographicTilingScheme对应的是......
  • 前端学习-vue学习003-事件监听
    教程链接使用v-on指令监听DOM事件<buttonv-on:click="increment">{{count}}</button>简写语法<button@click="increment">{{count}}</button><scriptsetup>import{ref}from'vue'constcount=ref(0)......