目标将西南石油大学部分区域围起来,然后引个标签显示名称,最后弄个飞机绕学校飞(这个时间有点晚了,明天弄)
围墙:
wall:{
positions:Cesium.Cartesian3.fromDegreesArrayHeights([
104.173,30.822,500,
104.178,30.837,500,
104.19,30.837, 500,
104.185,30.82,500,
104.173,30.822,500,
]),
material:Cesium.Color.RED.withAlpha(.4),
outline: true,
},
线条
polyline:{
positions:Cesium.Cartesian3.fromDegreesArrayHeights([
104.18,30.83,0,
104.18,30.83,1600
]),
material:Cesium.Color.BLUE,
width:5
},
标签,这个坐标你需要在外面设定
new Cesium.Entity({
position:Cesium.Cartesian3.fromDegrees(
104.18,30.83,1650
),
label: {
text: "好的大学没有围墙!!",
font: "14px sans-serif",
showBackground: true,
backgroundColor:new Cesium.Color(50,50,50,.6)
},
})
然后就是加载一个飞机,文档里面说了只能gltf格式
飞机的位置也要在写在外面,会和标签重合,所以重新创建一个对象,
模型需要自己下载
var plane=new Cesium.Entity({
position:Cesium.Cartesian3.fromDegrees(
104.173,30.822,600
),
model: {
uri:"src/assets/gltf/plane/scene.gltf",
minimumPixelSize: 128, //模型最小像素
maximumScale: 200, //模型最大放大倍数
},
orientation:Cesium.Transforms.headingPitchRollQuaternion(
Cesium.Cartesian3.fromDegrees(
104.173,30.822,600
),
new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(-90), // 设置顺时针旋转的角度值
Cesium.Math.toRadians(0),
Cesium.Math.toRadians(0)
)
)
})
效果
全部代码
<template>
<div class="PartOneBox">
<div id="cesiumContainer"></div>
</div>
</template>
<script setup lang='ts'>
import { ref, reactive,onMounted} from 'vue'
onMounted(async()=>
{
let viewer = new Cesium.Viewer('cesiumContainer')
var utc=Cesium.JulianDate.fromDate(new Date("2024/08/26 9:30:00"))
viewer.clock.currentTime=Cesium.JulianDate.addHours(utc,8,new Cesium.JulianDate())
var labelImagery = new Cesium.TiandituImageryProvider({
mapStyle: Cesium.TiandituMapsStyle["IMG_C"],//天地图全球中文注记服务
token: "你自己申请的" //由天地图官网申请的密钥
});
viewer.imageryLayers.addImageryProvider(labelImagery);
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(
104.18,30.83,3500
)
})
var geo = new Cesium.Entity({
position:Cesium.Cartesian3.fromDegrees(
104.18,30.83,1650
),
wall:{
positions:Cesium.Cartesian3.fromDegreesArrayHeights([
104.173,30.822,500,
104.178,30.837,500,
104.19,30.837, 500,
104.185,30.82,500,
104.173,30.822,500,
]),
material:Cesium.Color.RED.withAlpha(.4),
outline: true,
},
polyline:{
positions:Cesium.Cartesian3.fromDegreesArrayHeights([
104.18,30.83,0,
104.18,30.83,1600
]),
material:Cesium.Color.BLUE,
width:5
},
label: {
text: "好的大学没有围墙!!",
font: "14px sans-serif",
showBackground: true,
backgroundColor:new Cesium.Color(50,50,50,.6)
},
})
var plane=new Cesium.Entity({
position:Cesium.Cartesian3.fromDegrees(
104.173,30.822,600
),
model: {
uri:"src/assets/gltf/plane/scene.gltf",
minimumPixelSize: 128, //模型最小像素
maximumScale: 200, //模型最大放大倍数
},
orientation:Cesium.Transforms.headingPitchRollQuaternion(
Cesium.Cartesian3.fromDegrees(
104.173,30.822,600
),
new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(-90), // 设置这个属性即可(顺时针旋转的角度值)
Cesium.Math.toRadians(0),
Cesium.Math.toRadians(0)
)
)
})
viewer.entities.add(geo)
viewer.entities.add(plane)
})
</script>
<style scoped lang='scss'>
.PartOneBox
{
width:1200px;
height:1000px;
margin:50px auto;
position:relative;
.cesiumContainer
{
width:100%;
height:100%;
}
}
</style>