定義簡(jiǎn)介

Entity是Cesium中的一個(gè)重要概念御毅，它代表了在三維場(chǎng)景中的實(shí)體對(duì)象。這些實(shí)體可以是地球上的點(diǎn)嘁字、線夫椭、面掸掸，也可以是飛機(jī)、汽車蹭秋、船舶等動(dòng)態(tài)物體扰付。

屬性

Entity具有豐富的屬性，包括位置仁讨、方向羽莺、速度、外觀等洞豁。通過設(shè)置這些屬性盐固，開發(fā)者可以精確地控制實(shí)體在三維場(chǎng)景中的表現(xiàn)形式。每一個(gè)Entity都存在一個(gè)id丈挟，name刁卜，position，orientation曙咽，還有與之關(guān)聯(lián)的實(shí)體蛔趴。

關(guān)聯(lián)實(shí)體

1.png

相關(guān)Entity的方法實(shí)例

添加屬性

viewer.entities.add()

刪除指定id的實(shí)體

viewer.entities.removeById(1)
這個(gè)id就是實(shí)體entity的id

刪除全部實(shí)體

viewer.entities.removeAll()

實(shí)體中材質(zhì)（material）

Material在Cesium中負(fù)責(zé)定義實(shí)體的外觀特性，如顏色例朱、透明度孝情、紋理等。

1. ColorMaterial（顏色材質(zhì)）： 允許開發(fā)者定義實(shí)體的顏色洒嗤，從而為實(shí)體添加生動(dòng)的色彩箫荡。

entity.material = new Cesium.ColorMaterialProperty(Cesium.Color.RED);

2. ImageMaterial（圖片材質(zhì)）： 允許將圖片應(yīng)用到實(shí)體上，以展示詳細(xì)的紋理渔隶。

entity.material = new Cesium.ImageMaterialProperty({
  image: 'path/to/texture.png',
});

3. CheckerboardMaterial（棋盤格材質(zhì)）： 創(chuàng)建一個(gè)有趣的棋盤格效果羔挡，使實(shí)體更具視覺吸引力。

entity.material = new Cesium.CheckerboardMaterialProperty({
  evenColor: Cesium.Color.WHITE,
  oddColor: Cesium.Color.BLACK,
  repeat: new Cesium.Cartesian2(8, 8),
});

具體實(shí)現(xiàn)代碼

<template>
 <div class="hello">
    <div id="cesiumContainer"></div>
    <section class="mapList">
      <header class="mapList-header">Entity</header>
      <article class="mapList-center">
        <div class="mapList-center-list">
          <el-button type="primary" @click="handelParentShow">加載Box</el-button>
          <el-button type="primary" @click="handelParentHide">隱藏Box</el-button>
        </div>
        <div class="mapList-center-list">
          <el-button type="primary" @click="handelTrajectoryShow">加載Model</el-button>
          <el-button type="primary" @click="handelTrajectoryHide">關(guān)閉Model</el-button>
        </div>
        <div class="mapList-center-list">
          <el-button type="primary" @click="handelPolygonShow">加載Polygon</el-button>
          <el-button type="primary" @click="handelPolygonHide">關(guān)閉Polygon</el-button>
        </div>
        <div class="mapList-center-list">
          <el-button type="primary" @click="handelWallShow">加載Wall</el-button>
          <el-button type="primary" @click="handelWallHide">關(guān)閉Wall</el-button>
        </div>
        <div class="mapList-center-list">
          <el-button type="primary" @click="handelLabelShow">加載標(biāo)簽</el-button>
          <el-button type="primary" @click="handelLabelHide">關(guān)閉標(biāo)簽</el-button>
        </div>
        <div class="mapList-center-list">
          <el-button type="primary" @click="handel3DTilesShow">加載3DTiles</el-button>
          <el-button type="primary" @click="handel3DTilesHide">關(guān)閉3DTiles</el-button>
        </div>
      </article>
    </section>
  </div>
</template>
<script> 
import { onMounted } from "vue"; 
const Cesium = window.Cesium; 
export default {
 name: "CesiumViewer", 
 props: {},
 setup() {
   onMounted(() => {
     try {
       initMap(Cesium);
     } catch (error) {
       console.log(error);
     }
   });
   /**
     * @description: 加載Box
     * @return {*}
     */
    const handelParentShow = ()=>{ 
      for (let i=0;i<3;i++){
      const height = 100.0 + (200.0 * i);
      window.viewer.entities.add({
              id:i,
              parent : new Cesium.Entity(),
              position : Cesium.Cartesian3.fromDegrees(104.1, 30.6, height),
              box : {
                  dimensions : new Cesium.Cartesian3(90.0, 90.0, 90.0),
                  material : Cesium.Color.fromRandom({alpha : 1.0})
              }
          })
      }
    }
    /**
     * @description: 隱藏Box
     * @return {*}
     */   
    const handelParentHide = () =>{
      window.viewer.entities.removeAll()
    } 
    /* const handelParentHide = ()=>{ 
      window.viewer.entities.removeById(1)  
    } */
   /**
    * @description: 加載軌跡動(dòng)畫
    * @return {*}
    */    
   const handelTrajectoryShow = () =>{
    /* const position = Cesium.Cartesian3.fromDegrees(104.1, 30.6, 200)
    const property = new Cesium.SampledPositionProperty();
    console.log(property);
    const start = Cesium.JulianDate.fromDate(new Date());
    property.addSample(start.clone(), position)
    window.viewer.entities.add(new Cesium.Entity({
            orientation: new Cesium.VelocityOrientationProperty(property),
            model: new Cesium.ModelGraphics({
                uri: '/static/SampleData/gltf/坦克/gltf2.gltf' 
            }),
            position: position,
        })); */
    const positions = new Cesium.SampledPositionProperty();
    const startTime = window.viewer.clock.currentTime;
    positions.addSample(startTime, Cesium.Cartesian3.fromDegrees(104.1, 30.6, 800));
    const stopTime = Cesium.JulianDate.addSeconds(startTime,30, new Cesium.JulianDate());
    positions.addSample(stopTime, Cesium.Cartesian3.fromDegrees(104.11, 30.6, 800))
    const position = Cesium.Cartesian3.fromDegrees(104.1, 30.6, 800) 
    // 設(shè)置飛翔角度
    const headingPitchRoll = new Cesium.HeadingPitchRoll(0, Cesium.Math.toRadians(5), 0);
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, headingPitchRoll);
    window.viewer.entities.add({
            id: "tk",
            availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                    start: startTime,
                    stop: stopTime
            })]),
            position: positions,
            orientation:orientation,
            model:new Cesium.ModelGraphics({
              uri: '/static/SampleData/gltf/坦克/gltf2.gltf', 
              silhouetteColor: Cesium.Color.RED,
              silhouetteSize:2.0,
              color:Cesium.Color.RED,
            }), 
            path: {
              resolution: 0.2,
              material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 0.1,
                color: Cesium.Color.RED
              }),
              width: 5
            }
        });
    window.viewer.trackedEntity = window.viewer.entities.getById("tk");
   }
   /**
    * @description: 關(guān)閉軌跡動(dòng)畫
    * @return {*}
    */   
   const handelTrajectoryHide = () =>{
     window.viewer.entities.removeById('tk') 
   }
   /**
    * @description: 加載Polygon
    * @return {*}
    */  
   const handelPolygonShow = () =>{ 
   /*  let range = [121.1911,31.53762,121.1921,30.87844,121.9246,30.83999,121.8824,31.34811];
    let positions = Cesium.Cartesian3.fromDegreesArray(range); 
    let holeRange1 = [121.2671,31.4566,121.2382,31.3481,121.3659,31.3934]; 
    let hole1 = { 
        positions: Cesium.Cartesian3.fromDegreesArray(holeRange1) 
    };  */
    window.viewer.entities.add({
         id:'Polygon',
         parent : new Cesium.Entity(),
         position : Cesium.Cartesian3.fromDegrees(112, 40, 300),
         /* polygon: {
          hierarchy: { 
              positions,
              holes: [hole1]  
          },
          height:500,
          extrudedHeight:500,
          material: new Cesium.ImageMaterialProperty ({
                          image:"static/SampleData/pbr/MaterialJson/M_Brick_Clay_Old_BaseTexMap.png"
                      }),
          outline:true, 
          outlineColor:Cesium.Color.WHITE,
          outlineWidth:2.0
        } */
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(
            [104.1, 30.6,104.2, 30.6,104.2, 30.7,104.1, 30.7]
          )),
          height:300,
          extrudedHeight:100,
          material: new Cesium.ImageMaterialProperty ({
                          image:"static/SampleData/pbr/MaterialJson/MI_Pebble01_BaseTexMap.png"
                      }),
          outline:true, 
          outlineColor:Cesium.Color.WHITE,
          outlineWidth:2.0
        }
     }) 
    window.viewer.flyTo(window.viewer.entities.getById("Polygon"));
   }
   /**
    * @description: 關(guān)閉Polygon
    * @return {*}
    */   
   const handelPolygonHide = () =>{
     window.viewer.entities.removeById('Polygon') 
   }
   /**
    * @description: 加載wall
    * @return {*}
    */   
   const handelWallShow = ()=>{
    window.viewer.entities.add({
        id: "Wall",
        position : Cesium.Cartesian3.fromDegrees(112, 40, 300),
        wall:{
            positions:Cesium.Cartesian3.fromDegreesArray([112, 40, 112.001, 40]),
            maximumHeights:[200,200],
            material: new Cesium.ImageMaterialProperty ({
                          image:"static/SampleData/pbr/MaterialJson/M_Brick_Clay_Old_BaseTexMap.png"
                      }),
        },
        shadows:true 
    })
    window.viewer.flyTo(window.viewer.entities.getById("Wall"));
   }
   /**
    * @description: 關(guān)閉Wall
    * @return {*}
    */   
   const handelWallHide = () =>{
     window.viewer.entities.removeById('Wall') 
   }
   /**
    * @description: 加載標(biāo)簽
    * @return {*}
    */   
   const handelLabelShow =()=>{
    window.viewer.entities.add({
        id: "label",
        position : Cesium.Cartesian3.fromDegrees(104.1, 30.6, 500),
        label : {
          text : "DIST",
          font:"48px sans-serif",
          style:Cesium.LabelStyle.FILL_AND_OUTLINE,
          fillColor:Cesium.Color.RED,
          outlineColor:Cesium.Color.YELLOW,
          outlineWidth:2.0,
          showBackground:true,
          backgroundColor:new Cesium.Color(255, 255, 0, 0.8),
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin:Cesium.VerticalOrigin.BOTTOM,
          translucencyByDistance:new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e7, 0.0),
          pixelOffset : new Cesium.Cartesian2(0.0, -20),
          pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.0),
          disableDepthTestDistance:Number.POSITIVE_INFINITY 
        }, 
    })
   }
   /**
    * @description: 關(guān)閉標(biāo)簽
    * @return {*}
    */   
   const handelLabelHide = () =>{
     window.viewer.entities.removeById('label') 
   }
   /**
    * @description: 
    * @return {*}
    */   
   const handel3DTilesShow=()=>{
      const tilesModel = window.viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
          url: "static/SampleData/Scene/testm3DTiles.json"
        })
      );
      tilesModel.readyPromise
        .then(currentModel => {
          // 定位到模型
          window.viewer.zoomTo(
            currentModel,
            new Cesium.HeadingPitchRange(
              0.5,
              -0.2,
              currentModel.boundingSphere.radius * 1.0
            )
          );
        })
        .otherwise(error => {
          console.log(error);
        });
   }
   /**
    * @description: 關(guān)閉kml
    * @return {*}
    */   
   const handel3DTilesHide=()=>{
    window.viewer.dataSources.removeAll()
   }
   return {
    handelParentShow,handelParentHide,
    handelTrajectoryShow,handelTrajectoryHide,
    handelPolygonShow,handelPolygonHide,
    handelWallShow,handelWallHide,
    handelLabelShow,handelLabelHide,
    handel3DTilesShow,handel3DTilesHide
  };
 },
};
/**
 * @description: 初始化球體
 * @param {*} Cesium
 * @return {*}
 */
const initMap = (Cesium) => {
  // alpha 默認(rèn)值為 false，與標(biāo)準(zhǔn) WebGL 默認(rèn)值 true 相比
  const viewer = new Cesium.Viewer("cesiumContainer", {  
    animation: false, // 是否顯示動(dòng)畫控件
    shouldAnimate: true,
    homeButton: false, // 是否顯示Home按鈕
    fullscreenButton: false, // 是否顯示全屏按鈕
    baseLayerPicker: false, // 是否顯示圖層選擇控件
    geocoder: false, // 是否顯示地名查找控件
    timeline: false, // 是否顯示時(shí)間線控件
    sceneModePicker: false, // 是否顯示投影方式控件
    navigationHelpButton: false, // 是否顯示幫助信息控件
    infoBox: false, // 是否顯示點(diǎn)擊要素之后顯示的信息
    scene3DOnly: false, // 每個(gè)幾何實(shí)例將只能以3D渲染以節(jié)省GPU內(nèi)存
    sceneMode: 3, // 初始場(chǎng)景模式 1 2D模式 2 2D循環(huán)模式 3 3D模式  Cesium.SceneMode
    fullscreenElement: document.body, // 全屏?xí)r渲染的HTML元素 暫時(shí)沒發(fā)現(xiàn)用處
    skyAtmosphere: false,// 關(guān)閉地球光環(huán)
    requestRenderMode: true, // 啟用請(qǐng)求渲染模式
    orderIndependentTranslucency: false, // 去掉大氣層黑圈
    contextOptions: {
      webgl: {
        alpha: true
      }
    },
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url:
        "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
    })
  });
  window.viewer = viewer
  /* // 獲取圖層集合
  const imageryLayers = viewer.imageryLayers;
  // 將圖像轉(zhuǎn)成圖層
  const UrlTemplate = new Cesium.UrlTemplateImageryProvider({
    url:
      "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
  });
  // 添加圖層
  imageryLayers.add(new Cesium.ImageryLayer(UrlTemplate)); */
  // 隱藏版權(quán)
  viewer._cesiumWidget._creditContainer.style.display = "none";
  const boundingSphere =new Cesium.BoundingSphere(
       new Cesium.Cartesian3.fromDegrees(104.1, 30.6, 800),
       1000
     );
  // 定位到初始位置
  // 將相機(jī)移到當(dāng)前視圖包含所提供的包圍球的位置婉弹。
  viewer.camera.flyToBoundingSphere(boundingSphere, {
    // 動(dòng)畫睬魂，定位到初始位置的過渡時(shí)間终吼，設(shè)置成0镀赌，就沒有動(dòng)畫
    duration: 0
  });
  // 隱藏版權(quán)
  viewer._cesiumWidget._creditContainer.style.display = "none";
  // 數(shù)據(jù)源集合
  viewer.dataSources.add(new Cesium.KmlDataSource.load('static/SampleData/kml/登頂四姑娘山三峰.kml'),
     {
         camera: viewer.scene.camera,
         canvas: viewer.scene.canvas
     });
}


</script>
<style scoped >
#cesiumContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-family: sans-serif;
}
.mapList{
   position: absolute;
   z-index: 2;
   width: 15rem;
   height: 100%;
   background-color: #fff;
   top: 0;
   left: 0;
   padding: 0.5rem;
}
.mapList-header{
  height: 3rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mapList-center-list{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
}
</style>