重庆网站设计开发培训,wordpress模板校园,永久免费单机版进销存软件,秦皇岛市做网站优化文章目录 实现效果实现方法实现代码组件化 实现效果 实现方法
Cesium官方提供了Camera的flyTo方法实现了飞向目的地的动画效果。
官方API#xff1a;传送门
这里只需要用到目的地#xff08;destination#xff09;和持续时间#xff08;duration#xff09;这两个参数… 文章目录 实现效果实现方法实现代码组件化 实现效果 实现方法
Cesium官方提供了Camera的flyTo方法实现了飞向目的地的动画效果。
官方API传送门
这里只需要用到目的地destination和持续时间duration这两个参数即可。
实现代码
1代码调用 这里以南京为目的地实现开场动画效果。
let position {lon: 118.7969,lat: 32.0603,height: 20000,
};flyToPosition(viewer, position, 4);2核心函数
/*** description : 初始场景动画飞到目标点* param {*} viewer * param {*} position 目标点位置* param {*} duration 持续时间* return {*}*/
function flyToPosition(viewer, position, duration) {viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(position.lon, position.lat, position.height),duration: duration,});
}组件化
看过我上一篇文章的可以继续往下看
上篇文章【Cesium 】一、vitevue3cesium 使用项目中使用cesium 地图具体步骤。快速搭建Cesium三维地图应用项目
在模板的基础上实现 开场动画效果不通的是写成组件形式
utils下新建Ces_utils.js文件全部代码如下
import * as Cesium from cesium;
const CesUtils () {/*** description : 初始场景动画飞到目标点* param {*} viewer* param {*} position 目标点位置* param {*} duration 持续时间* return {*}*/const flyToPosition (viewer, position, duration) {viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(position.lon,position.lat,position.height),duration: duration,});}return {flyToPosition}
}export default CesUtils;在App.vue中使用
templatediv idcesiumContainer/div
/template
script setup
import { onMounted } from vue;
import * as Cesium from cesium;
import CesUtils from /utils/Ces_utils;
const cesUtils CesUtils();const initFn async () {const viewer new Cesium.Viewer(cesiumContainer, {infoBox: false,geocoder: false,homeButton: false,sceneModePicker: false,baseLayerPicker: true,navigationHelpButton: false,animation: false,timeline: false,fullscreenButton: false,vrButton: false,});viewer._cesiumWidget._creditContainer.style.display none; //取消版权信息const imageLayers viewer.scene.imageryLayers;imageLayers.remove(imageLayers.get(0)); //移除默认影像图层const TDTTK 337bc7a038fe9d239af76ab013ff4594; //填入你自己的天地图Key// 天地图影像const tdtLayer new Cesium.WebMapTileServiceImageryProvider({url: http://t0.tianditu.com/img_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERimgSTYLEdefaultTILEMATRIXSETwFORMATtilesTILEMATRIX{TileMatrix}TILEROW{TileRow}TILECOL{TileCol}tk${TDTTK},layer: tdt,style: default,format: image/jpeg,tileMatrixSetID: w,maximumLevel: 18,show: false,});viewer.imageryLayers.addImageryProvider(tdtLayer);// 天地图注记const tdtAnnotionLayer new Cesium.WebMapTileServiceImageryProvider({url: http://t0.tianditu.com/cia_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERciaSTYLEdefaultTILEMATRIXSETwFORMATtilesTILEMATRIX{TileMatrix}TILEROW{TileRow}TILECOL{TileCol}tk${TDTTK},layer: tdtAnno,style: default,format: image/jpeg,tileMatrixSetID: w,maximumLevel: 18,show: false,});viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);cesUtils.flyToPosition(viewer, position, 4);
};let position {lon: 118.7969,lat: 32.0603,height: 20000,
};onMounted(() {initFn();
});
/script
style
#app {width: 100%;height: 100%;font-family: sans-serif;text-align: center;
}html,
body,
#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
/styleok开场动画效果就实现了后面我还会更新更多关于cesium知识敬请关注。
