point封装

src/App.vue

@@ -15,10 +15,18 @@ import raotaiyang from './components/raotaiyng.vue'
 import qq from './components/qq.vue'
 import setl from './components/setl.vue'
 import xyz from './components/xyz.vue'
+import shiye from './components/shiye.vue'
+
+
+//封装
+import point from './encapsulation/point.vue'
 
 export default {
   name: 'app',
-  components: { boom, demo ,draw,moon,fire,selt,sun,camera,dail,baozha,kedupan,raotaiyang,qq,setl,xyz}
+  components: {
+    boom, demo, draw, moon, fire, selt, sun, camera, dail, baozha, kedupan, raotaiyang, qq, setl, xyz, shiye,
+    point
+  }
 }
 </script>
 
@@ -36,8 +44,13 @@ export default {
 <!-- <dail/> -->
 <!-- <raotaiyang/> -->
 <!-- <qq/> -->
-<xyz/>
+<!-- <xyz/> -->
 <!-- <setl/> -->
+<!-- <shiye/> -->
+
+
+<point/>
+
 </template>
 
 <style scoped>

src/components/shiye.vue

+<template>
+  <div id="cesiumContainer" class="all"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import * as Cesium from 'cesium'
+
+
+onMounted(() => {
+  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
+  const viewer = new Cesium.Viewer("cesiumContainer", {
+  })
+
+
+  // 计算圆柱体的中心点
+  const position = Cesium.Cartesian3.fromDegrees(-70.001, 30.001, 20000);
+
+  // 设置圆柱体的朝向为水平
+  const heading = Cesium.Math.toRadians(0.0);  // 朝向（水平）z
+  const pitch = Cesium.Math.toRadians(0.0); // 俯仰角（垂直）y
+  const roll = Cesium.Math.toRadians(0.0);    // 滚转角（水平）x
+
+  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
+  const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
+
+  let cylinder_slices4_top0 = viewer.entities.add({
+    name: "cylinder_slices4_top0",
+    position: position,
+    orientation: orientation,
+    cylinder: {
+      length: 1000000,
+      topRadius: 200.0,
+      bottomRadius: 200000.0,
+      material: Cesium.Color.YELLOW,
+      outline: true,
+      outlineWidth: 3.0,
+      slices: 4,
+    },
+  });
+
+
+//   let lon = 27.13
+//   let lat = 22.92
+//   let xyz = Cesium.Cartesian3.fromDegrees(lon, lat)
+//   console.log(lon,lat)
+// console.log(xyz)
+
+
+
+
+
+
+
+})
+
+
+
+</script>
+
+
+
+<style>
+.all {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  width: 100%;
+  height: 100%
+}
+
+.cesium-viewer-bottom {
+  display: none;
+}
+
+button {
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  z-index: 88;
+}
+</style>

src/encapsulation/point.vue

+<template>
+  <div id="cesiumContainer" class="all"></div>
+  <div class="absolute top-2000 left-20">
+    <button @click="delete1">删除</button>
+  </div>
+  <button @click="update" class="absolute top-20 left-2">设置点的属性</button>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import * as Cesium from 'cesium'
+import  Point  from '/src/js/point.js'
+let entity
+onMounted(() => {
+  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
+  const viewer = new Cesium.Viewer("cesiumContainer", {
+  })
+  var start = new Cesium.JulianDate.fromDate(new Date());
+  start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());
+  let point = {
+    id: "point",
+    position: Cesium.Cartesian3.fromDegrees(-70, 30),
+    alpha: 0.3,
+    name: 'i am point',
+    nameSize: 20,
+    nameOffset: [20, 20],
+    modelUrl: '/src/model/moon1.glb',
+    modelVisible: true,
+    moduleScale: 20000,
+    }
+
+  entity = new Point(viewer, point)
+  console.log(entity.getPosition(start))
+
+})
+function delete1() {
+  entity.removeFromScene()
+}
+function update() {
+  let point = {
+    position: {
+      longitude: -80,
+      latitude: 30,
+      height: 1000 // 设置高度，如果需要的话
+    },
+    color: Cesium.Color.fromBytes(0, 255, 0),
+    label: {
+      text: 'Sample Label',
+      font: '16px Arial',
+      fillColor: '#FF0000', // 红色
+      pixelOffset: {
+        x: 10,
+        y: 20
+      }
+    }
+  }
+  entity.setProperty(point)
+}
+
+
+</script>
+
+
+
+<style>
+.all {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  width: 100%;
+  height: 100%
+}
+
+.cesium-viewer-bottom {
+  display: none;
+}
+
+button {
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  z-index: 88;
+}
+</style>

src/js/point.js

+import * as Cesium from 'cesium'
+/**
+ * @class 基于Entity.Point封装的点
+ * @classdesc
+ */
+class Point {
+  /**
+   * 点的构造函数
+   * @param {Object} map - viewer对象
+   * @param {String} [id] - 点对象的ID
+   * @param {Array} [position] - 点的位置信息
+   * @param {Boolean} [visible=true] - 点的显隐性
+   * @param {String} [color='rgb(255,0,0)'] - 点的颜色
+   * @param {Number} [alpha=1.0] - 点的不透明度
+   * @param {String} [name='point'] - 点的名称
+   * @param {Boolean} [nameVisible=true] - 点名称的可见性
+   * @param {Number} [nameSize=14] - 点名称的大小
+   * @param {Array} [nameOffset=[10,0]] - 点名称的偏移
+   * @param {String} [modelUrl] - 模型地址
+   * @param {Boolean} [modelVisible=false] - 模型显隐性
+   * @param {Number} [modelScale=1] - 模型缩放尺寸
+   * @param {Number} [heading=0] - 方位角
+   * @param {Number} [pitch=0] - 俯仰角
+   * @param {Number} [roll=0] - 滚动角
+   * @param {String} [markUrl] - 标记模型地址
+   * @param {String} [markScale] - 标记大小
+   * @param {String} [markVisible] - 标记显隐性
+   */
+  constructor(map, options = {}) {
+    const viewer = map
+    this.entityCollection = viewer.entities; 
+    const POINT = {
+      id: null,
+      position: null,
+      visible: true,
+      pixelSize:10,
+      color: Cesium.Color.fromBytes(255,0,0),
+      alpha: 1.0,
+      name: 'point',
+      nameVisible: true,
+      nameSize: 14,
+      nameOffset: [10, 10],
+      modelUrl: '',
+      modelVisible: false,
+      modelScale: 1,
+      heading: 0,
+      pitch: 0,
+      roll: 0,
+      markUrl: '',
+      markScale: 10,
+      markVisible:false,
+    };
+    const finalOptions = { ...POINT, ...options };
+    const { position, id, ...pointOptions } = finalOptions;
+
+    this.entity = viewer.entities.add({
+      id: id,
+      position: position,
+      point: pointOptions.visible ? {
+        pixelSize: pointOptions.pixelSize,
+        color: Cesium.Color.clone(pointOptions.color).withAlpha(pointOptions.alpha)
+      }: undefined,
+      label: pointOptions.nameVisible ? {
+        text: pointOptions.name,
+        font: `${pointOptions.nameSize}px sans-serif`,
+        fillColor: Cesium.Color.WHITE,
+        pixelOffset: new Cesium.Cartesian2(...pointOptions.nameOffset),
+      } : undefined,
+      model: pointOptions.modelVisible ? {
+        uri: pointOptions.modelUrl,
+        scale: pointOptions.modelScale,
+        minimumPixelSize: 640,
+        maximumScale: 20000,
+        modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
+          position,
+          new Cesium.HeadingPitchRoll(
+            Cesium.Math.toRadians(pointOptions.heading),
+            Cesium.Math.toRadians(pointOptions.pitch),
+            Cesium.Math.toRadians(pointOptions.roll)
+          )
+        ),
+      } : undefined,
+      billboard: pointOptions.markVisible ? {
+        image: pointOptions.markUrl,
+        scale: pointOptions.markScale
+      } : undefined
+    });
+  }
+
+  /**
+   * 获取查询时刻点所在位置
+   * @param {Cesium.JulianDate} time 查询时刻
+   * @returns {Cesium.Cartesian3} 点的位置
+   */
+  getPosition(time) {
+    if (!this.entity || !this.entity.position) {
+      throw new Error('点实体或位置未定义');
+    }
+    const position = this.entity.position.getValue(time);
+     return position;
+  }
+
+  /**
+   * 设置点的属性
+   *  @param {Object} options 点的属性
+   */
+  setProperty(options) {
+    if (!this.entity) {
+      throw new Error('点实体未定义');
+    }
+  if (options.position) {
+    this.entity.position = Cesium.Cartesian3.fromDegrees(options.position.longitude, options.position.latitude,      options.position.height || 0);
+  }
+  if (options.color) {
+    this.entity.point.color = options.color;
+  }
+  if (options.label) {
+    this.entity.label = new Cesium.LabelGraphics({
+      text: options.label.text || '',  // 默认为空字符串
+      font: options.label.font || '14px sans-serif',  // 默认字体
+      fillColor: Cesium.Color.fromCssColorString(options.label.fillColor || '#FFFFFF'),  // 默认白色
+      pixelOffset: new Cesium.Cartesian2(
+        options.label.pixelOffset ? options.label.pixelOffset.x : 0,
+        options.label.pixelOffset ? options.label.pixelOffset.y : 0
+      )
+    });
+  }
+  }
+  
+  /**
+   * 从场景中移除点
+   */
+  removeFromScene() {
+  if (!this.entity) {
+    throw new Error('点实体未定义');
+  }
+  this.entityCollection.remove(this.entity);
+  this.entity = null;
+  }
+}
+export default Point;
\ No newline at end of file