easy-three-utils 0.0.336 → 0.0.338

package/cesium/components/index.ts

@@ -0,0 +1,13 @@
+import Timeline from './react/Timeline/index.tsx'
+
+const components = {
+    vue: {
+    },
+    react: {
+        Timeline
+    }
+}
+
+export {
+    components
+}

package/cesium/components/react/Timeline/index.tsx

@@ -4,15 +4,15 @@ import * as Cesium from "cesium";
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
-import { viewer } from '../../../index'
-
 import Styles from './index.module.less'
 
-dayjs.extend(duration);
+dayjs.extend(duration)
 
 const Timeline: React.FC<{
-    cesiumStatus: boolean;
+    getViewer: () => Cesium.Viewer
 }> = (props) => {
+
+    const { getViewer } = props
     const [percent, setPercent] = useState(0)
 
     const theme = {
@@ -44,45 +44,45 @@ const Timeline: React.FC<{
     }
 
     const addViewerClockEvent = () => {
-        viewer.clock.onTick.addEventListener(setClockEvent)
+        getViewer().clock.onTick.addEventListener(setClockEvent)
     }
 
     const removeViewerClockEvent = () => {
-        viewer.clock.onTick.addEventListener(setClockEvent)
+        getViewer().clock.onTick.addEventListener(setClockEvent)
     }
 
     const onSliderChange = (value: number) => {
         setPercent(() => value);
         const totalSeconds = Cesium.JulianDate.secondsDifference(
-            viewer.clock.stopTime,
-            viewer.clock.startTime
-        );
+            getViewer().clock.stopTime,
+            getViewer().clock.startTime
+        )
         const newTime = Cesium.JulianDate.addSeconds(
-            viewer.clock.startTime,
+            getViewer().clock.startTime,
             (value / 100) * totalSeconds,
             new Cesium.JulianDate()
-        );
-        viewer.clock.currentTime = newTime;
+        )
+        getViewer().clock.currentTime = newTime;
     }
 
     type TContronType = 'pause' | 'play' | 'stop'
     const control = {
         play: () => {
-            viewer.clock.shouldAnimate = true
+            getViewer().clock.shouldAnimate = true
         },
         pause: () => {
-            viewer.clock.shouldAnimate = false
+            getViewer().clock.shouldAnimate = false
         },
         stop: () => {
-            viewer.clock.currentTime = viewer.clock.startTime
-            viewer.clock.shouldAnimate = false
+            getViewer().clock.currentTime = getViewer().clock.startTime
+            getViewer().clock.shouldAnimate = false
         }
     }
 
     const [totalTime, setTotalTime] = useState('00:00:00')
     const [currentTime, setCurrentTime] = useState('00:00:00')
     const initTimeDisplay = () => {
-        const seconds = viewer.clock.stopTime.secondsOfDay - viewer.clock.startTime.secondsOfDay
+        const seconds = getViewer().clock.stopTime.secondsOfDay - getViewer().clock.startTime.secondsOfDay
         const timeDuration = dayjs.duration(seconds, 'seconds')
         const formattedTime = timeDuration.format('HH:mm:ss')
         setTotalTime(() => formattedTime)
@@ -90,15 +90,13 @@ const Timeline: React.FC<{
 
     useEffect(() => {
 
-        if (props.cesiumStatus) {
-            addViewerClockEvent()
-            initTimeDisplay()
-        }
+        addViewerClockEvent()
+        initTimeDisplay()
 
         return () => {
             removeViewerClockEvent()
         }
-    }, [props.cesiumStatus])
+    }, [])
 
     return (
         <ConfigProvider theme={{
@@ -121,7 +119,7 @@ const Timeline: React.FC<{
                     <div className={Styles['control-btn']}>
                         {
                             (['pause', 'play', 'stop'] as TContronType[]).map(item =>
-                                <img key={item} onClick={() => control[item]()} src={require(`/image/${item}.png`)} />
+                                <img key={item} onClick={() => control[item]()} src={new URL(`../image/${item}.png`, import.meta.url).href} />
                             )
                         }
                     </div>

package/cesium/index.ts

@@ -15,9 +15,7 @@ type TCesiumUtilsType = {
   measure: ReturnType<typeof hooks.useMeasure>;
 }
 
-let viewer: Cesium.Viewer;
 let config;
-
 const defineCesiumConfig = (cesiumConfig) => {
   config = cesiumConfig
 }
@@ -25,6 +23,7 @@ const defineCesiumConfig = (cesiumConfig) => {
 const useCesium = () => {
 
   let handler: Cesium.ScreenSpaceEventHandler;
+  let viewer: Cesium.Viewer;
 
   const updateController = (viewer: Cesium.Viewer) => {
     viewer.scene.screenSpaceCameraController.tiltEventTypes = [
@@ -117,6 +116,10 @@ const useCesium = () => {
     }) as Cesium.ScreenSpaceEventHandler.MotionEventCallback, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
   }
 
+  const getViewer = () => {
+    return viewer
+  }
+
   const dispose = (viewer: Cesium.Viewer) => {
     handler && handler.destroy()
 
@@ -263,6 +266,7 @@ const useCesium = () => {
   return {
     load,
     dispose,
+    getViewer,
     getCamera,
     setCamera,
     loadTiles,
@@ -275,8 +279,6 @@ const useCesium = () => {
 export {
   useCesium,
 
-  viewer,
-
   defineCesiumConfig,
   cesiumConfigDict
 }