dial

src/examples/CodeMap.js

@@ -31,6 +31,7 @@ import vueCodeJingweiNetwork3D from '@/examples/sceneSet/jingweiNetwork3D/jingwe
 import vueCodeSceneInfo from '@/examples/sceneSet/sceneInfo/sceneInfo.vue?raw'
 import vueCodeSceneScreenshot from '@/examples/sceneSet/sceneScreenshot/sceneScreenshot.vue?raw'
 import vueCodeJingweiNetwork2D from '@/examples/sceneSet/jingweiNetwork2D/jingweiNetwork2D.vue?raw'
+import vueCodeDial from '@/examples/sceneSet/dial/dial.vue?raw'
 import vueCodeCircularSpaceGrid from '@/examples/sceneSet/circularSpaceGrid/circularSpaceGrid.vue?raw'
 import vueCodeRectangularSpaceGrid from '@/examples/sceneSet/rectangularSpaceGrid/rectangularSpaceGrid.vue?raw'
 import vueCodeEarthCoordinate from '@/examples/sceneSet/earthCoordinate/earthCoordinate.vue?raw'
@@ -82,6 +83,7 @@ const vueCodeMap = {
     场景信息: vueCodeSceneInfo,
     场景截图: vueCodeSceneScreenshot,
     经纬网络2D: vueCodeJingweiNetwork2D,
+    刻度盘: vueCodeDial,
     圆形空间网格: vueCodeCircularSpaceGrid,
     矩形空间网格: vueCodeRectangularSpaceGrid,
     地球坐标系: vueCodeEarthCoordinate,

src/examples/FunctionMap.js

@@ -31,6 +31,7 @@ import functionCodeJingweiNetwork3D from '@/examples/sceneSet/jingweiNetwork3D/j
 import functionCodeSceneInfo from '@/examples/sceneSet/sceneInfo/sceneInfo-function.js?raw'
 import functionCodeSceneScreenshot from '@/examples/sceneSet/sceneScreenshot/sceneScreenshot-function.js?raw'
 import functionCodeJingweiNetwork2D from '@/examples/sceneSet/jingweiNetwork2D/jingweiNetwork2D-function.js?raw'
+import functionCodeDial from '@/examples/sceneSet/dial/dial-function.js?raw'
 import functionCodeCircularSpaceGrid from '@/examples/sceneSet/circularSpaceGrid/circularSpaceGrid-function.js?raw'
 import functionCodeRectangularSpaceGrid from '@/examples/sceneSet/rectangularSpaceGrid/rectangularSpaceGrid-function.js?raw'
 import functionCodeEarthCoordinate from '@/examples/sceneSet/earthCoordinate/earthCoordinate-function.js?raw'
@@ -81,6 +82,7 @@ const functionCodeMap = {
     场景信息: functionCodeSceneInfo,
     场景截图: functionCodeSceneScreenshot,
     经纬网络2D: functionCodeJingweiNetwork2D,
+    刻度盘: functionCodeDial,
     圆形空间网格: functionCodeCircularSpaceGrid,
     矩形空间网格: functionCodeRectangularSpaceGrid,
     地球坐标系: functionCodeEarthCoordinate,

src/examples/sceneSet/dial/dial-function.js

+import { ref } from 'vue';
+let viewer
+export var bei = ref(1)
+export var timetext = ref('')
+export function addDial() {
+    const script = document.createElement('script');
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
+    script.onload = () => {
+        window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
+        viewer = new window.Cesium.Viewer('cesiumContainer', {
+                animation: false,
+                baseLayerPicker: false,
+                fullscreenButton: false,
+                vrButton :false,
+                geocoder:false,
+                homeButton:false,
+                infoBox:false,
+                sceneModePicker:false,
+                selectionIndicator:false,
+                timeline:true,
+                navigationHelpButton:false,
+        });
+      
+
+
+         // 格式化时间轴
+        viewer.timeline.makeLabel = function (date) {
+        const julianDT = new Cesium.JulianDate();
+    Cesium.JulianDate.addHours(date, 8, julianDT);
+    var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);
+
+    let hour = gregorianDT.hour + "";
+    let minute = gregorianDT.minute + "";
+    let second = gregorianDT.second + "";
+    timetext.value = `${gregorianDT.year}年${gregorianDT.month}月${gregorianDT.day
+      }日${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(
+        2,
+        "0"
+      )}`
+
+    return `${gregorianDT.year}年${gregorianDT.month}月${gregorianDT.day
+      }日${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(
+        2,
+        "0"
+      )}`;
+  };
+
+
+    };
+    document.head.appendChild(script);
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
+    document.head.appendChild(link);
+}
+export function forward() {
+  let t = viewer.clockViewModel.multiplier;
+  viewer.clockViewModel.multiplier = Math.abs(t);
+}
+var flag = false;
+export function start() {
+   flag = !(flag);
+  if(flag==true)
+    viewer.clock.shouldAnimate = true;
+  else
+    viewer.clock.shouldAnimate = false;
+}
+export function back() {
+  let t = viewer.clockViewModel.multiplier;
+  viewer.clockViewModel.multiplier = -Math.abs(t);
+}
+export function multiplier() {
+  viewer.clockViewModel.multiplier *= 2;
+  bei.value = viewer.clockViewModel.multiplier
+}
+
+export function divide() {
+  viewer.clockViewModel.multiplier /= 2;
+  bei.value = viewer.clockViewModel.multiplier
+}
+export function reset() {
+  viewer.clock.currentTime = viewer.clock.startTime;
+}
+

src/examples/sceneSet/dial/dial.vue

+<template>
+  <div id="cesiumContainer" class="cesium-container"></div>
+  <div class="time">
+    <img src="https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/time.png"
+      style="width: 100%; height: 100%;">
+  </div>
+  <div>
+    <button class="button1" @click="forward">▶</button>
+    <button class="button2" v-on:click="start">◼</button>
+    <button class="button3" v-on:click="back">◀</button>
+    <button class="button4" v-on:click="multiplier">×2</button>
+    <button class="button5" v-on:click="divide">×-2</button>
+    <button class="button6" v-on:click="reset">⚪</button>
+    <p class="bei">{{ bei }}X</p>
+    <p class="time-text"> {{ timetext }}</p>
+  </div>
+</template>
+<script setup>
+import { onMounted,ref } from 'vue';
+import { addDial, divide, multiplier, back, start, forward, reset } from './function';
+import bei from './function';
+import timetext from './function';
+onMounted(() => {
+  addDial()
+});
+
+</script>
+
+<style>
+.cesium-container {
+width: 100%;
+height: 100vh;
+}
+.time {
+  width: 180px;
+  height: 100px;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+}
+
+.button1 {
+  position: absolute;
+  top: 738px;
+  left: 120px;
+}
+
+.button2 {
+  position: absolute;
+  top: 738px;
+  left: 85px;
+}
+
+.button3 {
+  position: absolute;
+  top: 738px;
+  left: 50px;
+}
+
+.button4 {
+  position: absolute;
+  top: 738px;
+  left: 150px;
+}
+
+.button5 {
+  position: absolute;
+  top: 738px;
+  left: 10px;
+}
+
+.button6 {
+
+  position: absolute;
+  top: 650px;
+  left: 10px;
+}
+
+.bei {
+  color: aliceblue;
+  font-size: 15px;
+  position: absolute;
+  top: 677px;
+  left: 80px;
+}
+
+.time-text {
+  color: aliceblue;
+  font-size: 15px;
+  position: absolute;
+  top: 700px;
+  left: 40px;
+}
+</style>
\ No newline at end of file

src/views/ElementMap.js

@@ -112,6 +112,10 @@ export const elementSceneSetMap = {
         title: '经纬网络2D',
         pngUrl: '/src/assets/JingweiNetwork2D.png'
     },
+    刻度盘: {
+        title: '刻度盘',
+        pngUrl: '/src/assets/JingweiNetwork2D.png'
+    },
     圆形空间网格: {
         title: '圆形空间网格',
         pngUrl: '/src/assets/CircularSpaceGrid.png'