cesium监听地图缩放

1.camera.changed

  viewer.value.camera.changed.addEventListener(() => {
      // 内容
  })

优缺点:

优点:响应式,只有相机视野变化才触发
缺点:响应不灵敏,相机视野变化达到一定的幅度后才会触发一次

2.clock.onTick

  viewer.value.clock.onTick.addEventListener(() => {
     // 内容
  })

优缺点:

优点:响应灵敏,每个时钟都会执行,地图缩放变化能及时捕捉到
缺点:轮循式,无论地图缩放是否有变化都会执行,可自己判断是否有变化,以决定执行业务代码

3.ScreenSpaceEventHandler.setInputAction

handler.value.setInputAction((wheelment) => {
    // 内容
  }, Cesium.ScreenSpaceEventType.WHEEL)

优缺点:

优点:响应式且响应灵敏
缺点:只能监听鼠标滚轮变化触发的地图缩放,如果是界面上按钮触发或直接代码触发等无法监听

欢迎补充,一起进步。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是cesium模型随地图缩放的代码实现: ```javascript // 获取当前场景 var scene = viewer.scene; // 获取当前相机 var camera = viewer.camera; // 获取当前地图中心点 var center = camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2)); // 监听地图缩放事件 viewer.scene.postRender.addEventListener(function() { // 获取当前地图中心点 var newCenter = camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2)); if (newCenter) { // 计算缩放比例 var height = scene.globe.getHeight(newCenter); var distance = Cesium.Cartesian3.distance(camera.position, newCenter); var pixelSize = scene.globe.ellipsoid.cartesianToCartographic(newCenter).height / viewer.canvas.clientHeight; var scale = distance / pixelSize / height; // 计算缩放中心点 var centerScratch = new Cesium.Cartesian3(); var centerRay = camera.getPickRay(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2)); var centerPosition = scene.globe.pick(centerRay, scene); if (centerPosition) { Cesium.Cartesian3.fromRadians(centerPosition.longitude, centerPosition.latitude, height, scene.globe.ellipsoid, centerScratch); } // 设置缩放中心点和缩放比例 camera.lookAt(centerScratch, new Cesium.HeadingPitchRange(camera.heading, camera.pitch, scale)); } }); ``` 以上代码实现了监听地图缩放事件,获取当前地图中心点,计算缩放比例,计算缩放中心点,设置缩放中心点和缩放比例的功能,从而实现了cesium模型随地图缩放的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值