feat: update cesium-utils, update react-utils

apps/web-visualization-demos/src/page/cesiumPage/CesiumPageService.ts

@@ -1,7 +1,6 @@
 import { CommonUtil, TilesetManager, ViewerHelper } from "@zxtool/cesium-utils"
 import * as Cesium from "cesium"
-import { 不同的Primitive } from "./primitive"
-import "./worker"
+import { 转坐标 } from "./坐标"
 
 class CesiumPageService {
   moduleEnter() {
@@ -17,7 +16,7 @@ class CesiumPageService {
     )
 
     // this.loadTileset()
-    // this.init()
+    this.init()
   }
 
   moduleExit() {}
@@ -28,12 +27,13 @@ class CesiumPageService {
 
     // initCameraGUI()
     // 世界坐标()
+    转坐标()
 
     // primitive基础()
     // fabric基础()
     // shader基础()
     // primitiveV()
-    不同的Primitive()
+    // 不同的Primitive()
 
     // 加载geojson()
 

apps/web-visualization-demos/src/page/cesiumPage/分层.ts

@@ -1,4 +1,5 @@
 import { MassivePointsHelper, ViewerHelper, ViewerUtilSync } from "@zxtool/cesium-utils"
+import { RECT } from "@zxtool/cesium-utils/dist/type/type"
 import * as Cesium from "cesium"
 
 const { getScreenRect } = ViewerUtilSync
@@ -24,8 +25,10 @@ export const 添加分层 = () => {
   const _points = genMassivePoints(10000, rect)
   // const points = MPH.calcLonLats(_points, { drawGrid: true, keepKeys: Array.from(Array(20), (_, i) => i) })
 
+  const dataSource = ViewerUtilSync.getCustomDataSource({ viewer, name: "massivePoint", autoCreate: true })!
+
   _points.forEach(item => {
-    viewer.entities.add({
+    dataSource.entities.add({
       position: Cesium.Cartesian3.fromDegrees(...(item.lonLat as [number, number])),
       point: {
         pixelSize: 3,
@@ -39,8 +42,7 @@ export const 添加分层 = () => {
   })
 
   viewer.camera.moveEnd.addEventListener(() => {
-    MPH?.calcEntitiesMostDetailed(viewer.entities, { drawGrid: true })
-    console.log(MPH)
+    MPH?.calcEntitiesMostDetailed(dataSource)
   })
 }
 

apps/web-visualization-demos/src/page/cesiumPage/坐标.ts

@@ -1,4 +1,4 @@
-import { ViewerHelper } from "@zxtool/cesium-utils"
+import { CoordHelper, ScreenEventHelper, ViewerHelper, ViewerUtilSync } from "@zxtool/cesium-utils"
 import * as Cesium from "cesium"
 
 const 可复用全排列 = (nums: number[]) => {
@@ -61,3 +61,35 @@ export const 世界坐标 = () => {
 
   console.log(viewer.scene.globe.ellipsoid)
 }
+
+export const 转坐标 = () => {
+  const viewer = ViewerHelper.getViewer()!
+  const coordHelper = new CoordHelper(viewer)
+  const dataSource = ViewerUtilSync.getCustomDataSource({ name: "test", viewer, autoCreate: true })!
+  const drawPoint = (c3: Cesium.Cartesian3) => {
+    dataSource.entities.add({
+      position: c3,
+      point: {
+        pixelSize: 5,
+        color: Cesium.Color.TEAL,
+        outlineColor: Cesium.Color.WHITE,
+        outlineWidth: 2,
+      },
+    })
+  }
+
+  ScreenEventHelper.addEvent({
+    key: "click",
+    type: "LEFT_CLICK",
+    cb(movement) {
+      coordHelper.setFromScreenCoord(movement.position)
+      drawPoint(coordHelper.getCartesian3())
+
+      coordHelper.translate([20, 20, 20])
+      drawPoint(coordHelper.getCartesian3())
+
+      coordHelper.setHeight(10)
+      drawPoint(coordHelper.getCartesian3())
+    },
+  })
+}

packages/zxtool-cesium-utils/package.json

@@ -49,6 +49,7 @@
     "typescript": "^4.8.3"
   },
   "dependencies": {
+    "@types/geojson": "^7946.0.13",
     "@zxtool/utils": "workspace:*",
     "dayjs": "^1.11.5",
     "lodash": "^4.17.21"

packages/zxtool-cesium-utils/src/index.ts

@@ -7,6 +7,7 @@ export * from "./util/MaterialUtil"
 export * from "./util/ViewerUtil"
 export * from "./util/ViewerUtilSync"
 export * from "./util/ZCUConfig"
+export * from "./widget/CoordHelper"
 export * from "./widget/MassivePointsHelper"
 export * from "./widget/PrimitiveManager"
 export * from "./widget/ScreenEventHelper"

packages/zxtool-cesium-utils/src/type/index.d.ts

@@ -0,0 +1,30 @@
+import * as Cesium from "cesium"
+
+export type Num2 = [number, number]
+export type Num3 = [number, number, number]
+
+export type LonLat = Num2
+export type LonLatKey = { key: PropertyKey; lonLat: LonLat }
+export type LonLatObj = {
+  lon: number
+  lat: number
+}
+export type LonLatHeight = Num3
+export type LonLatHeightObj = {
+  lon: number
+  lat: number
+  height: number
+}
+export type LonLatType = "degree" | "radian"
+
+export interface RECT {
+  minx: number
+  maxx: number
+  miny: number
+  maxy: number
+}
+
+export type IEntity = Cesium.Entity & {
+  customField?: EntityCustomField
+  [index: string]: any
+}

packages/zxtool-cesium-utils/src/util/ViewerUtil.ts

@@ -1,4 +1,5 @@
 import * as Cesium from "cesium"
+import type { FeatureCollection } from "geojson"
 import { IPrimitive } from "../widget/PrimitiveManager"
 import { ViewerHelper } from "../widget/ViewerHelper"
 import { ViewerUtilSync } from "./ViewerUtilSync"
@@ -25,10 +26,28 @@ const flyToPrimitive = (primitive: IPrimitive, viewer?: Cesium.Viewer) => {
   ViewerHelper.getViewerPromise(viewer).then(viewer => ViewerUtilSync.flyToPrimitive(primitive, viewer))
 }
 
+interface GetDataSourceProps {
+  viewer?: Cesium.Viewer
+  name: string
+  autoCreate?: boolean
+}
+
+const getCustomDataSource = (props: GetDataSourceProps) => {
+  const { viewer, ...rest } = props
+  return ViewerHelper.getViewerPromise(viewer).then(viewer => ViewerUtilSync.getCustomDataSource({ viewer, ...rest }))
+}
+
+const getGeojsonDataSource = (props: GetDataSourceProps & { geojson?: string | FeatureCollection }) => {
+  const { viewer, ...rest } = props
+  return ViewerHelper.getViewerPromise(viewer).then(viewer => ViewerUtilSync.getGeojsonDataSource({ viewer, ...rest }))
+}
+
 export const ViewerUtil = {
   hideWidget,
   fxaa,
   setSkyBox,
   getScreenRect,
   flyToPrimitive,
+  getCustomDataSource,
+  getGeojsonDataSource,
 }

packages/zxtool-cesium-utils/src/util/ViewerUtilSync.ts

@@ -1,4 +1,5 @@
 import * as Cesium from "cesium"
+import type { FeatureCollection } from "geojson"
 import type { IPrimitive } from "../widget/PrimitiveManager"
 
 const getHideWidgetOption = () => {
@@ -102,11 +103,44 @@ const flyToPrimitive = (primitive: IPrimitive, viewer: Cesium.Viewer) => {
   flyToPrimitive(primitive._primitive, viewer)
 }
 
+interface GetDataSourceSyncProps {
+  viewer: Cesium.Viewer
+  name: string
+  autoCreate?: boolean
+}
+
+const getCustomDataSource = (props: GetDataSourceSyncProps): Cesium.CustomDataSource | null => {
+  const { viewer, name, autoCreate = false } = props
+  let dataSource = viewer.dataSources.getByName(name)[0]
+  if (!dataSource && autoCreate) {
+    dataSource = new Cesium.CustomDataSource(name)
+    dataSource.show = true
+    viewer.dataSources.add(dataSource)
+  }
+  return dataSource ?? null
+}
+
+const getGeojsonDataSource = (
+  props: GetDataSourceSyncProps & { geojson?: string | FeatureCollection },
+): Cesium.GeoJsonDataSource | null => {
+  const { viewer, name, geojson, autoCreate = false } = props
+  let dataSource = viewer.dataSources.getByName(name)[0] as Cesium.GeoJsonDataSource
+  if (!dataSource && autoCreate) {
+    dataSource = new Cesium.GeoJsonDataSource(name)
+    geojson && dataSource.load(geojson)
+    dataSource.show = true
+    viewer.dataSources.add(dataSource)
+  }
+  return dataSource ?? null
+}
+
 export const ViewerUtilSync = {
   getHideWidgetOption,
   hideWidget,
   fxaa,
   setSkyBox,
   getScreenRect,
   flyToPrimitive,
+  getCustomDataSource,
+  getGeojsonDataSource,
 }

packages/zxtool-cesium-utils/src/widget/CoordHelper.ts

@@ -1,6 +1,11 @@
 import * as Cesium from "cesium"
+import { LonLat, LonLatHeight, Num3 } from "../type"
+import { genZCUInfo } from "../util"
 
-class CoordHelper {
+const genInfo = genZCUInfo("CoordHelper")
+const noCoordInfo = genInfo("请先设置坐标")
+
+export class CoordHelper {
   private c3: Cesium.Cartesian3 | null = null
   private viewer: Cesium.Viewer
 
@@ -9,53 +14,64 @@ class CoordHelper {
     if (c3) this.c3 = c3
   }
 
-  static translate(c3: Cesium.Cartesian3, xyz: number[]) {
-    const matrix = Cesium.Transforms.eastNorthUpToFixedFrame(c3)
-    return Cesium.Matrix4.multiplyByPoint(matrix, new Cesium.Cartesian3(...xyz), new Cesium.Cartesian3())
+  private static translate(c3: Cesium.Cartesian3, xyz: number[]) {
+    return Cesium.Matrix4.multiplyByPoint(
+      Cesium.Transforms.eastNorthUpToFixedFrame(c3),
+      new Cesium.Cartesian3(...xyz),
+      new Cesium.Cartesian3(),
+    )
   }
 
   setFromCartesian3(c3: Cesium.Cartesian3) {
     this.c3 = c3
+    return this
   }
   setFromLonLatHeight(lonLatHeight: LonLat | LonLatHeight) {
-    // @ts-ignore
-    this.c3 = Cesium.Cartesian3.fromDegrees(...lonLatHeight)
+    this.c3 = Cesium.Cartesian3.fromDegrees(...(lonLatHeight as Num3))
+    return this
+  }
+  setFromLonLatHeightRadius(lonLatHeight: LonLat | LonLatHeight) {
+    this.c3 = Cesium.Cartesian3.fromRadians(...(lonLatHeight as Num3))
+    return this
   }
   setFromScreenCoord(screen: Cesium.Cartesian2) {
     const c3 = this.viewer.scene.globe.pick(this.viewer.camera.getPickRay(screen)!, this.viewer.scene)
     if (c3) this.c3 = c3
+    return this
   }
 
   getCartesian3() {
-    if (!this.c3) throw new Error("[@zxtool/cesium-utils - CoordHelper] 请先设置坐标")
+    if (!this.c3) throw new Error(noCoordInfo)
     return this.c3
   }
   getLonLatHeight() {
-    if (!this.c3) throw new Error("[@zxtool/cesium-utils - CoordHelper] 请先设置坐标")
+    if (!this.c3) throw new Error(noCoordInfo)
     const lonLatHeightRadian = this.getLonLatHeightRadian()
     const lon = Cesium.Math.toDegrees(lonLatHeightRadian[0])
     const lat = Cesium.Math.toDegrees(lonLatHeightRadian[1])
-    return [lon, lat, lonLatHeightRadian[2]]
+    return [lon, lat, lonLatHeightRadian[2]] as Num3
   }
   getLonLatHeightRadian() {
-    if (!this.c3) throw new Error("[@zxtool/cesium-utils - CoordHelper] 请先设置坐标")
+    if (!this.c3) throw new Error(noCoordInfo)
     const ellipsoid = this.viewer.scene.globe.ellipsoid
     const cartographic = ellipsoid.cartesianToCartographic(this.c3)
-    return [cartographic.longitude, cartographic.latitude, cartographic.height]
+    return [cartographic.longitude, cartographic.latitude, cartographic.height] as Num3
   }
   getScreenCoord() {
-    if (!this.c3) throw new Error("[@zxtool/cesium-utils - CoordHelper] 请先设置坐标")
+    if (!this.c3) throw new Error(noCoordInfo)
     return Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, this.c3)
   }
 
   translate(xyz: number[]) {
-    if (!this.c3) throw new Error("[@zxtool/cesium-utils - CoordHelper] 请先设置坐标")
+    if (!this.c3) throw new Error(noCoordInfo)
     this.c3 = CoordHelper.translate(this.c3, xyz)
     return this
   }
   setHeight(height: number) {
-    if (!this.c3) throw new Error("[@zxtool/cesium-utils - CoordHelper] 请先设置坐标")
+    if (!this.c3) throw new Error(noCoordInfo)
+    const coord = this.getLonLatHeightRadian()
+    coord[2] = height
+    this.setFromLonLatHeightRadius(coord)
+    return this
   }
 }
-
-export default CoordHelper