5.cesium+vue3点（点，广告，文字），线，面（面拉伸），盒子

一只小菜鸡耶

已于 2024-09-13 16:33:45 修改

阅读量259

点赞数 7

文章标签： vue.js javascript 前端

于 2024-09-12 12:35:35 首次发布

本文链接：https://blog.youkuaiyun.com/m0_49684635/article/details/142172272

版权

点 point

在这里插入图片描述

<template>
    <div id="cesiumContent">
      
    </div>
  </template>
  
  <script setup>
  import { onMounted} from 'vue'
  import * as Cesium from 'cesium'
  console.log(Cesium);
  onMounted(()=>{
    // token
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
    // viewer所有api的开始
    const viewer = new Cesium.Viewer('cesiumContent',{})
    // 实体 Entity
    // 写法一
    // const point = new Cesium.Entity({
    //   position:new Cesium.Cartesian3.fromDegrees(120,30),
    //   point:{
    //     pixelSize:20,
    //     color: Cesium.Color.BLUE
    //   }
    // })
    // viewer.entities.add(point)
    // viewer.zoomTo(point)
    // 写法二
    viewer.entities.add({
      id:'point',
      position:new Cesium.Cartesian3.fromDegrees(120,30),
      point:{
      pixelSize:20,
        color: Cesium.Color.BLUE
      }
    })
    // viewer.zoomTo(point)
  })
  </script>
  
  <style>
  #cesiumContent{
    width:100vw;
    height:100vh;
    overflow: hidden;
  }
  </style>

广告 billboard

在这里插入图片描述

<template>
    <div id="cesiumContent">
      
    </div>
  </template>
  
  <script setup>
  import { onMounted} from 'vue'
  import * as Cesium from 'cesium'
  console.log(Cesium);
  onMounted(()=>{
    // token
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
    // viewer所有api的开始
    const viewer = new Cesium.Viewer('cesiumContent',{})
    // 实体 Entity
    viewer.entities.add({
      position:new Cesium.Cartesian3.fromDegrees(120,30),
      billboard:{
        show:true,
        image:'/src/assets/iiiiii.png',
        scale:0.1
      }
    })
    // viewer.zoomTo(point)
  })
  </script>
  
  <style>
  #cesiumContent{
    width:100vw;
    height:100vh;
    overflow: hidden;
  }
  </style>

文本 label

在这里插入图片描述

<template>
  <div id="cesiumContent">
    
  </div>
</template>

<script setup>
import { onMounted} from 'vue'
import * as Cesium from 'cesium'
console.log(Cesium);
onMounted(()=>{
  // token
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
  // viewer所有api的开始
  const viewer = new Cesium.Viewer('cesiumContent',{})
  // 实体 Entity
  viewer.entities.add({
    position:new Cesium.Cartesian3.fromDegrees(120,30),
    label:{
      text:'123123',
      font:'10px',
      fillColor:Cesium.Color.BLUE
    }
  })
  // viewer.zoomTo(point)
})
</script>

<style>
#cesiumContent{
  width:100vw;
  height:100vh;
  overflow: hidden;
  
}
</style>

线polyline

在这里插入图片描述

<template>
    <div id="cesiumContent">
      
    </div>
  </template>
  
  <script setup>
  import { onMounted} from 'vue'
  import * as Cesium from 'cesium'
  console.log(Cesium);
  onMounted(()=>{
    // token
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
    // viewer所有api的开始
    const viewer = new Cesium.Viewer('cesiumContent',{})
    viewer.entities.add({
      polyline:{
        positions: Cesium.Cartesian3.fromDegreesArray([120,20,120,30,120,40]),
        width:5,
        material:Cesium.Color.BLUE
      }
    })
    // viewer.zoomTo(point)
  })
  </script>
  
  <style>
  #cesiumContent{
    width:100vw;
    height:100vh;
    overflow: hidden;
  }
  </style>

面polygon

在这里插入图片描述

<template>
    <div id="cesiumContent">
      
    </div>
  </template>
  
  <script setup>
  import { onMounted} from 'vue'
  import * as Cesium from 'cesium'
  console.log(Cesium);
  onMounted(()=>{
    // token
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
    // viewer所有api的开始
    const viewer = new Cesium.Viewer('cesiumContent',{})
    viewer.entities.add({
      polygon:{
        hierarchy:{
          positions:Cesium.Cartesian3.fromDegreesArray([120,20,128,30,120,40])
        },
        material:Cesium.Color.BLUE,
        height:100000,
        // extrudedHeight:200000,
        // outline:true,
        // outlineColor:Cesium.Color.WHITE,
        // fill:false
      }
    })
    // viewer.zoomTo(point)
  })
  </script>
  
  <style>
  #cesiumContent{
    width:100vw;
    height:100vh;
    overflow: hidden;
  }
  </style>

面还可以拉高成立体

  **extrudedHeight:200000,
  outline:true,
  outlineColor:Cesium.Color.WHITE,
  fill:false**

在这里插入图片描述

<template>
  <div id="cesiumContent">
    
  </div>
</template>

<script setup>
import { onMounted} from 'vue'
import * as Cesium from 'cesium'
console.log(Cesium);
onMounted(()=>{
  // token
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
  // viewer所有api的开始
  const viewer = new Cesium.Viewer('cesiumContent',{})
  viewer.entities.add({
    polygon:{
      hierarchy:{
        positions:Cesium.Cartesian3.fromDegreesArray([120,20,128,30,120,40])
      },
      material:Cesium.Color.BLUE,
      height:100000,
      extrudedHeight:200000,
      outline:true,
      outlineColor:Cesium.Color.WHITE,
      fill:false
    }
  })
  // viewer.zoomTo(point)
})
</script>

<style>
#cesiumContent{
  width:100vw;
  height:100vh;
  overflow: hidden;
}
</style>

盒子 box

在这里插入图片描述

<template>
    <div id="cesiumContent">
      
    </div>
  </template>
  
  <script setup>
  import { onMounted} from 'vue'
  import * as Cesium from 'cesium'
  console.log(Cesium);
  onMounted(()=>{
    // token
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
    // viewer所有api的开始
    const viewer = new Cesium.Viewer('cesiumContent',{})
    const box = viewer.entities.add({
      position:Cesium.Cartesian3.fromDegrees(100,20,1000),
      box:{
        dimensions:new Cesium.Cartesian3(2000,2000,2000),
        material:Cesium.Color.BLUE
      }
    })
    viewer.zoomTo(box)
  })
  </script>
  
  <style>
  #cesiumContent{
    width:100vw;
    height:100vh;
    overflow: hidden;
  }
  </style>