easy-three-utils 0.0.353 → 0.0.354

package/cesium/components/index.ts

@@ -1,6 +1,7 @@
 import Timeline from './react/Timeline/index.tsx'
 import TerrainLine from './react/TerrainLine/index.tsx'
 import ProFileEcharts from './react/ProFileEcharts/index.tsx'
+import SunshineLine from './react/SunshineLine/index.tsx'
 
 const components = {
     vue: {
@@ -8,7 +9,8 @@ const components = {
     react: {
         Timeline,
         TerrainLine,
-        ProFileEcharts
+        ProFileEcharts,
+        SunshineLine
     }
 }
 

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

@@ -0,0 +1,8 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+const BodyPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    return ReactDOM.createPortal(children, document.body);
+};
+
+export default BodyPortal;

package/cesium/components/react/SunshineLine/index.module.less

@@ -0,0 +1,50 @@
+.slider-box {
+    position: relative;
+    z-index: 2;
+    width: 360px;
+    padding: 10px;
+    background: rgba(6, 38, 68, 0.7);
+    border: solid 1px #26a1ff;
+    display: flex;
+    left: calc(50vw - 180px);
+
+    .left-content {
+        color: white;
+        font-size: 13px;
+        writing-mode: vertical-rl;
+        display: flex;
+        justify-content: center;
+        padding-right: 12px;
+    }
+
+    .right-content {
+        flex: 1;
+
+        .title {
+            color: white;
+            font-size: 13px;
+            padding: 5px 0;
+        }
+
+        .time-text {
+            color: white;
+            font-size: 12px;
+            display: flex;
+            justify-content: flex-end;
+            width: 98%;
+            margin-bottom: 11px;
+        }
+
+        .control-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            img {
+                padding: 0 12px;
+                cursor: pointer;
+            }
+        }
+    }
+
+}

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

@@ -0,0 +1,70 @@
+import * as Cesium from 'cesium'
+import { Slider, ConfigProvider } from "antd"
+import React, { useState, useEffect, useRef } from "react"
+import BodyPortal from "../Body"
+
+import Styles from './index.module.less'
+
+const SunshineLine: React.FC<{
+    getViewer: () => Cesium.Viewer
+}> = (props) => {
+
+    const { getViewer } = props
+    const [azimuth, setAzimuth] = useState(135)
+    const [elevation, setElevation] = useState(30)
+    const [intensity, setIntensity] = useState(2)
+
+    const theme = {
+        components: {
+            Slider: {
+                railBg: '#bfbfbf',
+                railHoverBg: '#bfbfbf',
+                trackBg: '#176fdbff'
+            }
+        }
+    }
+
+    useEffect(() => {
+        const az = Cesium.Math.toRadians(azimuth)
+        const el = Cesium.Math.toRadians(elevation)
+
+        const dir = new Cesium.Cartesian3(
+            Math.cos(el) * Math.sin(az),
+            Math.cos(el) * Math.cos(az),
+            Math.sin(el)
+        )
+
+        getViewer().scene.light = new Cesium.DirectionalLight({
+            direction: dir,
+            intensity,
+        });
+    }, [azimuth, elevation, intensity])
+
+
+    const sliderBoxRef = useRef(null)
+    useEffect(() => {
+        sliderBoxRef.current.style.bottom = `calc(-100vh + ${sliderBoxRef.current.clientHeight + 20}px)`
+    }, [])
+
+    return (
+        <BodyPortal>
+            <ConfigProvider theme={{
+                ...theme
+            }}>
+                <div ref={sliderBoxRef} className={Styles['slider-box']}>
+                    <div className={Styles['right-content']}>
+                        <div className={Styles['title']}>时间</div>
+                        <Slider min={0} max={360} value={azimuth} onChange={setAzimuth} />
+                        <div className={Styles['title']}>角度</div>
+                        <Slider min={0} max={180} value={elevation} onChange={setElevation} />
+                        <div className={Styles['title']}>强度</div>
+                        <Slider min={0} max={1} step={0.1} value={intensity} onChange={setIntensity} />
+                    </div>
+                </div>
+
+            </ConfigProvider>
+        </BodyPortal>
+    )
+}
+
+export default SunshineLine

package/cesium/components/react/TerrainLine/index.module.less

@@ -1,7 +1,6 @@
 .slider-box {
-    position: absolute;
+    position: relative;
     z-index: 2;
-    bottom: 0;
     width: 360px;
     padding: 10px;
     background: rgba(6, 38, 68, 0.7);
@@ -21,6 +20,12 @@
     .right-content {
         flex: 1;
 
+        .title {
+            color: white;
+            font-size: 13px;
+            padding: 5px 0;
+        }
+
         .time-text {
             color: white;
             font-size: 12px;

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

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Slider, ConfigProvider } from "antd";
 import * as Cesium from "cesium";
+import BodyPortal from "../Body";
 
 import Styles from './index.module.less'
 
@@ -26,27 +27,30 @@ const Timeline: React.FC<{
         getViewer().scene.verticalExaggeration = value
     }
 
+    const sliderBoxRef = useRef(null)
     useEffect(() => {
-        return () => {
-        }
+        sliderBoxRef.current.style.bottom = `calc(-100vh + ${sliderBoxRef.current.clientHeight + 20}px)`
     }, [])
 
     return (
-        <ConfigProvider theme={{
-            ...theme
-        }}>
-            <div className={Styles['slider-box']}>
-                <div className={Styles['right-content']}>
-                    <Slider
-                        min={0}
-                        max={10}
-                        step={1}
-                        value={percent}
-                        onChange={(value: number) => onSliderChange(value)}
-                    />
+        <BodyPortal>
+            <ConfigProvider theme={{
+                ...theme
+            }}>
+                <div ref={sliderBoxRef} className={Styles['slider-box']}>
+                    <div className={Styles['right-content']}>
+                        <div className={Styles['title']}>地形夸张系数控制</div>
+                        <Slider
+                            min={0}
+                            max={10}
+                            step={1}
+                            value={percent}
+                            onChange={(value: number) => onSliderChange(value)}
+                        />
+                    </div>
                 </div>
-            </div>
-        </ConfigProvider>
+            </ConfigProvider>
+        </BodyPortal>
     )
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.353",
+  "version": "0.0.354",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -8,5 +8,5 @@
   "author": "",
   "license": "ISC",
   "types": "./index.d.ts",
-  "description": "新增海水"
+  "description": "新增阳光控制器"
 }