Cesium常用得指令代码(禁止缩放,关闭光源,监听事件等)

最近在做Cesium项目经常会遇到(禁止缩放,关闭光源,关闭阴影等效果)所以决定做个总结。

一、总结

1.Cesium关闭光源于阴影

 // viewer.scene.globe.enableLighting = false; //关闭光照
 // viewer.shadows = false;//关闭阴影

2.禁止缩放

  //viewer.scene.screenSpaceCameraController.enableZoom =false;//禁止缩放

3.解决地形高程遮挡label,entity问题

  viewer.scene.globe.depthTestAgainstTerrain = false;//解决地形遮挡entity问题

4.当前相机高度

var h = viewer.camera.positionCartographic.height;

5.定位到指定坐标flyTo

viewer.camera.flyTo({
      destination: new Cesium.Cartesian3.fromDegrees(mapLocation.lng, mapLocation.lat, mapLocation.height),
      orientation: {
        heading: Cesium.Math.toRadians(mapLocation.heading),
        pitch: Cesium.Math.toRadians(mapLocation.pitch),
        roll: mapLocation.roll
      }
    });

6.鼠标监听事件详细可看详细示例

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);//获取地图对象
 handler.setInputAction(function(event) { //设置监听方法
 var height = viewer.camera.positionCartographic.height;//我这里举个例子点击鼠标左键获取当前高度
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

7.创建entity

var entity = viewer.entities.add({
      id:'wind',
      corridor: { //不规则边框
        positions: Cesium.Cartesian3.fromDegreesArray(stmq),
        width: 2,
        material: Cesium.Color.RED.withAlpha(0.5),
        //height:3000,
        outline: false,
        heightReference:25000,
        // outlineColor: Cesium.Color.width,
        //cornerType: Cesium.CornerType.MITERED
      },
      point: { //圆点
        show: pointShow,
        pixelSize: 35,
        color: new Cesium.CallbackProperty(function color() {
          return Cesium.Color.fromRandom({
            minimumRed: 0.76,
            minimumGreen: 0.78,
            minimumBlue: 0.75,
            alpha: 1.0
          });
        }, false),
        heightReference:25000,
      },
      position: Cesium.Cartesian3.fromDegrees(Number(lonlat[0]),Number(lonlat[1])),
      label: { //文字
        text: text,
        scale: 0.8,
        fillColor: Cesium.Color.YELLOW,
        heightReference: 25000,
        verticalOrigin: Cesium.VerticalOrigin.LEFT,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        //pixelOffset: new Cesium.Cartesian2(10, 20)
      },
      show: true
    });

8.entity的操作

viewer.entities.getById("wind").show = false;   //隐藏
viewer.entities.getById("wind").label.text= "drp";   //修改属性
viewer.entities.removeAll();  //移除所有entity
viewer.entities.remove('wind')//移除指定identity
viewer.zoomTo(rainEntity);   //居中显示

9.点击获取点击点经纬度

var handler= new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (e) {
     var earthPosition  = viewer.camera.pickEllipsoid(e.position,viewer.scene.globe.ellipsoid);
     var cartographic = Cesium.Cartographic.fromCartesian(earthPosition, viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
     var lat=Cesium.Math.toDegrees(cartographic.latitude);//纬度
     var lng=Cesium.Math.toDegrees(cartographic.longitude);//经度
     console.log(lat,lon);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

10.获取中心点

 var result = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, 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;
      console.log(lon,lat)

11.获取相机对象

var camera=viewer.camera;
Cesium.Math.toDegrees(viewer.camera.heading)
Cesium.Math.toDegrees(viewer.camera.pitch)//Cesium.Math.toDegrees作用是把弧度转换成度数
console.log(camera)//相机对像,heading,pitch,height都有都可打印

12.cesium各个坐标系之间转换及区别(这个是别人的我觉得介绍挺好的)

cesium坐标系转换各个坐标的区别(互相转换)

13.cesium中文网址

cesium中文网

13.点击获取鼠标经纬度

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //此方法获取鼠标点击位置经纬度
    handler.setInputAction(function (e) {
      var position = viewer.scene.pickPosition(e.position);
      //将笛卡尔坐标转化为经纬度坐标
      var cartographic = Cesium.Cartographic.fromCartesian(position);
      var longitude = Cesium.Math.toDegrees(cartographic.longitude);
      var latitude = Cesium.Math.toDegrees(cartographic.latitude);
      var height = cartographic.height;
      console.log(longitude,latitude,height)
      viewer.camera.setView({//定位到范围中心点
        destination: Cesium.Cartesian3.fromDegrees(Number(longitude), Number(latitude), 2000),
        orientation: {
          heading: Cesium.Math.toRadians(180),//1
          pitch: Cesium.Math.toRadians(-90),
          roll: 0
        }
      });
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

14.改变背景图片 

 默认时一个黑色的星空图,可以自己修改一个炫酷的背景 。

cesium挂载的元素加一个 background 设置一个图片即可。

Cesium:改变地球背景 -可以参考这个

这个我会持续更新,有什么不对得请大家指出来,谢谢!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

崽崽的谷雨

漫漫前端路,摸爬滚打

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值