当前位置：首页 > article >正文

【Cesium】三、实现开场动画效果

article 2025/1/4 10:38:55

文章目录

实现效果
实现方法
实现代码
组件化

实现效果

在这里插入图片描述

实现方法

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 】一、vite+vue3+cesium 使用，项目中使用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中使用

<template>
  <div id="cesiumContainer"></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?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={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?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={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;
}
</style>