CesiumJS 笔记 - CesiumJS 相机瞬间跳转、lookAt 方法、Point 高度无效、椭圆与图片图层、椭圆调整
CesiumJS
- CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）
CesiumJS 官网：
https://www.cesium.com/CesiumJS 下载地址：
https://www.cesium.com/platform/cesiumjs/CesiumJS API 文档：
https://cesium.com/learn/cesiumjs/ref-doc/index.html
一、CesiumJS 相机瞬间跳转
- 使用 setView 方法
viewer.camera.setView({destination:Cesium.Cartesian3.fromDegrees(0,0,1000000.0),});- 使用 flyTo 方法，设置 duration 为 0.0
viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(0,0,1000000.0),duration:0.0,});- 注：使用 flyTo 方法，如果不设置 duration，会有默认 duration
// 这样写还是有飞行动画viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(0,0,1000000.0)});二、lookAt 方法
1、基本介绍
viewer.camera.lookAt(target,offset)- lookAt 方法是让相机看向某个目标点，用户无法通过鼠标自由移动视角，只能缩放或围绕目标旋转
| 参数 | 说明 |
|---|---|
| target | 要观察的目标点（世界坐标） |
| offset | 相机相对于目标点的偏移量（笛卡尔坐标） |
- 使用 lookAtTransform 方法，传入单位矩阵可以解除视角锁定
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);2、演示
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Camera - 看向某个目标点（lookAt）</title><linkrel="stylesheet"href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css"/><style>*{margin:0;padding:0;box-sizing:border-box;}html, body{width:100%;height:100%;}.container{width:100%;height:100%;}.btn-release{position:fixed;left:0px;top:0px;}</style></head><body><divid="container"></div><buttonclass="btn-release">解除视角锁定</button></body><scriptsrc="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>constviewer=newCesium.Viewer("container");// // 从正上方俯看天安门// viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(116.3974, 39.9086, 0), new Cesium.Cartesian3(0, 0, 5000));// 从天安门的东南上方看天安门viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(116.3974,39.9086,0),newCesium.Cartesian3(500,-500,500));constbtnRelease=document.querySelector(".btn-release");btnRelease.addEventListener("click",()=>{viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);});</script></html>三、Point 高度无效
- 这里后渲染的能盖住先渲染的
// 先渲染的constentity=viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(116.39,39.91,400),point:{pixelSize:100,color:Cesium.Color.GREEN,},});// 后渲染的constentity2=viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(116.39,39.91005,200),point:{pixelSize:100,color:Cesium.Color.BLUE,},});viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(116.39,39.91,1000),duration:2.0,});Point 使用 pixelSize 定义大小，它始终以固定像素显示在屏幕上
它不参与深度测试，即使一个点在地理上位于另一个点后面，也不会被遮挡
渲染顺序由添加到场景的先后顺序决定
四、椭圆与图片图层
- 椭圆始终会位于图片图层之上
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Entity ellipse - 椭圆与图片图层</title><linkrel="stylesheet"href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css"/><style>*{margin:0;padding:0;box-sizing:border-box;}html, body{width:100%;height:100%;}.container{width:100%;height:100%;}.show-ellipse{position:fixed;top:50px;left:50px;z-index:1000;}</style></head><body><divid="container"><buttonclass="show-ellipse">显示椭圆</button></div></body><scriptsrc="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>constviewer=newCesium.Viewer("container");letshowEllipseFlag=false;constentity=viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(2,2),ellipse:{semiMajorAxis:50000,// 长轴（米）semiMinorAxis:25000,// 短轴（米）material:Cesium.Color.BLUE.withAlpha(0.5),// 颜色show:showEllipseFlag,},});constwest=0;// 西经（西经为负）constsouth=0;// 南纬（南纬为负）consteast=4;// 东经（东经为正）constnorth=4;// 北纬（北纬为正）// 创建图片图层constimageryProvider=newCesium.SingleTileImageryProvider({url:"../img/test.jpg",rectangle:Cesium.Rectangle.fromDegrees(west,south,east,north),});constimageryLayer=viewer.imageryLayers.addImageryProvider(imageryProvider);viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(0,0,10000.0),duration:2.0,});document.querySelector(".show-ellipse").addEventListener("click",()=>{showEllipseFlag=!showEllipseFlag;entity.ellipse.show=showEllipseFlag;});</script></html>五、椭圆调整
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Entity ellipse - 椭圆调整</title><linkrel="stylesheet"href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css"/><style>*{margin:0;padding:0;box-sizing:border-box;}html, body{width:100%;height:100%;}.container{width:100%;height:100%;}.ellipse-change{position:fixed;top:50px;left:50px;z-index:1000;}</style></head><body><divid="container"><buttonclass="ellipse-change">椭圆调整</button></div></body><scriptsrc="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>constviewer=newCesium.Viewer("container");constentities=[];constentity1=viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(0,0),ellipse:{semiMajorAxis:50000,// 长轴（米）semiMinorAxis:25000,// 短轴（米）material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity2=viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(1,1),ellipse:{semiMajorAxis:50000,// 长轴（米）semiMinorAxis:25000,// 短轴（米）material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity3=viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(2,2),ellipse:{semiMajorAxis:50000,// 长轴（米）semiMinorAxis:25000,// 短轴（米）material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity4=viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(3,3),ellipse:{semiMajorAxis:50000,// 长轴（米）semiMinorAxis:25000,// 短轴（米）material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity5=viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(4,4),ellipse:{semiMajorAxis:50000,// 长轴（米）semiMinorAxis:25000,// 短轴（米）material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});entities.push(entity1,entity2,entity3,entity4,entity5);viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(0,0,10000.0),duration:2.0,});document.querySelector(".ellipse-change").addEventListener("click",()=>{entities.forEach((entity)=>{entity.ellipse.semiMajorAxis=50000*2;entity.ellipse.semiMinorAxis=25000*2;});});</script></html>