easy-three-utils 0.0.351 → 0.0.353

package/cesium/components/index.ts

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

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

@@ -0,0 +1,45 @@
+.slider-box {
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    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;
+
+        .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/TerrainLine/index.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from "react";
+import { Slider, ConfigProvider } from "antd";
+import * as Cesium from "cesium";
+
+import Styles from './index.module.less'
+
+const Timeline: React.FC<{
+    getViewer: () => Cesium.Viewer
+}> = (props) => {
+
+    const { getViewer } = props
+    const [percent, setPercent] = useState(1)
+
+    const theme = {
+        components: {
+            Slider: {
+                railBg: '#bfbfbf',
+                railHoverBg: '#bfbfbf',
+                trackBg: '#176fdbff'
+            }
+        }
+    }
+
+    const onSliderChange = (value: number) => {
+        setPercent(() => value);
+        getViewer().scene.verticalExaggeration = value
+    }
+
+    useEffect(() => {
+        return () => {
+        }
+    }, [])
+
+    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)}
+                    />
+                </div>
+            </div>
+        </ConfigProvider>
+    )
+}
+
+export default Timeline

package/cesium/index.ts

@@ -16,6 +16,8 @@ type TCesiumUtilsType = {
   slope: ReturnType<typeof hooks.useSlope>;
   profileAnalysis: ReturnType<typeof hooks.useProfileAnalysis>;
   viewshedAnalysis: ReturnType<typeof hooks.useViewshedAnalysis>;
+  cloud: ReturnType<typeof hooks.useCloud>;
+  seawater: ReturnType<typeof hooks.useSeawater>;
 }
 
 let config;
@@ -78,7 +80,9 @@ const useCesium = () => {
       })
     } else if (config.terrain.status === cesiumConfigDict.ETerrainStatus.ENABLEDOFFLINE) {
       viewer.imageryLayers.get(0).show = false
-      const terrainProvider = Cesium.CesiumTerrainProvider.fromUrl(config.terrain.config.url)
+      const terrainProvider = Cesium.CesiumTerrainProvider.fromUrl(config.terrain.config.url, {
+        requestVertexNormals: true
+      })
       viewer.terrainProvider = await terrainProvider
     }
 
@@ -104,7 +108,8 @@ const useCesium = () => {
     const viewshedAnalysis = hooks.useViewshedAnalysis(viewer, {
       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)
@@ -119,7 +124,9 @@ const useCesium = () => {
       measure,
       slope,
       profileAnalysis,
-      viewshedAnalysis
+      viewshedAnalysis,
+      cloud,
+      seawater
     })
 
     handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

package/cesium/utils/index.ts

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

package/cesium/utils/useCloud.ts

@@ -1,4 +1,5 @@
 import * as Cesium from 'cesium'
+import { v7 as uuidv7 } from 'uuid'
 
 const useCloud = (viewer: Cesium.Viewer) => {
 
@@ -11,7 +12,7 @@ const useCloud = (viewer: Cesium.Viewer) => {
             return {
                 lon: Cesium.Math.toDegrees(cartographic.longitude),
                 lat: Cesium.Math.toDegrees(cartographic.latitude),
-                height: cartographic.height + h,
+                height: cartographic.height + h
             }
         })
 
@@ -45,7 +46,7 @@ const useCloud = (viewer: Cesium.Viewer) => {
             return inside;
         }
 
-        const points = [];
+        const points = []
         while (points.length < numPoints) {
             const lon = Math.random() * (maxLon - minLon) + minLon
             const lat = Math.random() * (maxLat - minLat) + minLat
@@ -57,20 +58,39 @@ const useCloud = (viewer: Cesium.Viewer) => {
         return points;
     }
 
-    const activateDrawCloud = (cloudWidth: number, cloudLength: number, density: number, points: Cesium.Cartesian3[]) => {
+    const draw = (points: Cesium.Cartesian3[], params: {
+        cloudWidth?: number,
+        cloudLength?: number,
+        density?: number,
+        color?: string
+    } = {
+            cloudWidth: 100000,
+            cloudLength: 100000,
+            density: 0.8,
+            color: 'rgba(255, 255, 255, 0.8)'
+        }) => {
+
+        const options = Object.assign({}, {
+            cloudWidth: 100000,
+            cloudLength: 100000,
+            density: 0.8,
+            color: 'rgba(255, 255, 255, 0.8)'
+        }, params)
+
         const clouds = viewer.scene.primitives.add(new Cesium.CloudCollection())
 
-        // cloudsCollection.push({
-        //   id: 
-        // })
+        cloudsCollection.push({
+            id: uuidv7(),
+            clouds
+        })
 
         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 / (cloudLength * cloudWidth)) * density
-        const _points = getRandomPoints(points, num, 5000 + (cloudLength + cloudWidth) / 2)
+        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 => {
-            const r = Math.random();
+            const r = Math.random()
             clouds.add({
                 show: true,
                 position: point,
@@ -80,17 +100,12 @@ const useCloud = (viewer: Cesium.Viewer) => {
                     3 + r * 5
                 ),
                 scale: new Cesium.Cartesian2(
-                    cloudWidth * (0.8 + Math.random() * 0.4),
-                    cloudLength * (0.8 + Math.random() * 0.4)
+                    options.cloudWidth * (0.8 + Math.random() * 0.4),
+                    options.cloudLength * (0.8 + Math.random() * 0.4)
                 ),
                 slice: 0.2 + Math.random() * 0.3,
                 brightness: 0.8 + Math.random() * 0.4,
-                color: new Cesium.Color(
-                    0.9 + Math.random() * 0.1,
-                    0.7 + Math.random() * 0.2,
-                    0.6 + Math.random() * 0.2,
-                    0.8
-                ),
+                color: Cesium.Color.fromCssColorString(options.color),
                 noiseDetail: 3.0 + Math.random(),
                 noiseOffset: new Cesium.Cartesian3(
                     Math.random() * 100,
@@ -103,11 +118,20 @@ const useCloud = (viewer: Cesium.Viewer) => {
                 )
             })
         })
-
     }
 
-    const clearAll = () => {
+    const removeAll = () => {
+        cloudsCollection.forEach(item => item.clouds.removeAll())
+        viewer.scene.primitives.removeAll()
+        cloudsCollection = []
+    }
 
+    return {
+        draw,
+        removeAll
     }
+}
 
+export {
+    useCloud
 }

package/cesium/utils/useDrawPolygon.ts

@@ -10,7 +10,10 @@ const useDrawPolygon = (viewer: Cesium.Viewer, options: {
   const moveHandler: Cesium.ScreenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
   let pointPosData: Cesium.Cartesian3[][] = []
 
-  const start = (cb: (geoJSONData: string) => void) => {
+  const start = (cb: (data: {
+    geoJSON: string;
+    points: Cesium.Cartesian3[];
+  }) => void) => {
 
     const points: Cesium.Cartesian3[] = []
 
@@ -69,12 +72,15 @@ const useDrawPolygon = (viewer: Cesium.Viewer, options: {
         return [lon, lat]
       })
 
-      cb(JSON.stringify({
-        "type": "Polygon",
-        "coordinates": [
-          [...coordinates, coordinates[0]]
-        ]
-      }))
+      cb({
+        geoJSON: JSON.stringify({
+          "type": "Polygon",
+          "coordinates": [
+            [...coordinates, coordinates[0]]
+          ]
+        }),
+        points: [...points, points[0]]
+      })
     }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
   }
 

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.351",
+  "version": "0.0.353",
   "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": "新增海水"
 }