效果

代码

<!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://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Cesium.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/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.loadPath();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,skyAtmosphere: false,imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'})});//是否开启抗锯齿this.viewer.scene.fxaa = true;this.viewer.scene.postProcessStages.fxaa.enabled = true;},//飞行线loadPath() {fetch("/data.xt3d.cn/assets/data/flypath.json").then(res => {return res.json();}).then(res => {this.initPath(res);})},initPath(data) {let property = new Cesium.SampledPositionProperty();let start;let stop;for (let i = 0, len = data.length; i < len; i++) {let item = data[i];;let lng = Number(item.x.toFixed(6));let lat = Number(item.y.toFixed(6));let hei = item.z;let time = item.time;let position = null;if (lng && lat) {position = Cesium.Cartesian3.fromDegrees(lng, lat, hei);}let juliaDate = nullif (time) {juliaDate = Cesium.JulianDate.fromIso8601(time);}if (position && juliaDate) {property.addSample(juliaDate, position);}if (i == 0) {start = juliaDate;} else if (i == len - 1) {stop = juliaDate;}this.viewer.entities.add({position: position,point: {pixelSize: 4,color: Cesium.Color.WHITE.withAlpha(0.8)}})}//设置时钟属性this.viewer.clock.startTime = start.clone();this.viewer.clock.stopTime = stop.clone();this.viewer.clock.currentTime = start.clone();this.viewer.clock.shouldAnimate = true;this.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;this.viewer.clock.multiplier = 5;if (this.viewer.timeline) {this.viewer.timeline.zoomTo(start, stop);}//创建path对象let flyPath = new xt3d.PolylineObject.FlyPath(this.viewer, {position: property,orientation: new Cesium.VelocityOrientationProperty(property),model: {uri: "/data.xt3d.cn/assets/glb/wrj.glb",colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT,color: Cesium.Color.WHITE,scale: 0.1,minimumPixelSize: 50,},label: {text: '侦查无人机',color: Cesium.Color.AZURE,outline: true,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,pixelOffset: new Cesium.Cartesian2(10, -25),scaleByDistance: new Cesium.NearFarScalar(500, 1, 1500, 0.4),},});let flyCylinder = new xt3d.PolylineObject.FlyCylinder(this.viewer, property);//flyPath.remove();//flyCylinder.remove();},setView() {let flyToOpts = {destination: {x: -2475375.9177402095,y: 4780087.592872154,z: 3412984.727142855},orientation: {heading: 4.660867971042048,pitch: -0.6998819723213083,roll: 6.279214287424039},duration: 1};this.viewer.scene.camera.flyTo(flyToOpts);},destroy() {this.viewer.entities.removeAll();this.viewer.imageryLayers.removeAll(true);this.viewer.destroy();}}xt3dInit.init("map3d");</script>
</body></html>

预览地址

xt3d 在线预览地址

Cesium|xt3d动态轨迹线相关推荐

Cesium 动态轨迹线 ES6版本
直接上代码图片: 自行旋转图片为横的代码: import * as Cesium from 'cesium/Cesium' class PolylineTrailMaterial {constru ...
Cesium实现动态绘制轨迹线
需求就是一个飞机动画,飞机飞到哪里,轨迹线就画到哪里. 我的轨迹线非常长,从我国出发一直到欧洲那边,光是经过的点就有7000多个. 刚开始的时候想要使用的是entity的画线方法进行轨迹线的绘制,如果 ...
VUE+Cesium 初始化地球，加载三维模型（.glb），绘制轨迹线，homebutton 按键重写（默认定位位置的设置）
Cesium是什么我们打开Cesium官网,能够很清晰的看到官方赋予Cesium的使命,即构建世界一流的3D地理空间应用程序.那Cesium到底是个什么东东呢? Cesium是一个跨平台.跨浏览器的 ...
基于 React hooks + Typescript + Cesium 实现泛光尾迹线
文章目录效果截图功能介绍实现思路实现步骤封装 PolylineTrailMaterialProperty 材质使用尾迹线材质效果截图先上截图: 功能介绍基于 React hooks ...
Cesium|xt3d 雷达追踪圆锥体
Cesium|xt3d 雷达追踪圆锥体效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><he ...
Windows HTML本地快速渲染轨迹线
有时候需要排查原始数据是否有问题,最直接的就是可视化看效果. Windows渲染有多种方法,可以用mapbox.echarts.也可以用minedata等: echarts渲染轨迹线 minedata ...
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动态轨迹线

效果

代码

预览地址

Cesium|xt3d动态轨迹线相关推荐

最新文章

热门文章