token记得换成您自己的！！！ 

申请cesium的token 官网【Cesium: The Platform for 3D Geospatial】

 

<template><div id="cesiumContatiner"><!-- <div id="mapContainer1"></div> --></div></template>
<!-- 绘制面并且编辑 -->
<script setup lang="ts">
import * as Cesium from 'cesium';
import { ref, watch, reactive, toRefs, onMounted } from 'vue';
import * as turf from '@turf/turf';// 地图实例
let viewer: any;onMounted(() => {// 设置cesium tokenCesium.Ion.defaultAccessToken ='填写您自己的token';viewer = GetCesiumViewer('cesiumContatiner');GetMotionLine()
});function GetCesiumViewer(cesiumContatiner: string) {// // 创建自定义图层const esri = new Cesium.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',// enablePickFeatures: false,});// 【控件】viewer = new Cesium.Viewer(cesiumContatiner, {timeline: false, // 时间轴animation: false, // 动画小组件geocoder: false, // 地理编码（搜索）组件homeButton: false, // 首页，点击之后将视图跳转到默认视角sceneModePicker: false, // 投影方式，切换2D、3D 和 Columbus View (CV) 模式。baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。navigationHelpButton: false, // 帮助按钮fullscreenButton: false, // 全屏按钮// vrButton: false, // VR模式selectionIndicator: false, //是否显示选取指示器组件// shouldAnimate: true, // 自动播放动画控件// shadows: true, // 是否显示光照投射的阴影// terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, // 地质接收阴影`infoBox: false, // 信息框//terrainProvider:new Cesium.CesiumTerrainProvider({url: 'http://data.marsgis.cn/terrain',}),imageryProvider: esri , //自定义图层，默认是谷歌的影响图层scene3DOnly: true, // 每个几何实例将只能以3D渲染以节省GPU内存sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode});// 隐藏logoviewer._cesiumWidget._creditContainer.style.display = 'none';let destination = Cesium.Cartesian3.fromDegrees(116.3974, 39.9087, 1000); // 北京天安门广场的经纬度坐标及高度// 116.3974, 39.9087// viewer.camera.flyTo({//   destination: destination,//   duration: 2, // 飞行动画持续时间（单位：秒）// });return viewer;
}function GetMotionLine(){viewer.clock.shouldAnimate = true;const startLatitude =  39.9087;
const startLongitude = 116.3974;
let endLongitude;
const startTime = Cesium.JulianDate.now();//将多段线添加到场景中。位置是动态的。
const isConstant = false;
const redLine = viewer.entities.add({polyline: {//此回调将更新每帧的位置。positions: new Cesium.CallbackProperty(function (time, result) {endLongitude =startLongitude +0.005 * Cesium.JulianDate.secondsDifference(time, startTime);return Cesium.Cartesian3.fromDegreesArray([startLongitude, startLatitude, endLongitude, startLatitude],Cesium.Ellipsoid.WGS84,result);}, isConstant),width: 10,// material: Cesium.Color.RED,material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.fromCssColorString('#FF0000') //transparent),// 是否贴地显示clampToGround: true,},});let destination = Cesium.Cartesian3.fromDegrees(116.3974, 39.9087, 10000); // 北京天安门广场的经纬度坐标及高度116.3974, 39.9087viewer.camera.flyTo({destination: destination,duration: 2, // 飞行动画持续时间（单位：秒）});
const startCartographic = Cesium.Cartographic.fromDegrees(startLongitude,startLatitude
);// 使用scrath对象来避免每帧都创建新的对象。
let endCartographic = new Cesium.Cartographic();
const scratch = new Cesium.Cartographic();
const geodesic = new Cesium.EllipsoidGeodesic();// 计算直线的长度
function getLength(time, result) {// 从polyLine的回调中获取结束位置。const endPoint = redLine.polyline.positions.getValue(time, result)[1];endCartographic = Cesium.Cartographic.fromCartesian(endPoint);geodesic.setEndPoints(startCartographic, endCartographic);const lengthInMeters = Math.round(geodesic.surfaceDistance);return `${(lengthInMeters / 1000).toFixed(1)} km`;
}function getMidpoint(time, result) {//从polyLine的回调中获取结束位置。const endPoint = redLine.polyline.positions.getValue(time, result)[1];endCartographic = Cesium.Cartographic.fromCartesian(endPoint);geodesic.setEndPoints(startCartographic, endCartographic);const midpointCartographic = geodesic.interpolateUsingFraction(0.8,scratch);return Cesium.Cartesian3.fromRadians(midpointCartographic.longitude,midpointCartographic.latitude);
}//用计算的长度标记多段线
const label = viewer.entities.add({position: new Cesium.CallbackProperty(getMidpoint, isConstant),label: {//此回调将更新打印每帧的长度。text: new Cesium.CallbackProperty(getLength, isConstant),//function(){ return ''}font: "20px sans-serif",pixelOffset: new Cesium.Cartesian2(0.0, 20),},
});//保持视图居中。
viewer.trackedEntity = label;}</script><style scoped lang="scss">
.container {display: flex;width: 100%;height: 100%;justify-content: space-between;flex-wrap: wrap;} /* #mapContainer1 {width: 50%;position: absolute;padding: 0;margin: 0;height: 100%;
}#mapContainer2 {width: 50%;left: 50%;position: absolute;padding: 0;margin: 0;height: 100%;
} *//* /deep/.cesium-widget{height: 911px
}*/
</style>