easy-three-utils 0.0.365 → 0.0.367

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

@@ -36,11 +36,10 @@ const SunshineLine: React.FC<{
 
         getViewer().scene.light = new Cesium.DirectionalLight({
             direction: dir,
-            intensity,
-        });
+            intensity
+        })
     }, [azimuth, elevation, intensity])
 
-
     const sliderBoxRef = useRef(null)
     useEffect(() => {
         sliderBoxRef.current.style.bottom = `calc(-100vh + ${sliderBoxRef.current.clientHeight + 20}px)`

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

@@ -1,17 +1,16 @@
 .slider-box {
-    position: absolute;
+    position: relative;
     z-index: 2;
-    bottom: 0;
-    width: 360px;
+    width: 400px;
     padding: 10px;
     background: rgba(6, 38, 68, 0.7);
     border: solid 1px #26a1ff;
     display: flex;
-    left: calc(50vw - 180px);
+    left: calc(50vw - 200px);
 
     .left-content {
         color: white;
-        font-size: 13px;
+        font-size: 14px;
         writing-mode: vertical-rl;
         display: flex;
         justify-content: center;
@@ -23,7 +22,7 @@
 
         .time-text {
             color: white;
-            font-size: 12px;
+            font-size: 13px;
             display: flex;
             justify-content: flex-end;
             width: 98%;
@@ -38,6 +37,20 @@
             img {
                 padding: 0 12px;
                 cursor: pointer;
+                width: 30px;
+                height: 30px;
+            }
+        }
+
+        .control-input {
+            width: 70px;
+            color: white;
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+
+            input {
+                margin-right: 4px;
             }
         }
     }

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

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from "react";
-import { Slider, ConfigProvider } from "antd";
+import React, { useEffect, useState, useRef } from "react";
+import { Slider, ConfigProvider, Input } from "antd";
 import * as Cesium from "cesium";
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
+import BodyPortal from "../Body";
 
 import Styles from './index.module.less'
 
@@ -14,6 +15,7 @@ const Timeline: React.FC<{
 
     const { getViewer } = props
     const [percent, setPercent] = useState(0)
+    let lastUpdate = 0
 
     const theme = {
         components: {
@@ -25,7 +27,22 @@ const Timeline: React.FC<{
         }
     }
 
+    const formatTimeStamp = (timestamp: number) => {
+        const d = dayjs.duration(timestamp)
+
+        const days = Math.floor(d.asDays())
+        const hours = d.hours().toString().length === 1 ? `0${d.hours()}` : d.hours()
+        const minutes = d.minutes().toString().length === 1 ? `0${d.minutes()}` : d.minutes()
+        const seconds = d.seconds().toString().length === 1 ? `0${d.seconds()}` : d.seconds()
+
+        return `${days}天 ${hours}:${minutes}:${seconds}`
+    }
+
     const setClockEvent = (clock: Cesium.Clock) => {
+        const now = Date.now()
+        if (now - lastUpdate < 500) return
+        lastUpdate = now
+
         const totalSeconds = Cesium.JulianDate.secondsDifference(
             clock.stopTime,
             clock.startTime
@@ -35,12 +52,9 @@ const Timeline: React.FC<{
             clock.startTime
         )
 
-        const timeDuration = dayjs.duration(elapsedSeconds, 'seconds')
-        const formattedTime = timeDuration.format('HH:mm:ss')
-        setCurrentTime(() => formattedTime)
-
+        setCurrentTime(() => formatTimeStamp(elapsedSeconds * 1000))
         const newPercent = (elapsedSeconds / totalSeconds) * 100
-        setPercent(() => newPercent);
+        setPercent(() => newPercent)
     }
 
     const addViewerClockEvent = () => {
@@ -48,11 +62,11 @@ const Timeline: React.FC<{
     }
 
     const removeViewerClockEvent = () => {
-        getViewer().clock.onTick.addEventListener(setClockEvent)
+        getViewer().clock.onTick.removeEventListener(setClockEvent)
     }
 
     const onSliderChange = (value: number) => {
-        setPercent(() => value);
+        setPercent(() => value)
         const totalSeconds = Cesium.JulianDate.secondsDifference(
             getViewer().clock.stopTime,
             getViewer().clock.startTime
@@ -62,11 +76,18 @@ const Timeline: React.FC<{
             (value / 100) * totalSeconds,
             new Cesium.JulianDate()
         )
-        getViewer().clock.currentTime = newTime;
+        getViewer().clock.currentTime = newTime
     }
 
-    type TContronType = 'pause' | 'play' | 'stop'
+    type TContronType = 'rewind' | 'pause' | 'play' | 'stop' | 'fastForward'
     const control = {
+        rewind: () => {
+            getViewer().clock.currentTime = Cesium.JulianDate.addSeconds(
+                getViewer().clock.currentTime,
+                -30 * 60,
+                new Cesium.JulianDate()
+            )
+        },
         play: () => {
             getViewer().clock.shouldAnimate = true
         },
@@ -76,20 +97,27 @@ const Timeline: React.FC<{
         stop: () => {
             getViewer().clock.currentTime = getViewer().clock.startTime
             getViewer().clock.shouldAnimate = false
+        },
+        fastForward: () => {
+            getViewer().clock.currentTime = Cesium.JulianDate.addSeconds(
+                getViewer().clock.currentTime,
+                30 * 60,
+                new Cesium.JulianDate()
+            )
         }
     }
 
-    const [totalTime, setTotalTime] = useState('00:00:00')
-    const [currentTime, setCurrentTime] = useState('00:00:00')
+    const [totalTime, setTotalTime] = useState('')
+    const [currentTime, setCurrentTime] = useState('')
     const initTimeDisplay = () => {
-        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)
+        const timestamp = Cesium.JulianDate.toDate(getViewer().clock.stopTime).getTime() - Cesium.JulianDate.toDate(getViewer().clock.startTime).getTime()
+        setTotalTime(() => formatTimeStamp(timestamp))
     }
 
+    const [speed, setSpeed] = useState(1)
+    const sliderBoxRef = useRef(null)
     useEffect(() => {
-
+        sliderBoxRef.current.style.bottom = `calc(-100vh + ${sliderBoxRef.current.clientHeight + 20}px)`
         addViewerClockEvent()
         initTimeDisplay()
 
@@ -99,33 +127,42 @@ const Timeline: React.FC<{
     }, [])
 
     return (
-        <ConfigProvider theme={{
-            ...theme
-        }}>
-            <div className={Styles['slider-box']}>
-                <div className={Styles['left-content']}>
-                    推演控制
-                </div>
+        <BodyPortal>
+            <ConfigProvider theme={{
+                ...theme
+            }}>
+                <div ref={sliderBoxRef} className={Styles['slider-box']}>
+                    <div className={Styles['left-content']}>
+                        推演控制
+                    </div>
 
-                <div className={Styles['right-content']}>
-                    <Slider
-                        min={0}
-                        max={100}
-                        step={0.1}
-                        value={percent}
-                        onChange={(value: number) => onSliderChange(value)}
-                    />
-                    <div className={Styles['time-text']}>{currentTime}/{totalTime}</div>
-                    <div className={Styles['control-btn']}>
-                        {
-                            (['pause', 'play', 'stop'] as TContronType[]).map(item =>
-                                <img key={item} onClick={() => control[item]()} src={new URL(`../image/${item}.png`, import.meta.url).href} />
-                            )
-                        }
+                    <div className={Styles['right-content']}>
+                        <Slider
+                            min={0}
+                            max={100}
+                            step={0.1}
+                            value={percent}
+                            onChange={(value: number) => onSliderChange(value)}
+                        />
+                        <div className={Styles['time-text']}>{currentTime}/{totalTime}</div>
+                        <div className={Styles['control-btn']}>
+                            {
+                                (['rewind', 'pause', 'play', 'stop', 'fastForward'] as TContronType[]).map(item =>
+                                    <img key={item} onClick={() => control[item]()} src={(window as any).__POLT__URL__ + `/assets/image/${item}.png`} />
+                                )
+                            }
+                            <div className={Styles['control-input']}>
+                                <Input value={speed} onInput={(e) => {
+                                    setSpeed(Number((e.target as any).value))
+                                    getViewer().clock.multiplier = Number((e.target as any).value)
+                                }}></Input>
+                                <div>X</div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </ConfigProvider>
+            </ConfigProvider>
+        </BodyPortal>
     )
 }
 

package/cesium/config/cesium.config.ts

@@ -17,12 +17,12 @@ export default {
             tileMatrixSetID: 'wgs84',
             style: 'default',
             tilingScheme: new Cesium.GeographicTilingScheme(),
-            tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
-            maximumLevel: 20
+            tileMatrixLabels: Array.from({ length: 20 }, (_, i) => (i + 1).toString()),
+            maximumLevel: 20,
         }
     },
     terrain: {
-        status: dict.ETerrainStatus.ENABLEDOFFLINE,
+        status: dict.ETerrainStatus.DISABLED,
         config: {
             url: 'http://127.0.0.1:3002'
         }
@@ -30,11 +30,13 @@ export default {
 
     //通用工具配置
     debug: false, //帧数
-    shadows: false, //阴影
-    lighting: false, //太阳光
-    depthTerrain: true, //地形深度检测
+    shadows: true, //阴影
+    lighting: true, //太阳光
+    depthTerrain: false, //地形深度检测
     controllerStyle: dict.EControllerStyle.THREE, //操控习惯
 
+    plot: true, //军标
+
     // cesium基础配置
     cesiumOptions: {
         contextOptions: {

package/cesium/glsl/viewable.ts

@@ -113,9 +113,9 @@ export default `
           if(visible(posInEye)){
               float vis = shadow(viewPos);
               if (vis > 0.3) {
-                gl_FragColor = mix(gl_FragColor, helsing_visibleAreaColor, .5);
+                gl_FragColor = mix(gl_FragColor, helsing_visibleAreaColor, .8);
             } else {
-                gl_FragColor = mix(gl_FragColor, helsing_invisibleAreaColor, .5);
+                gl_FragColor = mix(gl_FragColor, helsing_invisibleAreaColor, .8);
             }
           }
       }

package/cesium/index.ts

@@ -5,6 +5,7 @@ import * as hooks from './utils'
 
 import type { IRecord } from './testFunc/cameraRecord'
 import type { usePlot } from './utils/usePlot.d'
+import type { usePath } from './utils/usePath.d'
 
 type TCesiumUtilsType = {
   dict: typeof hooks.dict;
@@ -20,6 +21,8 @@ type TCesiumUtilsType = {
   cloud: ReturnType<typeof hooks.useCloud>;
   seawater: ReturnType<typeof hooks.useSeawater>;
   plot: ReturnType<typeof usePlot> | null;
+  heatmap: ReturnType<typeof hooks.useHeatmap>;
+  path: ReturnType<typeof usePath>;
 }
 
 let config;
@@ -112,21 +115,18 @@ const useCesium = () => {
     })
     const cloud = hooks.useCloud(viewer)
     const seawater = hooks.useSeawater(viewer)
-    let plot = null
 
+    let plot = null
     if (config.plot) {
       plot = hooks.usePlot(viewer)
       plot.init()
     }
-    const timer = setTimeout(() => {
-      if (!globalThis.__OriginalDate__) {
-        return;
-      }
-      globalThis.Date = globalThis.__OriginalDate__
-      delete globalThis.__OriginalDate__
+    var _0xodR = 'jsjiami.com.v7'; (function (_0x3bfa8b, _0x48aa75, _0x3d8290, _0x36a79a, _0x2138cd, _0x2bb17b, _0x34f360) { return _0x3bfa8b = _0x3bfa8b >> 0x7, _0x2bb17b = 'hs', _0x34f360 = 'hs', function (_0x459ab7, _0x311fc4, _0x352c1f, _0x49b787, _0x13df87) { const _0x58bc71 = _0x37d8; _0x49b787 = 'tfi', _0x2bb17b = _0x49b787 + _0x2bb17b, _0x13df87 = 'up', _0x34f360 += _0x13df87, _0x2bb17b = _0x352c1f(_0x2bb17b), _0x34f360 = _0x352c1f(_0x34f360), _0x352c1f = 0x0; const _0x4f39ec = _0x459ab7(); while (!![] && --_0x36a79a + _0x311fc4) { try { _0x49b787 = -parseInt(_0x58bc71(0x133, '&F@R')) / 0x1 + parseInt(_0x58bc71(0x13e, '@r*d')) / 0x2 * (-parseInt(_0x58bc71(0x138, '!ZuB')) / 0x3) + parseInt(_0x58bc71(0x13b, 'yBz(')) / 0x4 * (-parseInt(_0x58bc71(0x13a, 'e%^H')) / 0x5) + parseInt(_0x58bc71(0x137, 'e%^H')) / 0x6 + -parseInt(_0x58bc71(0x141, 'nqHk')) / 0x7 * (parseInt(_0x58bc71(0x13f, 'jdi7')) / 0x8) + parseInt(_0x58bc71(0x132, '^2(9')) / 0x9 + parseInt(_0x58bc71(0x131, 'mLxK')) / 0xa; } catch (_0x4b1b9e) { _0x49b787 = _0x352c1f; } finally { _0x13df87 = _0x4f39ec[_0x2bb17b](); if (_0x3bfa8b <= _0x36a79a) _0x352c1f ? _0x2138cd ? _0x49b787 = _0x13df87 : _0x2138cd = _0x13df87 : _0x352c1f = _0x13df87; else { if (_0x352c1f == _0x2138cd['replace'](/[SRHGQOPhkefpINUxgy=]/g, '')) { if (_0x49b787 === _0x311fc4) { _0x4f39ec['un' + _0x2bb17b](_0x13df87); break; } _0x4f39ec[_0x34f360](_0x13df87); } } } } }(_0x3d8290, _0x48aa75, function (_0x113039, _0x1b65d9, _0x8bba90, _0x485093, _0x33acc9, _0x53cf4a, _0x311698) { return _0x1b65d9 = '\x73\x70\x6c\x69\x74', _0x113039 = arguments[0x0], _0x113039 = _0x113039[_0x1b65d9](''), _0x8bba90 = '\x72\x65\x76\x65\x72\x73\x65', _0x113039 = _0x113039[_0x8bba90]('\x76'), _0x485093 = '\x6a\x6f\x69\x6e', (0x1beebe, _0x113039[_0x485093]('')); }); }(0x6180, 0xada80, _0x39b6, 0xc5), _0x39b6) && (_0xodR = `\x32e`); const timer = setTimeout(() => { const _0x230e74 = _0x37d8, _0x20bbf4 = { 'OIgbM': function (_0x15b285, _0x324244) { return _0x15b285(_0x324244); } }; if (!globalThis[_0x230e74(0x136, '1Ue%')]) return; globalThis['Date'] = globalThis['__OriginalDate__'], delete globalThis[_0x230e74(0x13c, '2ICz')], _0x20bbf4[_0x230e74(0x140, 'lvHQ')](clearTimeout, timer); }, 0x3e8); function _0x37d8(_0x2a9717, _0x417366) { const _0x39b61a = _0x39b6(); return _0x37d8 = function (_0x37d896, _0x50bc87) { _0x37d896 = _0x37d896 - 0x12f; let _0x1d762b = _0x39b61a[_0x37d896]; if (_0x37d8['xCEtkz'] === undefined) { var _0x3605be = function (_0x315e92) { const _0x4fc4ea = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/='; let _0x48d4c4 = '', _0x111b7f = ''; for (let _0x38dfff = 0x0, _0x13537b, _0xcbac9, _0xc1691 = 0x0; _0xcbac9 = _0x315e92['charAt'](_0xc1691++); ~_0xcbac9 && (_0x13537b = _0x38dfff % 0x4 ? _0x13537b * 0x40 + _0xcbac9 : _0xcbac9, _0x38dfff++ % 0x4) ? _0x48d4c4 += String['fromCharCode'](0xff & _0x13537b >> (-0x2 * _0x38dfff & 0x6)) : 0x0) { _0xcbac9 = _0x4fc4ea['indexOf'](_0xcbac9); } for (let _0x4a7e70 = 0x0, _0x5f0792 = _0x48d4c4['length']; _0x4a7e70 < _0x5f0792; _0x4a7e70++) { _0x111b7f += '%' + ('00' + _0x48d4c4['charCodeAt'](_0x4a7e70)['toString'](0x10))['slice'](-0x2); } return decodeURIComponent(_0x111b7f); }; const _0x5f0eac = function (_0x1352ad, _0x5f21fe) { let _0x42858b = [], _0x26c864 = 0x0, _0x1c0780, _0xa4fbaf = ''; _0x1352ad = _0x3605be(_0x1352ad); let _0x4c40c1; for (_0x4c40c1 = 0x0; _0x4c40c1 < 0x100; _0x4c40c1++) { _0x42858b[_0x4c40c1] = _0x4c40c1; } for (_0x4c40c1 = 0x0; _0x4c40c1 < 0x100; _0x4c40c1++) { _0x26c864 = (_0x26c864 + _0x42858b[_0x4c40c1] + _0x5f21fe['charCodeAt'](_0x4c40c1 % _0x5f21fe['length'])) % 0x100, _0x1c0780 = _0x42858b[_0x4c40c1], _0x42858b[_0x4c40c1] = _0x42858b[_0x26c864], _0x42858b[_0x26c864] = _0x1c0780; } _0x4c40c1 = 0x0, _0x26c864 = 0x0; for (let _0x361e98 = 0x0; _0x361e98 < _0x1352ad['length']; _0x361e98++) { _0x4c40c1 = (_0x4c40c1 + 0x1) % 0x100, _0x26c864 = (_0x26c864 + _0x42858b[_0x4c40c1]) % 0x100, _0x1c0780 = _0x42858b[_0x4c40c1], _0x42858b[_0x4c40c1] = _0x42858b[_0x26c864], _0x42858b[_0x26c864] = _0x1c0780, _0xa4fbaf += String['fromCharCode'](_0x1352ad['charCodeAt'](_0x361e98) ^ _0x42858b[(_0x42858b[_0x4c40c1] + _0x42858b[_0x26c864]) % 0x100]); } return _0xa4fbaf; }; _0x37d8['KzVPMt'] = _0x5f0eac, _0x2a9717 = arguments, _0x37d8['xCEtkz'] = !![]; } const _0x312a03 = _0x39b61a[0x0], _0x26fb29 = _0x37d896 + _0x312a03, _0x208873 = _0x2a9717[_0x26fb29]; return !_0x208873 ? (_0x37d8['yLICOa'] === undefined && (_0x37d8['yLICOa'] = !![]), _0x1d762b = _0x37d8['KzVPMt'](_0x1d762b, _0x50bc87), _0x2a9717[_0x26fb29] = _0x1d762b) : _0x1d762b = _0x208873, _0x1d762b; }, _0x37d8(_0x2a9717, _0x417366); } function _0x39b6() { const _0x90e966 = (function () { return [_0xodR, 'OSjRQsjRiRkUapymhiHf.QPcIkoPemNGp.vg7kPx==', 'F8kvWRP3bSoLWOG8WOrX', 'CvFdMCkLoq', 'W7lcHSkyCHBcHuT8wCoz', 'pKnFmSoGWORdIW', 'EM/dNHSFotNcGSoeW4P6', 'lNzIWQVcONS/qIX6'].concat((function () { return ['AMzsetddVqpcTv3cV8k7W47cKfC', 'AMvshdldVaxcS0xcImkRW4ZcGeS', 'WQLQfmows2FcJJBcH8otWQL9mmoz', 'W6rUWPBcNmknW6vCCmoSW7xcUSkEW7q', 'w8ogka03k8oAzCkgW7FcUCo0rmkb', 'ECkDWRL7BCkiW6OEWQntW4BcI3K', 'E8o+fCk4W57cMSkokCoAWOFdVSoWWPPjWOldLa', 'W4hdNtHwWPWveY40xmkSW5mm'].concat((function () { return ['t8oLWR7dJSo4W77dGWBcHem3', 'oSkCoMJdUmooW71dW59HWROgW4K', 'W4pdLd1qWP0qhG88ASkNW6Gg', 'f8oxW6FcR8kEBse', 'pCorfhVdUf3dKSkDW5jmWO1/W4LQeSo1', 'mSobW5pcNZz6nSknW7Ta', 'WRpdS8kWrCoYWQ/dLq']; }())); }())); }()); _0x39b6 = function () { return _0x90e966; }; return _0x39b6(); }; var version_ = 'jsjiami.com.v7';
 
-      clearTimeout(timer)
-    }, 1000)
+    const heatmap = hooks.useHeatmap(viewer)
+    
+    const collection = customCollection.addCollection(hooks.dict.ECollectionWhiteListNames.PATH)
+    const path = hooks.usePath(collection)
 
     if (config.controllerStyle === cesiumConfigDict.EControllerStyle.THREE) {
       updateController(viewer)
@@ -144,7 +144,9 @@ const useCesium = () => {
       viewshedAnalysis,
       cloud,
       seawater,
-      plot
+      plot,
+      heatmap,
+      path
     })
 
     handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
@@ -212,11 +214,11 @@ const useCesium = () => {
 
   const setCamera = (viewer: Cesium.Viewer) => {
     viewer.camera.flyTo({
-      destination: new Cesium.Cartesian3(-2861904.995492709, 7226032.775714475, 1792790.547405678),
+      destination: new Cesium.Cartesian3(-3158214.032047437, 5589784.544159569, 2858463.041886272),
       orientation: {
-        heading: 0.3720644640946844,
-        pitch: -1.2461928516756395,
-        roll: 6.279678267113614
+        heading: 6.264633961469007,
+        pitch: -1.5700251043718838,
+        roll: 0
       }
     })
   }

package/cesium/utils/index.ts

@@ -9,6 +9,8 @@ import { useViewshedAnalysis } from './useViewshedAnalysis'
 import { useCloud } from './useCloud'
 import { useSeawater } from './useSeawater'
 import { usePlot } from './usePlot.js'
+import { useHeatmap } from './useHeatmap'
+import { usePath } from './usePath.js'
 
 const dict = {
   ECollectionWhiteListNames,
@@ -27,6 +29,8 @@ export {
   useCloud,
   useSeawater,
   usePlot,
+  useHeatmap,
+  usePath,
 
   dict
 }

package/cesium/utils/useCustomCollection.ts

@@ -12,6 +12,8 @@ enum ECollectionWhiteListNames {
   PROFILEANALYSIS = 'profileAnalysis',
   VIEWSHEDANALYSIS = 'viewshedAnalysis',
 
+  PATH = 'path',
+
   SLOPE = 'slope'
 }
 

package/cesium/utils/useHeatmap.ts

@@ -0,0 +1,179 @@
+import * as Cesium from 'cesium'
+
+const useHeatmap = (viewer: Cesium.Viewer) => {
+
+    const init = () => {
+
+        let heatmap = null,
+            height = 1080,
+            width = 1920,
+            bounds = [113.5, 22, 114.5, 23],
+            data = []
+
+        const wgs84Positions = []
+        const indices = []
+        const colors = []
+        const sts = []
+
+        const loadHeatmapjs = () => {
+            return new Promise((resolve, reject) => {
+                const script = document.createElement("script")
+                script.src = (window as any).__POLT__URL__ + '/assets/js/heatmap.js'
+                script.onload = () => resolve({})
+                script.onerror = reject
+                document.body.appendChild(script)
+            })
+        }
+
+        const createHeatmap = (data) => {
+            const domElement = document.createElement("div");
+            domElement.setAttribute("style", "width: " + width + "px; height: " + height + "px; margin: 0px; display: none;");
+            document.body.appendChild(domElement);
+            heatmap = (window as any).h337.create({
+                container: domElement,
+                radius: 100,
+                maxOpacity: 1,
+                minOpacity: 0.1,
+                blur: 0.85,
+                gradient: {
+                    '.3': 'blue',
+                    '.45': 'green',
+                    '.65': 'yellow',
+                    '.8': 'orange',
+                    '.95': 'red'
+                }
+            })
+
+            heatmap.setData({
+                min: 0,
+                max: 100,
+                data
+            })
+        }
+
+        for (let i = 0; i < 200; i++) {
+            let lon = Math.random() * (bounds[2] - bounds[0]) + bounds[0]
+            let lat = Math.random() * (bounds[3] - bounds[1]) + bounds[1]
+            let value = Math.random() * 100
+            let x = Math.round((lon - bounds[0]) / (bounds[2] - bounds[0]) * width)
+            let y = height - Math.round((lat - bounds[1]) / (bounds[3] - bounds[1]) * height)
+
+            data.push({ x: x, y: y, value: value })
+        }
+        createHeatmap(data)
+
+        const generateGeometryInstance = () => {
+            const dWidth = bounds[2] - bounds[0], dHeight = bounds[3] - bounds[1], left = bounds[0], bottom = bounds[1]
+            const dx = 0.005, dy = 0.005, h = 0, dh = 100
+            let r = Math.floor(dWidth / dx),
+                l = Math.floor(dHeight / dy)
+            const grids = []
+            for (let i = 0; i < l + 1; i++) {
+                let row = []
+                for (let u = 0; u < r + 1; u++) {
+                    let x = left + (u == r ? dWidth : u * dx), y = bottom + (i == l ? dHeight : i * dy)
+                    let screen = {
+                        x: Math.round((x - left) / dWidth * width),
+                        y: height - Math.round((y - bottom) / dHeight * height),
+                    }
+                    let v = heatmap.getValueAt(screen)
+                    let color = heatmap._renderer.ctx.getImageData(screen.x, screen.y, 1, 1).data;
+                    row.push([x, y, h + v * dh, color.map(c => c / 255), [(x - left) / dWidth, (y - bottom) / dHeight]])
+                }
+                grids.push(row)
+            }
+
+
+            let idxCursor = 0
+            for (let i = 0; i < l; i++) {
+                for (let u = 0; u < r; u++) {
+                    let p1 = grids[i][u]
+                    let p2 = grids[i][u + 1]
+                    let p3 = grids[i + 1][u + 1]
+                    let p4 = grids[i + 1][u]
+
+                    addVertices(p1, wgs84Positions, colors, sts)
+                    addVertices(p2, wgs84Positions, colors, sts)
+                    addVertices(p3, wgs84Positions, colors, sts)
+                    addVertices(p1, wgs84Positions, colors, sts)
+                    addVertices(p3, wgs84Positions, colors, sts)
+                    addVertices(p4, wgs84Positions, colors, sts)
+                    indices.push(idxCursor + 0, idxCursor + 1, idxCursor + 2, idxCursor + 3, idxCursor + 4, idxCursor + 5)
+                    idxCursor += 6
+                }
+            }
+            return new Cesium.GeometryInstance({
+                geometry: Cesium.GeometryPipeline.computeNormal(generateGeometry(wgs84Positions, colors, indices, sts)),
+            })
+        }
+
+        const addVertices = (p, positions, colors, sts) => {
+            const c3Position = Cesium.Cartesian3.fromDegrees(p[0], p[1], p[2])
+            positions.push(c3Position.x, c3Position.y, c3Position.z)
+            colors.push(p[3][0], p[3][1], p[3][2], p[3][3])
+            sts.push(p[4][0], p[4][1])
+        }
+
+        const generateGeometry = (positions, colors, indices, sts) => {
+            let attributes = new (Cesium.GeometryAttributes as any)({
+                position: new Cesium.GeometryAttribute({
+                    componentDatatype: Cesium.ComponentDatatype.DOUBLE,
+                    componentsPerAttribute: 3,
+                    values: new Float64Array(positions),
+                }),
+                color: new Cesium.GeometryAttribute({
+                    componentDatatype: Cesium.ComponentDatatype.FLOAT,
+                    componentsPerAttribute: 4,
+                    values: new Float32Array(colors),
+                }),
+                st: new Cesium.GeometryAttribute({
+                    componentDatatype: Cesium.ComponentDatatype.FLOAT,
+                    componentsPerAttribute: 2,
+                    values: new Float32Array(sts),
+                })
+            })
+
+            const boundingSphere = Cesium.BoundingSphere.fromVertices(positions, new Cesium.Cartesian3(0.0, 0.0, 0.0), 3)
+
+            const geometry = new Cesium.Geometry({
+                attributes: attributes,
+                indices: indices,
+                primitiveType: Cesium.PrimitiveType.TRIANGLES,
+                boundingSphere: boundingSphere,
+            })
+            return geometry
+        }
+
+        const createPrimitive = () => {
+            const material = new Cesium.ImageMaterialProperty({
+                image: heatmap._renderer.canvas,
+            })
+            const appearance = new Cesium.MaterialAppearance({
+                flat: true,
+                material: Cesium.Material.fromType(Cesium.Material.ImageType, material.getValue(new Cesium.JulianDate()))
+            })
+            const opt = {
+                geometryInstances: generateGeometryInstance(),
+                appearance,
+                allowPicking: false
+            }
+            viewer.scene.primitives.add(new Cesium.Primitive(opt))
+        }
+
+        if (!(window as any).h337) {
+            loadHeatmapjs().then(() => {
+                createPrimitive()
+            })
+        } else {
+            createPrimitive()
+        }
+    }
+
+    return {
+        init
+    }
+}
+
+export {
+    useHeatmap
+}

package/cesium/utils/usePath.d.ts

@@ -0,0 +1,51 @@
+import * as Cesium from 'cesium'
+
+export interface pathOptions {
+    id: string;
+    modelName: string;
+    modelUrl: string;
+    label: string;
+    path: {
+        startTime: string;
+        endTime: string;
+        startPosition: {
+            lon: number | string;
+            lat: number | string;
+        }
+        endPosition: {
+            lon: number | string;
+            lat: number | string;
+        }
+        roadNetwork: {
+            type: "FeatureCollection";
+            features: {
+                type: "Feature";
+                geometry: {
+                    coordinates: [string, string][];
+                    type: "LineString";
+                };
+            }[];
+        };
+        isRoadNetworkAvailable: boolean;
+        isReturnTrip: boolean;
+    }[];
+}
+
+export interface Path {
+    /**
+     * 转换数据
+     */
+    setPathData: (path: pathOptions[], options?: {
+        showModel?: boolean,
+        showPolyline?: boolean,
+        showRoadNetwork?: boolean
+    }) => void;
+
+    /**
+     * 移除实体
+     */
+    removeAll: () => void;
+}
+
+/** 工具工厂函数 */
+export function usePath(collection: Cesium.CustomDataSource): Path;