supermap iclient3d for cesium中entity使用

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

围墙:

复制代码
  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>
相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试