feat: udpate cesium version, update cesium-utils

apps/web-visualization-demos/package.json

@@ -13,7 +13,7 @@
     "@zxtool/react-utils": "workspace:*",
     "@zxtool/three-utils": "workspace:*",
     "@zxtool/utils": "workspace:*",
-    "cesium": "1.98.1",
+    "cesium": "^1.111.0",
     "classnames": "^2.3.2",
     "custom-style": "workspace:*",
     "gsap": "^3.12.2",

apps/web-visualization-demos/src/bootstrap.ts

@@ -3,7 +3,7 @@ import { ThreeHelper } from "@zxtool/three-utils"
 import * as Cesium from "cesium"
 
 const myToken =
-  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlNjZmNmYzMi1iMWIwLTRlMmEtYWE1OC1mY2U0ZmVmMDk4ZWQiLCJpZCI6MzQyMzcsImlhdCI6MTY5NzIwMzk0MX0.BwX4c-xXJemVGcPhSD2dnntstoLyED9fUaYnoNHLwWM"
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZTAxYTZlOC0yOThlLTQ2OTgtYWFkZC04MDE0ZTQ2YzViYTQiLCJpZCI6NjY5ODcsImlhdCI6MTYzMTQ1MjA1NH0.IuDCpDiMstjhEw2AQ9N9ZQAHCc46n714_AF4kmKn4rw"
 
 ZCUConfig.setConfig({
   CESIUM_TOKEN: myToken,

apps/web-visualization-demos/src/page/cesiumPage/3DTiles.ts

@@ -1,17 +1,15 @@
-import { TilesetHelper, ViewerHelper } from "@zxtool/cesium-utils"
+import { TilesetManager, ViewerHelper } from "@zxtool/cesium-utils"
 import * as Cesium from "cesium"
 import GUI from "lil-gui"
 
 export const 加载3DTiles = () => {
   const viewer = ViewerHelper.getViewer()!
 
-  viewer.scene.terrainProvider = Cesium.createWorldTerrain({ requestVertexNormals: true, requestWaterMask: true })
-  viewer.scene.primitives.add(Cesium.createOsmBuildings())
   viewer.scene.globe.enableLighting = true
 
   const center = [-1.31968, 0.698874]
 
-  TilesetHelper.add({
+  TilesetManager.add({
     key: "columns",
     url: "/model/3dtiles/columns/tileset.json",
     flyTo: false,
@@ -32,7 +30,7 @@ export const 加载3DTiles = () => {
     })
   })
 
-  TilesetHelper.add({
+  TilesetManager.add({
     key: "building",
     url: "/model/3dtiles/building/tileset.json",
     flyTo: true,
@@ -57,7 +55,7 @@ export const 偏移矩阵 = async () => {
   const viewer = ViewerHelper.getViewer()!
   viewer.scene.globe.depthTestAgainstTerrain = true
 
-  const { tileset } = await TilesetHelper.add({
+  const { tileset } = await TilesetManager.add({
     key: "columns",
     url: "/model/3dtiles/columns/tileset.json",
     flyTo: true,
@@ -99,7 +97,7 @@ export const 偏移矩阵 = async () => {
 export const 点云 = async () => {
   const viewer = ViewerHelper.getViewer()!
 
-  // const { tileset } = await TilesetHelper.add({
+  // const { tileset } = await TilesetManager.add({
   //   url: "https://assets.ion.cesium.com/ap-northeast-1/asset_depot/28945/MontrealPointCloud/v1/tileset.json?v=2",
   //   key: 28945,
   // })

apps/web-visualization-demos/src/page/cesiumPage/CesiumPage.tsx

@@ -2,7 +2,7 @@ import { useEffect } from "react"
 import { DevPanel, ToolWrapper } from "react-components"
 import Earth from "src/component/Earth"
 import CesiumPageService from "./CesiumPageService"
-import { 添加分层, 移除Grid } from "./分层"
+import { flyTo, 添加分层, 移除Grid } from "./分层"
 
 const CesiumPage = () => {
   useEffect(() => {
@@ -17,8 +17,11 @@ const CesiumPage = () => {
     <>
       <DevPanel>
         <ToolWrapper name="hello">
-          <button onClick={添加分层}>添加分层</button>
-          <button onClick={移除Grid}>移除Grid</button>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 15 }}>
+            <button onClick={添加分层}>添加分层</button>
+            <button onClick={移除Grid}>移除Grid</button>
+            <button onClick={flyTo}>flyTo</button>
+          </div>
         </ToolWrapper>
       </DevPanel>
       <Earth />

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

@@ -1,21 +1,21 @@
-import { CommonUtil, ViewerHelper } from "@zxtool/cesium-utils"
-import { EmitterHelper } from "@zxtool/utils"
+import { CommonUtil, TilesetManager, ViewerHelper } from "@zxtool/cesium-utils"
 import * as Cesium from "cesium"
 import { primitiveV } from "./primitive"
 
 class CesiumPageService {
   moduleEnter() {
     CommonUtil.enableIframe()
     const viewer = ViewerHelper.getViewer()!
-    viewer.camera.flyTo({
-      destination: Cesium.Cartesian3.fromDegrees(120.65187, 31.145227, 10000),
-    })
-    viewer.scene.imageryLayers.addImageryProvider(
-      new Cesium.UrlTemplateImageryProvider({
-        url: "//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
-      }),
-    )
-
+    // viewer.camera.flyTo({
+    //   destination: Cesium.Cartesian3.fromDegrees(120.65187, 31.145227, 10000),
+    // })
+    // viewer.scene.imageryLayers.addImageryProvider(
+    //   new Cesium.UrlTemplateImageryProvider({
+    //     url: "//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
+    //   }),
+    // )
+
+    this.loadTileset()
     // this.init()
   }
 
@@ -48,35 +48,13 @@ class CesiumPageService {
 
     // 粒子初步()
   }
-}
-
-export default new CesiumPageService()
-
-const emitter = new EmitterHelper({ maxCount: { history: 1 } })
-class VService {
-  v?: number
-  key = Symbol()
-
-  updateV() {
-    if (this.v) this.v++
-    else this.v = 1
-    emitter.emit(this.key, this.v)
-  }
-
-  destroy() {
-    this.v = undefined
-    emitter.clearHistory()
-  }
 
-  getVAsync() {
-    const { promise, reject } = emitter.onceAsync(this.key, true)
-    setTimeout(() => reject("timeout"), 2000)
-    return promise
-  }
-
-  log() {
-    console.log(emitter)
+  loadTileset() {
+    TilesetManager.add({ url: 2373086, flyTo: true, name: "dyt" }).then(() => {
+      console.log(TilesetManager.getListByCondition({ name: "dyt" }), TilesetManager)
+    })
+    ViewerHelper.getViewer()!.scene.setTerrain(new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromIonAssetId(2373160)))
   }
 }
 
-export const vService = new VService()
+export default new CesiumPageService()

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

@@ -1,11 +1,12 @@
-import { TilesetHelper, ViewerHelper } from "@zxtool/cesium-utils"
+import { TilesetManager, ViewerHelper } from "@zxtool/cesium-utils"
 import * as Cesium from "cesium"
 import GUI from "lil-gui"
 
 export const cesiumFlightTracker = async () => {
   const viewer = ViewerHelper.getViewer()!
-  viewer.scene.terrainProvider = Cesium.createWorldTerrain({ requestVertexNormals: true, requestWaterMask: true })
-  const buildingsTileset = Cesium.createOsmBuildings()
+  const terrainProvider = await Cesium.createWorldTerrainAsync({ requestVertexNormals: true, requestWaterMask: true })
+  viewer.scene.terrainProvider = terrainProvider
+  const buildingsTileset = await Cesium.createOsmBuildingsAsync()
   viewer.scene.primitives.add(buildingsTileset)
 
   async function addBuildingGeoJSON() {
@@ -38,10 +39,7 @@ export const cesiumFlightTracker = async () => {
   // const newBuildingTileset = await Cesium.Cesium3DTileset.fromIonAssetId(2352154);
   // viewer.scene.primitives.add(newBuildingTileset);
 
-  TilesetHelper.add({
-    url: Cesium.IonResource.fromAssetId(2352154),
-    key: "2352154",
-  }).then(({ tileset }) => {
+  TilesetManager.add({ url: 2352154, key: "2352154" }).then(({ tileset }) => {
     console.log(tileset)
     viewer.flyTo(tileset)
 

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

@@ -21,7 +21,7 @@ export const 添加分层 = () => {
 
   const rect = getScreenRect(viewer)
 
-  const _points = genMassivePoints(3000, rect)
+  const _points = genMassivePoints(10000, rect)
   const points = MPH.calcLonLatsMostDetailed(_points, { drawGrid: true, keepKeys: Array.from(Array(20), (_, i) => i) })
 
   points.forEach(item => {
@@ -34,15 +34,14 @@ export const 添加分层 = () => {
         outlineWidth: 1,
         disableDepthTestDistance: Number.POSITIVE_INFINITY,
       },
-      // label: {
-      //   text: item.posKey,
-      //   font: "14px sans-serif",
-      //   pixelOffset: new Cesium.Cartesian2(15, -15),
-      // },
     })
   })
 }
 
 export const 移除Grid = () => {
   MPH?.removeGrid()
 }
+
+export const flyTo = () => {
+  const p = MPH?.getGrid() as Cesium.GroundPrimitive
+}

apps/web-visualization-demos/src/page/cesiumPage/动画.ts

@@ -2,10 +2,12 @@ import { ViewerHelper } from "@zxtool/cesium-utils"
 import * as Cesium from "cesium"
 import planeData from "src/assets/plane.json"
 
-export const 芜湖起飞 = () => {
+export const 芜湖起飞 = async () => {
   const viewer = ViewerHelper.getViewer()!
-  viewer.scene.terrainProvider = Cesium.createWorldTerrain({ requestVertexNormals: true, requestWaterMask: true })
-  viewer.scene.primitives.add(Cesium.createOsmBuildings())
+  const terrainProvider = await Cesium.createWorldTerrainAsync({ requestVertexNormals: true, requestWaterMask: true })
+  viewer.scene.terrainProvider = terrainProvider
+  const buildingsTileset = await Cesium.createOsmBuildingsAsync()
+  viewer.scene.primitives.add(buildingsTileset)
 
   const interval = 30
   const totalTime = (planeData.length - 1) * interval

apps/web-visualization-demos/src/shader/study/矩阵.glsl

@@ -0,0 +1,39 @@
+#define PI 3.14159265358979323846
+
+precision lowp float;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+
+float myBox(vec2 uv, vec2 size) {
+  vec2 halfSize = size / 2.0;
+  return step(uv.x, halfSize.x) * step(-halfSize.x, uv.x) * step(uv.y, halfSize.y) * step(-halfSize.y, uv.y);
+}
+
+float myBox1(vec2 uv, vec2 size) {
+  vec2 halfSize = size / 2.0;
+  vec2 r = smoothstep(halfSize + 0.001, halfSize, uv) * smoothstep(-halfSize - 0.001, - halfSize, uv);
+  return r.x * r.y;
+}
+
+float cross(vec2 uv, float size) {
+  return myBox1(uv, vec2(size * 0.25, size)) + myBox1(uv, vec2(size, size * 0.25));
+}
+
+mat2 rotate2d(float angle) {
+  return mat2(cos(angle), - sin(angle), sin(angle), cos(angle));
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  uv -= 0.5;
+  // vec3 color = vec3(0.4824, 0.8196, 0.451);
+
+  uv = rotate2d(sin(u_time) * PI) * uv;
+
+  float t = cross(uv, 0.3);
+  vec3 color = vec3(uv, 1.0);
+  color += t;
+
+  gl_FragColor = vec4(color, 1.0);
+}

packages/zxtool-cesium-utils/package.json

@@ -31,7 +31,7 @@
     "@types/lodash": "^4.14.185",
     "@types/node": "^18.7.18",
     "@types/rollup-plugin-auto-external": "^2.0.2",
-    "cesium": "1.98.1",
+    "cesium": "^1.111.0",
     "cross-env": "^7.0.3",
     "esbuild": "^0.15.7",
     "eslint": "^8.24.0",

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

@@ -8,8 +8,8 @@ export * from "./util/ViewerUtil"
 export * from "./util/ViewerUtilSync"
 export * from "./util/ZCUConfig"
 export * from "./widget/MassivePointsHelper"
+export * from "./widget/PrimitiveManager"
 export * from "./widget/ScreenEventHelper"
-export * from "./widget/TilesetHelper"
-export { default as TilesetHelper } from "./widget/TilesetHelper"
+export * from "./widget/TilesetManager"
 export * from "./widget/ViewerHelper"
 export { default as ViewerHelper } from "./widget/ViewerHelper"

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

@@ -1,4 +1,5 @@
 import * as Cesium from "cesium"
+import type { IPrimitive } from "../widget/PrimitiveManager"
 
 export const ViewerUtilSync = {
   getHideWidgetOption() {
@@ -86,4 +87,7 @@ export const ViewerUtilSync = {
       maxy: Cesium.Math.toDegrees(topLeftCartographic.latitude),
     }
   },
+  flyToPrimitive(primitive: IPrimitive, viewer: Cesium.Viewer) {
+    // primitive.
+  },
 }

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

@@ -5,7 +5,7 @@ export interface ZCUConfigType {
   CESIUM_TOKEN?: string
   viewerOptions?: Cesium.Viewer.ConstructorOptions & { hideWidget?: boolean; fxaa?: boolean }
   homeView?: Parameters<Cesium.Camera["flyTo"]>[0]
-  tilesetConfig?: Omit<ConstructorParameters<typeof Cesium.Cesium3DTileset>[0], "url">
+  tilesetOptions?: Cesium.Cesium3DTileset.ConstructorOptions
 }
 
 class ZCUC {

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

@@ -0,0 +1,3 @@
+import { genInfo } from "@zxtool/utils/dist/util"
+
+export const genZCUInfo = genInfo("@zxtool/cesium-utils")

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

@@ -210,4 +210,8 @@ export class MassivePointsHelper {
       this.primitive = null
     }
   }
+
+  getGrid() {
+    return this.primitive
+  }
 }