效果

代码

 <!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"><!-- 使用vue绑定控件 --><script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script><link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css"><script src="https://unpkg.com/element-ui@2.15.5/lib/index.js"></script><!--  引入xt3d --><script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script><style>html,body,#map3d {width: 100%;height: 100%;margin: 0px;padding: 0px;}.form-container {position: absolute;left: 10px;top: 90px;padding: 10px 15px;border-radius: 4px;border: 1px solid rgba(128, 128, 128, 0.5);color: #ffffff;background: rgba(0, 0, 0, 0.4);box-shadow: 0 3px 14px rgb(128 128 128 / 50%);width: 380px;}.el-form-item__label {color: white;}</style>
</head><body><div id="map3d"></div><div class="form-container" id="formContainer"><el-form ref="form" :model="form" label-width="140px" label-position="left" size="mini"><el-form-item label="方向(heading)"><el-slider v-model="form.heading" :show-tooltip="true" @input="valueChange" :min="0" :max="360"></el-slider></el-form-item><el-form-item label="前后摇摆(pitch)"><el-slider v-model="form.pitch" :show-tooltip="true" @input="valueChange" :min="-180" :max="180"></el-slider></el-form-item><el-form-item label="左右摇摆(roll)"><el-slider v-model="form.roll" :show-tooltip="true" @input="valueChange" :min="-180" :max="180"></el-slider></el-form-item><el-form-item label="上下夹角"><el-slider v-model="form.xHalfAngle" :show-tooltip="true" @input="valueChange" :min="5" :max="90"></el-slider></el-form-item><el-form-item label="左右夹角"><el-slider v-model="form.yHalfAngle" :show-tooltip="true" @input="valueChange" :min="5" :max="90"></el-slider></el-form-item><el-form-item label="半径"><el-slider v-model="form.radius" :show-tooltip="true" :step="20" @change="valueChange" :min="10" :max="999999"></el-slider></el-form-item><el-form-item label="是否显示扫描面"><el-checkbox v-model="form.showScanPlane" @change="valueChange" label="是否显示扫描面"></el-checkbox></el-form-item></el-form></div><script>let xt3dInit = {init(el) {this.initViewer(el);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;//是否开启抗锯齿this.viewer.scene.fxaa = true;this.viewer.scene.postProcessStages.fxaa.enabled = true;},//设置视角setView() {this.viewer.scene.camera.setView({duration: 1,destination: {x: -2731267.022494332,y: 5340975.843986733,z: 3317156.0313174888},orientation: {heading: 0.07543833428255908,pitch: -0.9282161474525612,roll: 6.283068833304156}});},destroy() {this.viewer.entities.removeAll();this.viewer.imageryLayers.removeAll(true);this.viewer.destroy();}}xt3dInit.init("map3d");//添加 xt3d对象let position = Cesium.Cartesian3.fromDegrees(117.218875, 31.817812, 138);let rSensor = new xt3d.SpacePlugin.RectangularSensor(xt3dInit.viewer, position, {heading: 0,pitch: 0,roll: 0,radius: 100000, //传感器的半径xHalfAngle: 50, //传感器水平半角yHalfAngle: 50, //传感器垂直半角 // color: Cesium.Color.RED.withAlpha(0.3),lineColor: new Cesium.Color(1.0, 1.0, 1.0, 1.0), //线的颜色 slice: 20,showScanPlane: true, //是否显示扫描面  showLateralSurfaces: true,showDomeSurfaces: true,scanPlaneMode: "vertical", //horizontal});//界面控制let vm = new Vue({el: "#formContainer",data() {return {form: {radius: 0}}},methods: {//绑定的值改变valueChange() {rSensor.updateStyle(this.form);}}})//将参数绑定到界面上vm.form = rSensor.getStyle();</script>
</body></html>

预览地址

xt3d 在线预览地址

Cesium|xt3d相控阵雷达范围相关推荐

Cesium|xt3d 雷达追踪圆锥体
Cesium|xt3d 雷达追踪圆锥体效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><he ...
Cesium|xt3d卫星正摄动画
Cesium|xt3d卫星正摄动画效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
Cesium|xt3d视频融合
Cesium|xt3d视频融合效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head&g ...
Cesium|xt3d模型展开动画
Cesium|xt3d模型展开动画效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
cesium|xt3d
Cesium|xt3d 效果代码效果代码 import "./ScanlineMaterial" //引入自定义材质//扫描线类 export default class S ...
Cesium|xt3d加载中国地形
Cesium|xt3d加载中国地形效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
Cesium|xt3d 场景工具、测量工具
Cesium|xt3d 场景工具.测量工具效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN">< ...
Cesium|xt3d竖立文本
Cesium|xt3d竖立文本效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head&g ...
Cesium|xt3d旋转椎体
Cesium|xt3d旋转椎体效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head&g ...

Cesium|xt3d相控阵雷达范围

Cesium|xt3d相控阵雷达范围

效果

代码

预览地址

Cesium|xt3d相控阵雷达范围相关推荐

最新文章

热门文章