<template>
<div class="drone
-monitor">
<!
-- 视角控制控件
-->
<div class="camera
-control">
<label>相机高度: {{ cameraHeight }}米</label>
<input type="range" min="50" max="1000" v
-model="cameraHeight" @input="updateCameraHeight">
</div>
<!
-- Cesium容器
-->
<div id="cesium
-container"></div>
</div>
</template>
<script>
import * as Cesium from 'cesium'
import * as
Supermap from '@
supermap/
iclient-3d-webgl'
import { ref, onMounted, onBe
foreUnmount } from 'vue'
export default {
setup
() {
const viewer = ref
(null
)
const droneEntity = ref
(null
)
const socket = ref
(null
)
const cameraHeight = ref
(150
) // 默认相机高度
const droneId = 'Drone
-001'
const modelUrl = "/models/drone.glb" // 无人机
3D模型地址
// 初始化地图
const initViewer =
() => {
// 创建Cesium视图
viewer.value = new Cesium.Viewer
('cesium
-container', {
//
SuperMap配置（如
使用SuperMap，取消注释以下配置）
// ...
Supermap.WebMap
terrainProvider: Cesium.createWorldTerrain
(),
animation: false,
timeline: false,
vrButton: false,
baseLayerPicker: false,
geocoder: false
}
)
// 添加OSM建筑层
viewer.value.scene.primitives.add
(
Cesium.createOsmBuildings
()
)
// 设置初始视角定位
viewer.value.camera.setView
({
destination: Cesium.Cartesian3.fromDegrees
(
116.39, 39.9, 10000
)
}
)
}
// 创建无人机
模型
const createDroneModel =
(initPosition
) => {
droneEntity.value = viewer.value.entities.add
({
id: droneId,
name: '无人机',
position: initPosition,
model: {
uri: modelUrl,
minimumPixelSize: 64,
maximumScale: 20000,
silhouette: true,
silhouetteColor: Cesium.Color.RED,
runAnimations: true
},
orientation: new Cesium.VelocityOrientationProperty
(initPosition
)
}
)
// 创建后自动拉高相机视角
liftCameraPosition
(initPosition
)
}
// 拉高相机视角
const liftCameraPosition =
(position
) => {
const cartographic = Cesium.Cartographic.fromCartesian
(position
)
const cameraPosition = Cesium.Cartesian3.fromRadians
(
cartographic.longitude,
cartographic.latitude,
cartographic.height + cameraHeight.value
)
viewer.value.camera.flyTo
({
destination: cameraPosition,
orientation: {
heading: 0,
pitch:
-Math.PI / 3, // 60度俯角
roll: 0
},
duration: 2.5
}
)
}
// 更新相机高度
const updateCameraHeight =
() => {
if
(droneEntity.value
) {
const position = droneEntity.value.position.getValue
(Cesium.JulianDate.now
())
liftCameraPosition
(position
)
}
}
// 初始化WebSocket连接
const initWebSocket =
() => {
socket.value = new WebSocket
('wss://your
-drone
-server.com'
)
const cartesian = Cesium.Cartesian3.ZERO
socket.value.addEventListener
('open',
() => {
console.log
('WebSocket连接已建立'
)
}
)
socket.value.addEventListener
('message',
(event
) => {
const data = JSON.parse
(event.data
)
const { droneId, positionData } = data
// 定位新位置
const newPosition = Cesium.Cartesian3.fromDegrees
(
positionData.longitude,
positionData.latitude,
positionData.height
)
// 如果没有
模型则创建
模型
if
(!droneEntity.value
) {
createDroneModel
(newPosition
)
}
// 已有
模型则更新位置
else {
// 更新无人机位置
droneEntity.value.position = new Cesium.ConstantPositionProperty
(newPosition
)
// 更新无人机朝向（基于运动方向）
if
(droneEntity.value.orientation instanceof Cesium.VelocityOrientationProperty
) {
droneEntity.value.orientation.position = droneEntity.value.position
}
// 相机跟随（位置调整）
const cartographic = Cesium.Cartographic.fromCartesian
(newPosition
)
const cameraPosition = Cesium.Cartesian3.fromRadians
(
cartographic.longitude,
cartographic.latitude,
cartographic.height + cameraHeight.value
)
// 平滑更新相机位置
viewer.value.scene.camera.flyTo
({
destination: cameraPosition,
orientation: {
heading: Cesium.Math.toRadians
(data.heading || 0
),
pitch:
-Math.PI / 3,
roll: 0
},
duration: 0.8 // 800ms过渡时间
}
)
}
}
)
socket.value.addEventListener
('close',
() => {
console.log
('WebSocket连接已关闭'
)
setTimeout
(initWebSocket, 2000
) // 2秒后重连
}
)
}
onMounted
(() => {
initViewer
()
initWebSocket
()
}
)
onBe
foreUnmount
(() => {
// 清理资源
if
(socket.value
) socket.value.close
()
if
(viewer.value
) viewer.value.destroy
()
}
)
return {
cameraHeight,
updateCameraHeight
}
}
}
</script>
<style scoped>
.drone
-monitor {
position: relative;
width: 100%;
height: 100vh;
}
#cesium
-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.camera
-control {
position: absolute;
top: 20px;
left: 20px;
z
-index: 100;
background: rgba
(0,0,0,0.7
);
padding: 10px 15px;
border
-radius: 5px;
color: white;
}
.camera
-control label {
margin
-right: 10px;
}
</style>
上述代码，
模型在移动中地图视角不以
模型为中心进行移动
本文详细介绍如何使用3DMax插件将建筑模型数据导出至SuperMap平台，包括插件下载、安装步骤及模型导出的具体设置，适用于GIS数据生产和管理的专业人士。
扫一扫
3231
到【灌水乐园】发言
