Cesium entity加载了 500 个飞机模型(同一个模型),50ms 改变一次坐标,帧率保持在 27FPS 左右。
<template>
<div id="cesiumContainer"></div>
</template>
<script>
export default {
name: "MultModel",
mounted() {
this.initViewer();
this.loadModel();
this.changePos();
},
methods: {
initViewer() {
let defaultRect = Cesium.Rectangle.fromDegrees(90, 20, 130, 50);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = defaultRect;
window.viewer = new Cesium.Viewer("cesiumContainer", {
animation: false,
shouldAnimate: true,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
infoBox: false,
navigationInstructionsInitiallyVisible: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
}),
});
window.viewer.scene.debugShowFramesPerSecond = true;
},
loadModel() {
for (let i = 0; i < 500; i++) {
let lon = 110 + Math.random() / 10;
let lat = 30 + Math.random() / 10;
let entity = viewer.entities.add({
id: i,
position: Cesium.Cartesian3.fromDegrees(lon, lat, 100),
model: {
uri: "data/Cesium_Air.glb",
scale: 20,
color: Cesium.Color.fromRandom(),
},
});
}
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(110, 30, 5000),
});
},
changePos() {
setTimeout(() => {
setInterval(() => {
for (let i = 0; i < 500; i++) {
let entity = viewer.entities.getById(i);
let carto = Cesium.Cartographic.fromCartesian(entity.position.getValue());
let lon = Cesium.Math.toDegrees(carto.longitude);
let lat = Cesium.Math.toDegrees(carto.latitude);
let height = carto.height;
lon = lon + Math.random() / 1000;
lat = lat + Math.random() / 1000;
entity.position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
}
}, 50);
}, 6000);
},
},
};
</script>
<style>
</style>