vite+vue3.0+cesium ----07 end 加载飞机飞行czml数据并且设置图标沿着轨迹运动

1. 效果演示

飞行效果

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数据


  // 从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/CesiumDrone.gltf',
      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(()=>{
  // const viewer = new Cesium.Viewer('cesiumContainer');
  var custom = new Cesium.ArcGisMapServerImageryProvider({
    url:'//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
  })

  var viewer = new Cesium.Viewer('cesiumContainer',{
    // 不创建baseLayerPicker小部件
    baseLayerPicker:false,
    // 设置图像提供的程序
    imageryProvider:custom,
    // 设置cesium世界地形
    terrainProvider:Cesium.createWorldTerrain({
      requestWaterMask:true,
      requestVertexNormals:true,
    })
  })

  // viewer.camera.setView({
  //   destination:Cesium.Cartesian3.fromDegrees(113.318977,23.114155,2000),
  //   // 方向、俯视和仰视的视角
  //   orientation:{
  //     heading:Cesium.Math.toRadians(90),
  //     pitch:Cesium.Math.toRadians(-90)
  //   }
  // })
  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)}));
  
  // 定义3d样式
  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;


  // 从czml文件加载飞行路径
  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/CesiumDrone.gltf',
      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>

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值