Cesium|xt3d 雷达追踪圆锥体
生活随笔
收集整理的這篇文章主要介紹了
Cesium|xt3d 雷达追踪圆锥体
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Cesium|xt3d 雷達(dá)追蹤圓錐體
- 效果
- 代碼
- 預(yù)覽地址
效果
代碼
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>cesium|xt3d</title><!-- 引入Cesium --><script src="https://unpkg.com/cesium@1.84.0/Build/Cesium/Cesium.js"></script><link rel="stylesheet" href="https://unpkg.com/cesium@1.84.0/Build/Cesium/Widgets/widgets.css"><!-- 引入xt3d --><script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script><style>html,body,#map3d {width: 100%;height: 100%;margin: 0px;padding: 0px;}</style> </head><body><div id="map3d"></div><script>let xt3dInit = {init(el) {this.initViewer(el);this.load3dtiles();//源點坐標(biāo)this.originPoint = [106.45531788088708, 29.50637660924465, 35];this.originPosition = Cesium.Cartesian3.fromDegrees(this.originPoint[0], this.originPoint[1], this.originPoint[2] + 20);this.conicSensor = new xt3d.SpacePlugin.ConicSensor(this.viewer, this.originPosition);this.addRadarModel();this.addTarget();this.setView();},//初始化viewerinitViewer(el) {this.viewer = new Cesium.Viewer(el, {infoBox: false,selectionIndicator: false,navigation: false,animation: false,timeline: false,baseLayerPicker: false,geocoder: false,homeButton: false,sceneModePicker: false,navigationHelpButton: false,shouldAnimate: true,imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}),});this.viewer.scene.globe.depthTestAgainstTerrain = true;},//設(shè)置視角setView() {this.viewer.scene.camera.setView({duration: 1,destination: {x: -2168792.734068365,y: 6881947.030631928,z: 2564864.3138284963},orientation: {heading: 6.2092497690218975,pitch: -0.8489176138360675,roll: 0.0001151687477829455}});},//添加雷達(dá)模型addRadarModel() {var entity = this.viewer.entities.add({name: "leida",position: Cesium.Cartesian3.fromDegrees(this.originPoint[0], this.originPoint[1], this.originPoint[2]),model: {uri: "/data.xt3d.cn/assets/glb/leida.glb",scale: 0.5,maximumScale: 1,silhouetteColor: Cesium.Color.fromAlpha(Cesium.Color.YELLOW, 0.8), //設(shè)置模型外輪廓顏色與透明度silhouetteSize: 1 //設(shè)置模型外輪廓線寬度},});},//添加目標(biāo) ，這里以運行的飛機為例addTarget() {var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));var stop = Cesium.JulianDate.addSeconds(start,360,new Cesium.JulianDate());this.viewer.clock.startTime = start.clone();this.viewer.clock.stopTime = stop.clone();this.viewer.clock.currentTime = start.clone();this.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;this.viewer.clock.multiplier = 10;var position = this.computeCirclularFlight(this.originPoint[0], this.originPoint[1], 5, start);this.targetEntity = this.viewer.entities.add({availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({start: start,stop: stop,}),]),position: position,orientation: new Cesium.VelocityOrientationProperty(position),model: {uri: "/data.xt3d.cn/assets/glb/Cesium_Air.glb",minimumPixelSize: 128,},path: {resolution: 1,material: new Cesium.PolylineGlowMaterialProperty({glowPower: 0.1,color: Cesium.Color.YELLOW,}),width: 10,},});this.targetEntity.position.setInterpolationOptions({interpolationDegree: 2,interpolationAlgorithm: Cesium.HermitePolynomialApproximation,})this.addTickEvent(); //注冊事件 獲取飛機的實時位置},//生成目標(biāo)的運行軌跡computeCirclularFlight(lon, lat, radius, start) {var property = new Cesium.SampledPositionProperty();for (var i = 0; i <= 360; i += 45) {var radians = Cesium.Math.toRadians(i);var time = Cesium.JulianDate.addSeconds(start,i,new Cesium.JulianDate());var position = Cesium.Cartesian3.fromDegrees(lon + radius * 1.5 * Math.cos(radians),lat + radius * Math.sin(radians),300000);property.addSample(time, position);this.viewer.entities.add({position: position,point: {pixelSize: 8,color: Cesium.Color.TRANSPARENT,outlineColor: Cesium.Color.YELLOW,outlineWidth: 3,},});}return property;},//動態(tài)獲取目標(biāo)點位置addTickEvent() {this.viewer.clock.onTick.addEventListener(e => {const targetPosition = this.targetEntity.position.getValue(this.viewer.clock.currentTime);this.conicSensor.updateTargetPosition(targetPosition);}, this);},//加載3dtiles數(shù)據(jù)load3dtiles() {let tileset = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: "http://www.xt3d.cn/data/offset_3dtiles/tileset.json",}));tileset.readyPromise.then(tileset => {xt3d.TilesetPlugin.setTilesetHeight(tileset, 55);}).otherwise(function(error) {console.log(error);});},destroy() {this.viewer.entities.removeAll();this.viewer.imageryLayers.removeAll(true);this.viewer.destroy();}}xt3dInit.init("map3d");</script> </body></html>預(yù)覽地址
xt3d 在線預(yù)覽地址
總結(jié)
以上是生活随笔為你收集整理的Cesium|xt3d 雷达追踪圆锥体的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2017第九届北京空气净化及水净化、北京
- 下一篇： 20组免费的Photoshop渐变效果素