(项目需要功能)学习笔记
方法一:
body,
html,
div {
margin: 0;
padding: 0;
}
#cesiumContainer {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
}
let wrapper = document.querySelector("#cesiumContainer");
let config = {
imageryProvider: new Cesium.TileMapServiceImageryProvider({
url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
}),
navigationInstructionsInitiallyVisible: false,
projectionPicker: false,
creditContainer: null,
animation: true, // 是否创建动画小器件,左下角仪表
baseLayerPicker: false, // 是否显示图层选择器
fullscreenButton: false, // 是否显示全屏按钮
geocoder: false, // 是否显示geocoder小器件,右上角查询按钮
homeButton: false, // 是否显示Home按钮
infoBox: false, // 是否显示信息框
sceneModePicker: true, // 是否显示3D/2D选择器
selectionIndicator: false, // 是否显示选取指示器组件
timeline: true, // 是否显示时间轴
navigationHelpButton: false // 是否显示右上角的帮助按钮
};
const viewer = new Cesium.Viewer(wrapper, config);
let canvas = document.createElement("canvas");
let url =
"https://media.giphy.com/media/VbEq7lhC0gVMFUX819/giphy-downsized.gif?cid=ecf05e471i9fq42unyxtjoci88jd019z2aana25ytggjay33&rid=giphy-downsized.gif&ct=g";
let gifImageLayerList = {};
let rectangle = Cesium.Rectangle.fromDegrees(...[92.07, 27.67, 118.66, 39.45]);
function onDrawFrame(ctx, frame) {
let { data_offset } = frame;
if (gifImageLayerList[data_offset]) {
viewer.imageryLayers.raiseToTop(gifImageLayerList[data_offset]);
} else {
ctx.canvas.width = frame.width;
ctx.canvas.height = frame.height;
ctx.drawImage(frame.buffer, 0, 0);
const provider = new Cesium.SingleTileImageryProvider({
url: canvas.toDataURL(),
rectangle
});
let layer = viewer.imageryLayers.addImageryProvider(provider);
gifImageLayerList[data_offset] = layer;
}
}
gifler(url).frames(canvas, onDrawFrame);
viewer.camera.flyTo({
destination: rectangle,
orientation: {
// heading: 0,
// pitch: Cesium.Math.toDegrees(-90),
// roll: 0
heading: 0,
pitch: Cesium.Math.toRadians(-90),
roll: 0.0
}
});
https://blog.csdn.net/lovefengruoqing/article/details/120451612?ops_request_misc=&request_id=&biz_id=102&utm_term=cesium%E8%B4%B4%E5%9B%BE&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-4-120451612.142^v74^pc_new_rank,201^v4^add_ask,239^v2^insert_chatgpt&spm=1018.2226.3001.4187