vue + cesium: 渔船轨迹（无动画）（trackPlayback.js）

/*
* 说明:   渔船轨迹
*/

import * as Cesium from "cesium/Cesium.js";
import config from "./config";
import Vue from 'vue'
const vm = new Vue()

export const $TrackPlayback = (
        function() {
            var viewer;
            var handler;
            var dataSource;
            var features = [];
            function initViewer(option) {
                viewer = option.viewer;
                handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                dataSource = new Cesium.CustomDataSource('shipTrack');
                viewer.dataSources.add(dataSource);
            }
            function trackPlayback(obj) {
                initViewer({viewer: obj.viewer})
                if (features.length > 0) {
                    for (var i in features) {
                        viewer.entities.remove(features[i]);
                    }
                }
                console.log('000000')
                features = [];
                // debugger
                // 起始时间
                var start = Cesium.JulianDate.fromDate(new Date(new Date(obj.startTime).Format("yyyy-MM-dd hh:mm:ss")));
                // 结束时间
                var stop = Cesium.JulianDate.fromDate(new Date(new Date(obj.endTime).Format("yyyy-MM-dd hh:mm:ss")));
                // 设置始时钟始时间
                viewer.clock.startTime = start.clone();
                
                // 设置时钟当前时间
                viewer.clock.currentTime = stop.clone();
                // 设置始终停止时间
                viewer.clock.stopTime = stop.clone();
                // 时间速率，数字越大时间过的越快
                viewer.clock.multiplier = 35;
                console.log(viewer, 'viewer')
                computeFlight(obj.position, start, stop)
            }
            function computeFlight(source, start, stop) {
                // 取样位置 相当于一个集合
                console.log('source', source)
                let property = new Cesium.SampledPositionProperty();
                let linePosition = []
                for(let i=0; i<source.length; i++){
                    let lon = parseFloat(source[i].e / 10000000)
                    let lat = parseFloat(source[i].f / 10000000)
                    let time = Cesium.JulianDate.addSeconds(start, i * 100, new Cesium.JulianDate());
                    let position = Cesium.Cartesian3.fromDegrees(lon, lat, 0);
                    linePosition.push(lon)
                    linePosition.push(lat)
                    // 添加位置，和时间对应
                    property.addSample(time, position);
                    // let pointEntity = viewer.entities.add({
                    //     position: position,
                    //     point: {
                    //         pixelSize: 5,
                    //         color: Cesium.Color.RED,
                    //         outlineColor: Cesium.Color.WHITE,
                    //         outlineWidth: 2,
                    //     },
                    // });
                    // features.push(pointEntity)
                }
                console.log(property, linePosition, 'linePosition')
                let lines = viewer.entities.add({
                    name: 'Red line on terrain',
                    polyline: {
                        positions: Cesium.Cartesian3.fromDegreesArray(linePosition),
                        width: 5,
                        material: Cesium.Color.LAWNGREEN,
                        clampToGround: true
                    }
                })
                let boatModel = viewer.entities.add({
                    availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                        start: start,
                        stop: stop
                    })]),
                    // position: Cesium.Cartesian3.fromDegrees(linePosition[linePosition.length - 2], linePosition[linePosition.length - 1], -0.5),
                    position: property,
                    name: "轨迹模拟船只",
                    // 根据所提供的速度计算点
                    orientation: new Cesium.VelocityOrientationProperty(
                            property),
                    // 模型数据
                    model: {
                        uri: config.mapUrl.gltf.shipBoat,
                        scale: 1,
                    },
                });
                let height = viewer.camera.positionCartographic.height
                // viewer.camera.setView({
                //     destination: Cesium.Cartesian3.fromDegrees(linePosition[linePosition.length - 2], linePosition[linePosition.length - 1], height),
                // });
                // viewer.trackedEntity = boatModel;
                features.push(lines, boatModel)
                return property;
            }
            function clearTrack() {
                for (var i in features) {
                    viewer.entities.remove(features[i]);
                }
                features = []
            }
            return {
                play: (obj) => trackPlayback(obj),
                clear: () => clearTrack()
            }
        })()