easy-three-utils 0.0.353 → 0.0.355

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/utils/useCloud.ts

@@ -5,6 +5,9 @@ const useCloud = (viewer: Cesium.Viewer) => {
 
     let cloudsCollection = []
 
+    let globalClouds
+    let cloudData = []
+
     const getRandomPoints = (polygonCartesian: Cesium.Cartesian3[], numPoints: number, h: number) => {
 
         const polygon = polygonCartesian.map(cartesian => {
@@ -87,6 +90,7 @@ const useCloud = (viewer: Cesium.Viewer) => {
         const width = Math.max(...points.map(p => p.x)) - Math.min(...points.map(p => p.x))
         const length = Math.max(...points.map(p => p.y)) - Math.min(...points.map(p => p.y))
         const num = Math.floor(width * length / (options.cloudLength * options.cloudWidth)) * options.density
+
         const _points = getRandomPoints(points, num, 5000 + (options.cloudLength + options.cloudWidth) / 2)
 
         _points.forEach(point => {
@@ -120,6 +124,95 @@ const useCloud = (viewer: Cesium.Viewer) => {
         })
     }
 
+
+    let angle = 0
+    const speedDegPerSec = 0.1
+    const speed = Cesium.Math.toRadians(speedDegPerSec)
+    let prevTime = Cesium.JulianDate.clone(viewer.clock.currentTime)
+
+    const onTick = (clock) => {
+        const now = clock.currentTime;
+        const dt = Cesium.JulianDate.secondsDifference(now, prevTime)
+        prevTime = Cesium.JulianDate.clone(now)
+
+        if (dt <= 0) return
+
+        angle += speed * dt
+        const rot = Cesium.Matrix3.fromRotationZ(angle)
+
+        for (const d of cloudData) {
+            const rotated = new Cesium.Cartesian3()
+            Cesium.Matrix3.multiplyByVector(rot, d.orig, rotated)
+            d.cloud.position = rotated
+        }
+    }
+
+    const enabledGlobalCloud = (options?: {
+        color?: string;
+        number?: number;
+    }) => {
+
+        globalClouds = viewer.scene.primitives.add(new Cesium.CloudCollection())
+        const maxLength = 3000000
+        const minLength = 2000000
+
+        const coords = [
+            { lon: -180, lat: -90 },
+            { lon: 180, lat: -90 },
+            { lon: 180, lat: 90 },
+            { lon: -180, lat: 90 },
+            { lon: -180, lat: -90 },
+        ];
+
+        const points = coords.map(c =>
+            Cesium.Cartesian3.fromDegrees(c.lon, c.lat)
+        )
+
+        const _points = getRandomPoints(points, (options && options.number) ? options.number : 500, Math.floor(Math.random() * (900000 - 700000 + 1)) + 700000)
+        _points.forEach(point => {
+            const r = Math.random()
+            const cloud = globalClouds.add({
+                show: true,
+                position: point,
+                maximumSize: new Cesium.Cartesian3(
+                    5 + r * 15,
+                    4 + r * 10,
+                    3 + r * 5
+                ),
+                scale: new Cesium.Cartesian2(maxLength, Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength),
+                slice: 0.2 + Math.random() * 0.3,
+                brightness: 0.8 + Math.random() * 0.4,
+                color: Cesium.Color.fromCssColorString((options && options.color) ? options.color : 'rgba(255, 255, 255)'),
+                noiseDetail: 3.0 + Math.random(),
+                noiseOffset: new Cesium.Cartesian3(
+                    Math.random() * 100,
+                    Math.random() * 100,
+                    Math.random() * 100
+                ),
+                orientation: Cesium.Quaternion.fromAxisAngle(
+                    Cesium.Cartesian3.UNIT_Z,
+                    Math.random() * Cesium.Math.TWO_PI
+                )
+            })
+
+            cloudData.push({
+                cloud,
+                orig: Cesium.Cartesian3.clone(point)
+            })
+        })
+
+        viewer.clock.onTick.addEventListener(onTick)
+    }
+
+    const disabledGlobalCloud = () => {
+        if (globalClouds) {
+            globalClouds.removeAll()
+            globalClouds = null
+        }
+        cloudData = []
+        viewer.clock.onTick.removeEventListener(onTick)
+    }
+
     const removeAll = () => {
         cloudsCollection.forEach(item => item.clouds.removeAll())
         viewer.scene.primitives.removeAll()
@@ -128,6 +221,8 @@ const useCloud = (viewer: Cesium.Viewer) => {
 
     return {
         draw,
+        enabledGlobalCloud,
+        disabledGlobalCloud,
         removeAll
     }
 }

package/cesium/utils/useSeawater.ts

@@ -20,7 +20,7 @@ const useSeawater = (viewer: Cesium.Viewer) => {
                         fabric: {
                             type: 'Water',
                             uniforms: {
-                                specularMap: __POLT__URL__ + '/assets/image/earthspec.jpg',
+                                specularMap: (window as any).__POLT__URL__ + '/assets/image/earthspec.jpg',
                                 normalMap: Cesium.buildModuleUrl('Assets/Textures/waterNormals.jpg'),
                                 frequency: 10000.0,
                                 animationSpeed: 0.01,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.353",
+  "version": "0.0.355",
   "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": "新增全球云"
 }