CesiumJSCesiumJS 是一个开源的 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.0viewer.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、演示!doctypehtmlhtmllangenheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleCamera - 看向某个目标点lookAt/titlelinkrelstylesheethref../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/headbodydividcontainer/divbuttonclassbtn-release解除视角锁定/button/bodyscriptsrc../js/Cesium-1.112/Build/Cesium/Cesium.js/scriptscriptconstviewernewCesium.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));constbtnReleasedocument.querySelector(.btn-release);btnRelease.addEventListener(click,(){viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);});/script/html三、Point 高度无效这里后渲染的能盖住先渲染的// 先渲染的constentityviewer.entities.add({position:Cesium.Cartesian3.fromDegrees(116.39,39.91,400),point:{pixelSize:100,color:Cesium.Color.GREEN,},});// 后渲染的constentity2viewer.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 定义大小它始终以固定像素显示在屏幕上它不参与深度测试即使一个点在地理上位于另一个点后面也不会被遮挡渲染顺序由添加到场景的先后顺序决定四、椭圆与图片图层椭圆始终会位于图片图层之上!doctypehtmlhtmllangenheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleEntity ellipse - 椭圆与图片图层/titlelinkrelstylesheethref../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/headbodydividcontainerbuttonclassshow-ellipse显示椭圆/button/div/bodyscriptsrc../js/Cesium-1.112/Build/Cesium/Cesium.js/scriptscriptconstviewernewCesium.Viewer(container);letshowEllipseFlagfalse;constentityviewer.entities.add({position:Cesium.Cartesian3.fromDegrees(2,2),ellipse:{semiMajorAxis:50000,// 长轴米semiMinorAxis:25000,// 短轴米material:Cesium.Color.BLUE.withAlpha(0.5),// 颜色show:showEllipseFlag,},});constwest0;// 西经西经为负constsouth0;// 南纬南纬为负consteast4;// 东经东经为正constnorth4;// 北纬北纬为正// 创建图片图层constimageryProvidernewCesium.SingleTileImageryProvider({url:../img/test.jpg,rectangle:Cesium.Rectangle.fromDegrees(west,south,east,north),});constimageryLayerviewer.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.showshowEllipseFlag;});/script/html五、椭圆调整!doctypehtmlhtmllangenheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleEntity ellipse - 椭圆调整/titlelinkrelstylesheethref../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/headbodydividcontainerbuttonclassellipse-change椭圆调整/button/div/bodyscriptsrc../js/Cesium-1.112/Build/Cesium/Cesium.js/scriptscriptconstviewernewCesium.Viewer(container);constentities[];constentity1viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(0,0),ellipse:{semiMajorAxis:50000,// 长轴米semiMinorAxis:25000,// 短轴米material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity2viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(1,1),ellipse:{semiMajorAxis:50000,// 长轴米semiMinorAxis:25000,// 短轴米material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity3viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(2,2),ellipse:{semiMajorAxis:50000,// 长轴米semiMinorAxis:25000,// 短轴米material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity4viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(3,3),ellipse:{semiMajorAxis:50000,// 长轴米semiMinorAxis:25000,// 短轴米material:Cesium.Color.BLUE.withAlpha(0.25),// 颜色},});constentity5viewer.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.semiMajorAxis50000*2;entity.ellipse.semiMinorAxis25000*2;});});/script/html