easy-three-utils 0.0.352 → 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/cesium/index.ts

@@ -17,6 +17,7 @@ type TCesiumUtilsType = {
   profileAnalysis: ReturnType<typeof hooks.useProfileAnalysis>;
   viewshedAnalysis: ReturnType<typeof hooks.useViewshedAnalysis>;
   cloud: ReturnType<typeof hooks.useCloud>;
+  seawater: ReturnType<typeof hooks.useSeawater>;
 }
 
 let config;
@@ -108,6 +109,7 @@ const useCesium = () => {
       collection: customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.VIEWSHEDANALYSIS)
     })
     const cloud = hooks.useCloud(viewer)
+    const seawater = hooks.useSeawater(viewer)
 
     if (config.controllerStyle === cesiumConfigDict.EControllerStyle.THREE) {
       updateController(viewer)
@@ -123,7 +125,8 @@ const useCesium = () => {
       slope,
       profileAnalysis,
       viewshedAnalysis,
-      cloud
+      cloud,
+      seawater
     })
 
     handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

package/cesium/utils/index.ts

@@ -7,6 +7,7 @@ import { useSlope } from './useSlope'
 import { useProfileAnalysis } from './useProfileAnalysis'
 import { useViewshedAnalysis } from './useViewshedAnalysis'
 import { useCloud } from './useCloud'
+import { useSeawater } from './useSeawater'
 
 const dict = {
   ECollectionWhiteListNames,
@@ -23,6 +24,7 @@ export {
   useProfileAnalysis,
   useViewshedAnalysis,
   useCloud,
+  useSeawater,
 
   dict
 }

package/cesium/utils/useSeawater.ts

@@ -0,0 +1,50 @@
+import * as Cesium from 'cesium'
+
+const useSeawater = (viewer: Cesium.Viewer) => {
+    let water;
+
+    const enabled = () => {
+        if (water) return
+        water = viewer.scene.primitives.add(
+            new Cesium.Primitive({
+                geometryInstances: new Cesium.GeometryInstance({
+                    geometry: new Cesium.RectangleGeometry({
+                        rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
+                        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
+                        height: 450
+                    })
+                }),
+                appearance: new Cesium.EllipsoidSurfaceAppearance({
+                    aboveGround: false,
+                    material: new Cesium.Material({
+                        fabric: {
+                            type: 'Water',
+                            uniforms: {
+                                specularMap: __POLT__URL__ + '/assets/image/earthspec.jpg',
+                                normalMap: Cesium.buildModuleUrl('Assets/Textures/waterNormals.jpg'),
+                                frequency: 10000.0,
+                                animationSpeed: 0.01,
+                                amplitude: 1.0,
+                            },
+                        },
+                    }),
+                }),
+                show: true
+            })
+        )
+    }
+
+    const disabled = () => {
+        viewer.scene.primitives.remove(water)
+        water = null
+    }
+
+    return {
+        enabled,
+        disabled
+    }
+}
+
+export {
+    useSeawater
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.352",
+  "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": "新增阳光控制器"
 }