cesium地图放大缩小

2,231 阅读1分钟

通过改变相机的高度,实现视角级别放大缩小

二三维均可使用

/* 获取camera高度  */
    getHeight () {
      if (viewer) {
        let height = viewer.camera.positionCartographic.height
        return height
      }
    },
    /* 获取camera中心点坐标 */
    getCenterPosition () {
      var result = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, window.viewer.canvas
        .clientHeight / 2))
      var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result)
      var lon = curPosition.longitude * 180 / Math.PI
      var lat = curPosition.latitude * 180 / Math.PI
      var height = this.getHeight()
      return {
        lon: lon,
        lat: lat,
        height: height
      }
    },

    /* 地图放大 */
    big () {
      // 镜头拉进
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(this.getCenterPosition().lon, this.getCenterPosition().lat, this.getCenterPosition().height / 1.8),
        duration: 1.0
      })
    },
    /* 地图缩小 */
    small () {
      // 镜头远离
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(this.getCenterPosition().lon, this.getCenterPosition().lat, this.getCenterPosition().height * 1.2),
        duration: 1.0
      })
    },

参考文章:

(4条消息) cesium获取相机状态dangga的博客-CSDN博客cesium 获取相机信息

cesium自定义地球glob放大缩小按钮方法 - 灰信网(软件开发博客聚合) (freesion.com)

(4条消息) Cesium视角监听回调,获取中心点坐标、高度、当前可视区域范围_engineer_he的博客-CSDN博客