cesium默认底图不显示,去除logo,设置相机视觉位置,查看位置,帧率显示,获取当前屏幕中心点坐标,抓取当前经纬度坐标并加点

1,083 阅读1分钟

cesium默认底图不显示

 // 不显示底图
 viewer.imageryLayers.get(0).show = false;

image.png

去除cesiumlogo

      // 去除logo
      viewer.cesiumWidget.creditContainer.style.display = "none";
     //viewer._cesiumWidget._creditContainer.style.display = "none";  // 隐藏cesium ion

image.png

cesium设置相机视觉位置

cesium原始的初始视角和相机位置是固定的,但在实际应用的时候,需要将相机设置到自己研究区域的合适位置上,需要先在浏览器中将cesium视角调至合适位置,再在控制台中查看当前相机的信息,使用代码设置即可。

查看位置

在浏览器中按F12,在控制台中依次输入查看代码,即可查看位置。

// 输入代码为:
viewer.camera.position
viewer.camera.heading
viewer.camera.pitch
viewer.camera.roll

帧率显示

 // 显示帧率
 viewer.scene.debugShowFramesPerSecond = true;

image.png

获取当前屏幕中心点坐标

调用传入viewer
// 获取地图中心点
      this.getCenterPosition(viewer)
// 获取当前地图中心的经纬度
    getCenterPosition(viewer) {
      let centerResult = viewer.camera.pickEllipsoid(
        new Cesium.Cartesian2(
          viewer.canvas.clientWidth / 2,
          viewer.canvas.clientHeight / 2,
        ),
      )
      let curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(centerResult);
      let curLongitude = (curPosition.longitude * 180) / Math.PI;
      let curLatitude = (curPosition.latitude * 180) / Math.PI;
      console.log(370, curLongitude, curLatitude);
      return {
        lon: curLongitude,
        lat: curLatitude,
      }
    },

抓取当前经纬度坐标并加点

// 调用 抓取当前经纬度坐标
      this.getClickPointAdd(viewer);
      //======================================
       // 抓取当前经纬度坐标
    /**
     * @description: 获取当前鼠标点击位置坐标,并添加到图上显示
     * @param {*} _viewer
     * @return {*}
     */
    getClickPointAdd(_viewer) {
      // 注册屏幕点击事件
      let handler = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
      handler.setInputAction(function (event) {
        // 转换为不包含地形的笛卡尔坐标
        let clickPosition = _viewer.scene.camera.pickEllipsoid(event.position);
        // 转经纬度(弧度)坐标
        let radiansPos = Cesium.Cartographic.fromCartesian(clickPosition);
        // 转角度
        console.log("经度:" + Cesium.Math.toDegrees(radiansPos.longitude) + ", 纬度:" + Cesium.Math.toDegrees(radiansPos.latitude));
​
        // 添加点
        _viewer.entities.add({
          position: clickPosition,
          point: {
            color: Cesium.Color.YELLOW,
            pixelSize: 30
          }
        })
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }

image.png

cesium实现三维空间量测功能

地址教程:blog.csdn.net/weixin_4578…

cesium实现鹰眼地图(三维)效果

地址教程:blog.csdn.net/weixin_4578…

cesium实现鹰眼地图(三维)与主图联动效果

地址教程:blog.csdn.net/weixin_4578…

cesium实现鹰眼地图(二维)

地址教程:blog.csdn.net/weixin_4578…

image.png