1. 效果演示
![飞行效果](https://i-blog.csdnimg.cn/blog_migrate/04fb5235b3e184c27bbddbf95a728904.png)
2.飞行轨迹czml文件数据 数据来自 哔哩哔哩up ‘老陈打码’
[
{
"id": "document",
"name": "SampleFlight",
"version": "1.0",
"clock": {
"interval": "20170711T16Z/20170711T1620Z",
"currentTime": "20170711T16Z",
"multiplier": 2,
"range": "LOOP_STOP",
"step": "SYSTEM_CLOCK_MULTIPLIER"
}
},
{
"id": "Aircraft/Aircraft1",
"name": "Aircraft1",
"availability": "20170711T16Z/20170711T162001.65996549888041Z",
"billboard": {
"color": {
"rgba": [
0,
255,
255,
255
]
},
"eyeOffset": {
"cartesian": [
0,
0,
0
]
},
"horizontalOrigin": "CENTER",
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAjSURBVChTYyAa/EcDUGEIgIphAKg0XRSAAFQMDqDChAADAwDC13+BJ+0oDwAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
"pixelOffset": {
"cartesian2": [
0,
0
]
},
"scale": 1,
"show": true,
"verticalOrigin": "CENTER"
},
"path": {
"show": [
{
"interval": "20170711T16Z/20170711T162001.65996549900046Z",
"boolean": true
}
],
"width": 1,
"material": {
"solidColor": {
"color": {
"rgba": [
0,
255,
255,
255
]
}
}
},
"resolution": 1200
},
"position": {
"interpolationAlgorithm": "LAGRANGE",
"interpolationDegree": 1,
"epoch": "20170711T16Z",
"cartesian": [
0,
1334148.2169703,
-4654069.88053539,
4138607.58771276,
91.86139701440516,
1335484.54584316,
-4653037.9376884,
4139331.98105418,
93.60663214893611,
1335509.53110048,
-4653018.09267666,
4139346.13232191,
95.3518666688924,
1335533.68948835,
-4652997.79399382,
4139361.054846,
97.09710055725736,
1335556.9915735,
-4652977.06637069,
4139376.73044565,
98.84233379994839,
1335579.4089659,
-4652955.93506065,
4139393.14002251,
100.58756638604427,
1335600.91435342,
-4652934.42580893,
4139410.26358403,
102.33279830799074,
1335621.48153503,
-4652912.5648212,
4139428.08026776,
104.07802956102933,
1335641.08545279,
-4652890.37873169,
4139446.56836678,
105.82326014431783,
1335659.70222232,
-4652867.8945707,
4139465.70535617,
107.56849005969525,
1335677.30916195,
-4652845.13973169,
4139485.46792042,
109.31371931234753,
1335693.88482034,
-4652822.14193792,
4139505.83198188,
111.05894791114406,
1335709.40900257,
-4652798.9292086,
4139526.77273004,
112.80417586771182,
1335723.86279481,
-4652775.52982487,
4139548.26465179,
114.54940319672824,
1335737.22858734,
-4652751.97229524,
4139570.28156253,
116.29462991641412,
1335749.49009599,
-4652728.2853209,
4139592.796638,
118.03985604742957,
1335760.63238199,
-4652704.49776076,
4139615.78244704,
119.78508161359969,
1335770.64187018,
-4652680.63859629,
4139639.21098494,
121.53030664152175,
1335779.50636551,
-4652656.73689616,
4139663.05370763,
123.27553115996125,
1335787.21506798,
-4652632.82178092,
4139687.28156639,
125.02075520111794,
1335793.75858569,
-4652608.92238742,
4139711.86504329,
126.76597879858491,
1335799.12894639,
-4652585.06783337,
4139736.77418713,
128.5112019882581,
1335803.3196071,
-4652561.28718186,
4139761.97864994,
130.25642480871102,
1335806.32546215,
-4652537.60940593,
4139787.44772395,
132.00164729948665,
1335808.14284935,
-4652514.0633533,
4139813.15037899,
133.746869502158,
1335808.76955452,
-4652490.67771119,
4139839.05530032,
135.49209145963323,
1335808.20481409,
-4652467.4809714,
4139865.13092678,
137.23731321593914,
1335806.44931611,
-4652444.50139558,
4139891.34548922,
138.98253481613938,
1335803.5051994,
-4652421.76698078,
4139917.66704922,
140.7277563061889,
1335799.37605089,
-4652399.3054254,
4139944.06353802,
142.4729777321918,
1335794.06690132,
-4652377.14409537,
4139970.50279554,
144.21819914111074,
1335787.58421908,
-4652355.30999087,
4139996.95260963,
145.22293343280762,
1335783.32298762,
-4652342.89918393,
4140012.1716459,
212.66752307694514,
1335484.32291699,
-4651513.76084887,
4141033.28753812,
214.41274449847333,
1335477.16655719,
-4651492.12168627,
4141059.72386,
216.15796590960963,
1335471.17927914,
-4651470.13966118,
4141086.1679337,
217.9031873570366,
1335466.36837741,
-4651447.84155533,
4141112.58754121,
219.64840888731123,
1335462.73971337,
-4651425.2545355,
4141138.95049428,
221.3936305465577,
1335460.29770796,
-4651402.40612053,
4141165.22467373,
223.13885238045987,
1335459.04533642,
-4651379.32414768,
4141191.37806853,
224.88407443361575,
1335458.98412455,
-4651356.03673881,
4141217.37881478,
226.6292967495683,
1335460.11414695,
-4651332.57226604,
4141243.1952346,
228.3745193707473,
1335462.43402685,
-4651308.95931723,
4141268.79587466,
230.1197423380636,
1335465.94093785,
-4651285.22666113,
4141294.14954454,
231.8649656905509,
1335470.63060731,
-4651261.40321237,
4141319.2253547,
233.61018946567492,
1335476.49732161,
-4651237.51799614,
4141343.99275415,
235.35541369857856,
1335483.53393305,
-4651213.60011293,
4141368.42156763,
237.1006384222619,
1335491.73186862,
-4651189.67870303,
4141392.48203242,
238.84586366726944,
1335501.08114041,
-4651165.782911,
4141416.14483457,
240.5910894618828,
1335511.57035776,
-4651141.94185021,
4141439.38114461,
242.33631583129136,
1335523.18674118,
-4651118.18456736,
4141462.1626527,
244.08154279826886,
1335535.91613792,
-4651094.54000705,
4141484.46160309,
245.8267703824531,
1335549.74303916,
-4651071.03697656,
4141506.25082799,
247.57199860042965,
1335564.65059897,
-4651047.70411076,
4141527.50378058,
249.3172274657809,
1335580.62065477,
-4651024.56983716,
4141548.19456745,
249.7763503365677,
1335584.99585272,
-4651018.52065041,
4141553.54093112,
385.4955428010253,
1336888.82626293,
-4649232.30192454,
4143127.52430988,
387.24077184289854,
1336905.06951502,
-4649209.21363035,
4143148.05315285,
388.986000233479,
1336920.25518905,
-4649185.91903814,
4143169.15062284,
390.73122798567965,
1336934.36478359,
-4649162.44652875,
4143190.79101579,
392.4764551150838,
1336947.38110827,
-4649138.82469979,
4143212.94796619,
394.221681640729,
1336959.2883047,
-4649115.08233082,
4143235.5944792,
395.9669075842885,
1336970.07186579,
-4649091.24834821,
4143258.70296349,
397.7121329706388,
1336979.71865341,
-4649067.35178998,
4143282.24526492,
399.4573578268719,
1336988.21691443,
-4649043.4217704,
4143306.19270079,
401.2025821831012,
1336995.55629503,
-4649019.48744448,
4143330.51609483,
402.94780607155735,
1337001.7278533,
-4648995.57797249,
4143355.1858127,
404.6930295269922,
1337006.72407013,
-4648971.72248443,
4143380.17179813,
404.87313296214234,
1337007.17248642,
-4648969.26500436,
4143382.76696139,
586.3486358183509,
1337452.42912256,
-4646492.7692099,
4145998.55005355,
587.2212473262443,
1337454.27319752,
-4646480.8808894,
4146011.19338037,
588.0938586576976,
1337455.52404765,
-4646469.05011205,
4146023.9626627,
588.9664698332253,
1337456.18014895,
-4646457.29129183,
4146036.84234314,
589.8390808738786,
1337456.24070208,
-4646445.61875504,
4146049.81672977,
590.7116918014071,
1337455.70563326,
-4646434.04672288,
4146062.87001531,
591.5843026382099,
1337454.57559439,
-4646422.58929407,
4146075.98629633,
592.4569134068915,
1337452.85196225,
-4646411.26042773,
4146089.14959266,
593.329524130675,
1337450.53683681,
-4646400.07392634,
4146102.34386686,
594.2021348328017,
1337447.6330387,
-4646389.04341892,
4146115.55304372,
595.07474553670545,
1337444.14410575,
-4646378.18234446,
4146128.76102991,
595.9473562658459,
1337440.07428868,
-4646367.50393549,
4146141.95173353,
596.8199670434151,
1337435.42854595,
-4646357.02120201,
4146155.10908373,
597.692577892527,
1337430.21253768,
-4646346.74691562,
4146168.21705031,
598.5651888357697,
1337424.43261876,
-4646336.69359396,
4146181.25966324,
599.4377998954933,
1337418.09583114,
-4646326.87348546,
4146194.2210321,
600.3104110932927,
1337411.20989522,
-4646317.29855441,
4146207.08536546,
601.1830224502773,
1337403.78320045,
-4646307.98046638,
4146219.83699012,
602.0556339866507,
1337395.82479513,
-4646298.93057404,
4146232.46037019,
602.9282457216323,
1337387.34437533,
-4646290.1599033,
4146244.94012603,
603.8008576736847,
1337378.35227315,
-4646281.67913986,
4146257.26105297,
604.6734698602522,
1337368.85944408,
-4646273.49861624,
4146269.40813989,
605.546082297431,
1337358.87745368,
-4646265.62829915,
4146281.36658741,
606.418695000033,
1337348.41846345,
-4646258.07777736,
4146293.12182603,
607.2913079819118,
1337337.49521608,
-4646250.85625003,
4146304.6595338,
608.163921255471,
1337326.12101986,
-4646243.97251548,
4146315.9656538,
609.0365348313117,
1337314.30973249,
-4646237.4349605,
4146327.02641128,
609.909148719018,
1337302.07574421,
-4646231.25155008,
4146337.82833041,
610.7817629264828,
1337289.43396027,
-4646225.42981777,
4146348.35825072,
611.6543774600032,
1337276.39978271,
-4646219.97685646,
4146358.60334313,
612.5269923243377,
1337262.9890917,
-4646214.89930975,
4146368.55112559,
612.9797350475983,
1337255.88846612,
-4646212.4149769,
4146373.5910238,
614.115545975761,
1337273.82645994,
-4646218.5123855,
4146361.05776329,
615.8607766890927,
1337245.9243585,
-4646209.52088052,
4146380.00430622,
617.6060080778152,
1337217.35317569,
-4646201.30951309,
4146398.29656903,
619.3512401400367,
1337188.14772112,
-4646193.88828751,
4146415.91226544,
621.0964728706058,
1337158.34357713,
-4646187.26624544,
4146432.82993346,
622.8417062609387,
1337127.97705549,
-4646181.45145484,
4146449.02896154,
624.5869402993321,
1337097.08515315,
-4646176.45100018,
4146464.48961367,
626.3321749710612,
1337065.70550714,
-4646172.27097376,
4146479.19305345,
628.0774102579635,
1337033.87634873,
-4646168.91646834,
4146493.12136704,
629.8226461392933,
1337001.63645686,
-4646166.39157088,
4146506.25758493,
631.5678825911564,
1336969.02511088,
-4646164.69935762,
4146518.5857027,
633.3131195870228,
1336936.0820427,
-4646163.84189028,
4146530.09070044,
635.0583570974941,
1336902.84738838,
-4646163.82021358,
4146540.75856111,
636.8035950910344,
1336869.36163925,
-4646164.63435394,
4146550.57628757,
638.5488335334194,
1336835.66559254,
-4646166.28331949,
4146559.53191846,
640.2940723883112,
1336801.8003017,
-4646168.76510123,
4146567.61454272,
642.0393116175965,
1336767.80702638,
-4646172.07667551,
4146574.81431295,
643.784551181021,
1336733.72718216,
-4646176.21400771,
4146581.12245733,
645.52979103693,
1336699.60229008,
-4646181.17205713,
4146586.53129038,
647.2750311420623,
1336665.47392609,
-4646186.94478317,
4146591.03422228,
649.0202714521783,
1336631.38367033,
-4646193.52515265,
4146594.6257669,
650.7655119218798,
1336597.37305656,
-4646200.90514843,
4146597.3015485,
652.510752504957,
1336563.48352145,
-4646209.07577912,
4146599.05830706,
654.2559931547476,
1336529.75635421,
-4646218.02709006,
4146599.89390225,
656.0012338243196,
1336496.23264619,
-4646227.74817547,
4146599.80731601,
657.7464744663976,
1336462.95324087,
-4646238.22719169,
4146598.79865385,
659.4917150341334,
1336429.95868409,
-4646249.45137165,
4146596.86914466,
661.2369554808902,
1336397.28917463,
-4646261.40704043,
4146594.02113924,
662.98219576056,
1336364.98451526,
-4646274.07963186,
4146590.25810745,
664.7274358280192,
1336333.08406424,
-4646287.45370634,
4146585.58463395,
666.4726756390246,
1336301.62668735,
-4646301.5129696,
4146580.00641265,
668.2179151507044,
1336270.65071056,
-4646316.24029259,
4146573.53023974,
669.9631543215146,
1336240.19387333,
-4646331.61773231,
4146566.16400543,
671.7083931118068,
1336210.29328262,
-4646347.6265537,
4146557.91668432,
673.4536314833931,
1336180.9853677,
-4646364.24725247,
4146548.7983245,
675.198869400565,
1336152.30583574,
-4646381.45957883,
4146538.82003526,
676.9441068294364,
1336124.28962834,
-4646399.24256219,
4146527.99397361,
678.6893437387953,
1336096.97087892,
-4646417.5745367,
4146516.33332941,
680.434580099789,
1336070.38287117,
-4646436.43316764,
4146503.85230934,
682.179815886373,
1336044.55799847,
-4646455.79547866,
4146490.5661196,
683.9250510749916,
1336019.52772445,
-4646475.63787973,
4146476.49094732,
685.6702856454249,
1335995.32254464,
-4646495.93619591,
4146461.64394094,
687.4155195802796,
1335971.97194931,
-4646516.6656968,
4146446.0431892,
689.1607528650311,
1335949.50438756,
-4646537.80112668,
4146429.70769921,
690.9059854887018,
1335927.94723265,
-4646559.31673523,
4146412.65737323,
692.6512174432555,
1335907.32674864,
-4646581.18630898,
4146394.91298443,
694.3964487239937,
1335887.66805841,
-4646603.38320319,
4146376.49615159,
696.1416793295448,
1335868.99511303,
-4646625.88037433,
4146357.42931276,
697.8869092618461,
1335851.33066261,
-4646648.65041304,
4146337.73569793,
699.6321385259016,
1335834.69622854,
-4646671.66557748,
4146317.43930072,
701.3773671302242,
1335819.11207732,
-4646694.89782721,
4146296.56484914,
703.1225950864336,
1335804.59719582,
-4646718.31885728,
4146275.13777546,
704.7909304804743,
1335791.73781623,
-4646740.85809959,
4146254.16224107,
822.0039238507488,
1334923.44193438,
-4648328.57627519,
4144763.90958602,
823.7491506214883,
1334911.06525036,
-4648352.27448643,
4144741.46947821,
825.4943768008197,
1334899.80625999,
-4648376.07662074,
4144718.55573779,
827.2396024121663,
1334889.67868058,
-4648399.95367885,
4144695.1962816,
828.984827481936,
1334880.69485104,
-4648423.87657022,
4144671.41956952,
830.7300520386889,
1334872.86571678,
-4648447.81614846,
4144647.25456979,
831.8452041604105,
1334868.47231771,
-4648463.10775,
4144631.62446853,
995.6882490628541,
1334257.85418776,
-4650708.40950617,
4142324.29109808,
997.433472851626,
1334251.93378386,
-4650732.300287,
4142299.54184818,
999.1786962161423,
1334247.19017954,
-4650756.1308492,
4142274.48294786,
1000.9239191938304,
1334243.62915416,
-4650779.87215888,
4142249.14492753,
1001.3115691460098,
1334242.99918079,
-4650785.1303148,
4142243.48231718,
1201.6599654988804,
1333932.29970588,
-4653500.20540007,
4139312.96115992
]
}
}
]
3.加载飞行czml数据
var dronePromise = Cesium.CzmlDataSource.load('./assets/SampleData/sampleFlight.czml');
4.创建飞机实体
var drone;
dronePromise.then(function(dataSource){
viewer.dataSources.add(dataSource);
drone = dataSource.entities.getById('Aircraft/Aircraft1');
drone.model = {
uri:'./assets/SampleData/Models/ferrari2.gltf',
minimumPixelSize:128,
maximumScale:1000,
silhouetteColor:Cesium.Color.WHITE,
silhouetteSize:2
}
drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);
drone.viewFrom = new Cesium.Cartesian3(0,-30,30)
viewer.clock.shouldAnimate = true;
})
5.单页面完整代码
<template>
<div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(()=>{
var custom = new Cesium.ArcGisMapServerImageryProvider({
url:'//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
})
var viewer = new Cesium.Viewer('cesiumContainer',{
baseLayerPicker:false,
imageryProvider:custom,
terrainProvider:Cesium.createWorldTerrain({
requestWaterMask:true,
requestVertexNormals:true,
})
})
viewer.camera.setView({
destination:new Cesium.Cartesian3(1332761,-4662399,4137888),
orientation:{
heading:0.60,
pitch:-0.66
}
})
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url:Cesium.IonResource.fromAssetId(3839)}));
var heightStyle = new Cesium.Cesium3DTileStyle({
color:{
conditions:[
['${height} >= 300','rgba(45,0,75,0.5)'],
['${height} >= 200','rgb(102,71,151)'],
['${height} >= 100','rgba(170,162,204,0.5)'],
['${height} >= 50','rgba(224,226,238,0.5)'],
['${height} >= 25','rgba(252,230,200,0.5)'],
['${height} >= 10','rgba(248,176,87,0.5)'],
['${height} >= 5','rgba(198,106,11,0.5)'],
["true","rgb(127,59,8)"]
]
}
})
city.style = heightStyle;
var dronePromise = Cesium.CzmlDataSource.load('./assets/SampleData/sampleFlight.czml');
var drone;
dronePromise.then(function(dataSource){
viewer.dataSources.add(dataSource);
drone = dataSource.entities.getById('Aircraft/Aircraft1');
drone.model = {
uri:'./assets/SampleData/Models/ferrari2.gltf',
minimumPixelSize:128,
maximumScale:1000,
silhouetteColor:Cesium.Color.WHITE,
silhouetteSize:2
}
drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);
drone.viewFrom = new Cesium.Cartesian3(0,-30,30)
viewer.clock.shouldAnimate = true;
})
})
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
html,body,#cesiumContainer{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>