admin管理员组

文章数量:1794759

Cesium

Cesium

Cesium|xt3d 雷达追踪圆锥体

  • 效果
  • 代码
  • 预览地址

效果

代码

 <!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="@1.84.0/Build/Cesium/Cesium.js"></script><link rel="stylesheet" href="@1.84.0/Build/Cesium/Widgets/widgets.css"><!--  引入xt3d --><script src=".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();//源点坐标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: ''}),});this.viewer.scene.globe.depthTestAgainstTerrain = true;},//设置视角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}});},//添加雷达模型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), //设置模型外轮廓颜色与透明度silhouetteSize: 1 //设置模型外轮廓线宽度},});},//添加目标 ，这里以运行的飞机为例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(); //注册事件 获取飞机的实时位置},//生成目标的运行轨迹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;},//动态获取目标点位置addTickEvent() {this.viewer.clock.onTick.addEventListener(e => {const targetPosition = this.targetEntity.position.getValue(this.viewer.clock.currentTime);this.conicSensor.updateTargetPosition(targetPosition);}, this);},//加载3dtiles数据load3dtiles() {let tileset = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: ".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>

预览地址

xt3d 在线预览地址

本文标签： cesium

版权声明：本文标题：Cesium 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1692776556a188164.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。