Cesium基础知识-加载KML数据生成模型，路径

1. //加载KML流数据，生成移动路径和模型，模型按路径移动，设置第一视角，标签显示
2. function LoadKMLData1() {
3.     //先请求出数据
4.      let flyArry = [],czml_hh,time = 0.0
5.      $.get('../Apps/SampleData/geojson/flyroad_1.json', function (data) {
6.          for (let i = 0; i < data.features.length; i++) {
7.            x = data.features[i].geometry.coordinates[0]
8.            y = data.features[i].geometry.coordinates[1]
9.            z = data.features[i].properties.Z
10.            time += data.features[i].properties.time *0.1
11.            flyArry.push(time,x, y, z)
12.          }
13.          czml_hh = [
14.              {
15.                  //文本，时间
16.                  id: 'document',
17.                  name: '时间',
18.                  version: '1.0',
19.                  clock: {
20.                          interval: '2021-03-16T10:00:00Z/2021-03-16T10:07:45Z',
21.                          currentTime: '2021-03-16T10:00:01Z',
22.                          multiplier: 1,
23.                  },
24.              },
25.              {
26.                  id: 'hhriverRoamingModel',
27.                  name: '黄河八电站漫游飞机',
28.                  description: '从上游电站开始往下游电站漫游飞行模型',
29.                  availability: '2021-03-16T10:00:00Z/2021-03-16T10:07:45Z',
30.                  //加载的模型数据
31.                  model: {
32.                          gltf: '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
33.                          scale: 5,
34.                  },
35.                  //旋转的方向
36.                  orientation: {
37.                          velocityReference: '#position',
38.                  },
39.                  viewFrom: {
40.                          cartesian: [-1480, -1315, 1079],
41.                  },
42.                  //显示的文字信息
43.                  label: {
44.                          fillColor: [
45.                              {
46.                                  interval: '2021-03-16T10:00:00Z/2021-03-16T10:07:45Z',
47.                                  rgba: [255, 255, 255, 255],
48.                              },
49.                          ],
50.                          font: 'bold 14pt Segoe UI Semibold',
51.                          horizontalOrigin: 'CENTER',
52.                          showBackground: true,
53.                          backgroundColor: {
54.                              rgba: [0, 80, 142, 180],
55.                          },
56.                          backgroundPadding: {
57.                              cartesian2: [10, 7],
58.                          },
59.                          outlineColor: {
60.                              rgba: [0, 0, 0, 255],
61.                          },
62.                          pixelOffset: {
63.                              cartesian2: [0.0, -100.0],
64.                          },
65.                          scale: 1.0,
66.                          show: [
67.                              {
68.                                  interval: '2021-03-16T10:00:00Z/2021-03-16T10:07:45Z',
69.                                  boolean: true,
70.                              },
71.                          ],
72.                          style: 'FILL',
73.                          text: '飞机漫游',
74.                          verticalOrigin: 'CENTER',
75.                  },
76.                  //显示路径
77.                  path: {
78.                          resolution: 1,//将路径显示为以1秒为增量采样的路径线
79.                          id: 'hhriverRoamingPath',
80.                          name: '黄河八电站漫游路径',
81.                          description: '从上游电站开始往下游电站漫游飞行路径',
82.                          availability: '2021-03-16T10:00:00Z/2021-03-16T10:07:45Z',
83.                          material: {
84.                              'polylineGlow': {
85.                                  'color': {
86.                                          'rgba': [
87.                                              0,
88.                                              0,
89.                                              200,
90.                                              255
91.                                          ]
92.                                  },
93.                                  'glowPower': 0.4,
94.                              }
95.                          },
96.                          width: 3,
97.                          // leadTime: 10,
98.                          // trailTime: 1000,
99.                          // resolution: 5,
100.                  },
101.                  //位置关系
102.                  position: {
103.                          interpolationAlgorithm: 'HERMITE', 
104.                          interpolationDegree: 0.5,
105.                          epoch: '2021-03-16T10:00:00Z',
106.                          cartographicDegrees: flyArry,
107.                  },
108.                  },
109.          ];
110.      })
111.      function initLJMY(){
112.          var dataSourcePromise = viewer.dataSources.add(
113.              Cesium.CzmlDataSource.load(czml_hh),
114.          );
115.          dataSourcePromise
116.              .then((dataSource) => {
117.                  viewer.trackedEntity = dataSource.entities.getById(
118.                      'hhriverRoamingModel',
119.                  );
120.                      //定义一个全局变量等于这个值 好做实时的显隐控制
121.                 this.roamingEntity = viewer.trackedEntity;
122.                      //是否显示路径
123.                 viewer.trackedEntity.path.show = true;
124.                       //是否显示模型
125.                      viewer.trackedEntity.model.show = true;
126.                      //是否开始播放动画
127.                      viewer.clock.shouldAnimate = true;
128.                      //第一视角
129.                    firstPersonModel();
130.                      //定义时间参数
131.                 this.startTime = viewer.clock.currentTime.clone();
132.              }).otherwise((error) => {
133.                  alert(error);
134.          });
135.       }
136.      //设置第一视角
137.      function firstPersonModel() {
138.          if(viewer.scene){
139.              viewer.scene.preRender.addEventListener(setCameraLookAt);
140.          }
141.     }
142.      //设置摄像机事件
143.      function setCameraLookAt() {   
144.          if (viewer.trackedEntity) {
145.              let center = viewer.trackedEntity.position.getValue(
146.                  viewer.clock.currentTime
147.              );
148.              let orientation = viewer.trackedEntity.orientation.getValue(
149.                  viewer.clock.currentTime
150.              );
151.              // 圆滑路径，使路径相对平滑过渡 插值过渡
152.              viewer.trackedEntity.position.setInterpolationOptions({
153.                  interpolationAlgorithm: Cesium.HermitePolynomialApproximation, //插值算法
154.                  interpolationDegree: 2
155.              });
156.              //实时计算飞行时模型的航向角度
157.              let transform = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation), center);
158.              viewer && viewer.camera.lookAtTransform(transform, new Cesium.Cartesian3(-800, 0, 300));
159.          }
160.      }
161.       //清除事件
162.       function clearReuslt() {
163.          try {
164.              viewer.clock.shouldAnimate = false;
165.              viewer.trackedEntity = undefined;
166.              viewer.dataSources.removeAll();
167.          } catch (err) {
168.              console.log('45555555555', err);
169.          }
170.      }
172.      //绑定事件
173.     document.getElementById("fly").onclick=initLJMY;
174.     document.getElementById("clearReuslt").onclick=clearReuslt;
175. }
176. LoadKMLData1();