目标将西南石油大学部分区域围起来,然后引个标签显示名称,最后弄个飞机绕学校飞(这个时间有点晚了,明天弄)
围墙:
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>