Merge pull request #1 from wujighostking/develop

Develop

Author: wujighostking

eslint.config.js

@@ -4,4 +4,5 @@ export default defineConfig({
   formatters: true,
   unocss: true,
   vue: true,
+  ignores: ['public/cesium/**/*.*'],
 })

package.json

@@ -22,6 +22,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "cesium": "^1.135.0",
     "vue": "^3.5.24",
     "vue-router": "^4.6.3"
   },

packages/app/components/CesiumViewer.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { Viewer } from 'cesium'
+import { useGLTF } from '#imports'
+import { Cartesian3, Color, HeightReference, Math, PolygonHierarchy } from 'cesium'
+
+const cesiumContainerRef = useTemplateRef('cesiumContainer')
+
+let viewer: Viewer
+
+onMounted(() => {
+  if (!cesiumContainerRef.value)
+    return
+
+  viewer = useViewer(cesiumContainerRef.value)
+
+  // 加载泰山区宿舍的GeoJSON数据
+  const data = loadGeoJson('/data/泰山区宿舍.geojson', {
+    stroke: Color.fromCssColorString('#aaaa9d'),
+    fill: Color.fromCssColorString('#aaaa9d').withAlpha(0.5),
+    strokeWidth: 3,
+    clampToGround: true,
+  })
+  viewer.dataSources.add(data)
+
+  geoJsonToBuildingModel('/data/泰山区宿舍1-4.geojson').then((positions) => {
+    positions.forEach((position) => {
+      viewer.entities.add({
+        polygon: {
+          hierarchy: new PolygonHierarchy(position), // 底面形状
+          height: 0, // 底部高度（从地面0开始）
+          heightReference: HeightReference.CLAMP_TO_TERRAIN,
+          extrudedHeight: 30, // 顶部高度（总高度100米，可调整）
+          material: Color.WHITE, // 填充材质（半透明红色）
+          outline: true, // 显示轮廓
+          outlineColor: Color.BLACK, // 轮廓颜色
+          outlineWidth: 2, // 轮廓宽度
+        },
+      })
+    })
+  })
+
+  useGLTF('/data/Air.glb', { position: Cartesian3.fromDegrees(113.36629986763, 23.15732289356693, 3) })
+
+  viewer.camera.flyTo({
+    destination: Cartesian3.fromDegrees(113.36629986763, 23.15732289356693, 70),
+    orientation: {
+      heading: Math.toRadians(-90),
+      pitch: 0,
+    },
+  })
+})
+
+onUnmounted(() => {
+  if (viewer) {
+    viewer.destroy()
+  }
+})
+</script>
+
+<template>
+  <div>
+    <div ref="cesiumContainer" style="width: 100%;height: 100vh;" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

packages/app/composables/useGLTF.ts

@@ -0,0 +1,18 @@
+import type { Cartesian3 } from 'cesium'
+import { useViewer } from '~/composables/useViewer'
+
+export function useGLTF(uri: string, options: { position: Cartesian3 }) {
+  const { position } = options
+  const viewer = useViewer()
+
+  viewer.entities.add({
+    position,
+    model: {
+      uri,
+
+      // minimumPixelSize: 64,
+      // maximumScale: 10,
+      // scale: 1.0,
+    },
+  })
+}

packages/app/composables/useViewer.ts

@@ -0,0 +1,38 @@
+import { ImageryLayer, OpenStreetMapImageryProvider, Viewer } from 'cesium'
+
+// eslint-disable-next-line import/no-mutable-exports
+export let viewer: Viewer
+
+export function useViewer(container?: HTMLDivElement) {
+  if (viewer) {
+    return viewer
+  }
+  viewer = new Viewer(container!, {
+    geocoder: false,
+    homeButton: false,
+    sceneModePicker: false,
+    baseLayerPicker: false,
+    navigationHelpButton: false,
+
+    animation: false,
+    timeline: false,
+    creditContainer: document.createElement('div'),
+    fullscreenButton: false,
+
+    infoBox: false,
+
+    baseLayer: new ImageryLayer(new OpenStreetMapImageryProvider({
+      url: 'https://tile.openstreetmap.org/',
+    })),
+    // terrain: Terrain.fromWorldTerrain(),
+  })
+
+  const cameraController = viewer.scene.screenSpaceCameraController
+  cameraController.minimumZoomDistance = 3
+  cameraController.maximumZoomDistance = 600
+
+  // 摄像机不能进入地下
+  viewer.scene.globe.depthTestAgainstTerrain = true
+
+  return viewer
+}

packages/app/pages/index.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
-
+import CesiumViewer from '~/components/CesiumViewer.vue'
 </script>
 
 <template>
-  <div>app</div>
+  <div>
+    <CesiumViewer />
+  </div>
 </template>
 
-<style scoped>
-
+<style>
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
 </style>

packages/app/plugins/cesium.client.ts

@@ -0,0 +1,16 @@
+import 'cesium/Build/Cesium/Widgets/widgets.css'
+
+export default defineNuxtPlugin({
+  name: 'nuxt-plugin-cesium',
+  enforce: 'pre',
+  hooks: {
+    'app:beforeMount': function () {
+      ;(window as any).CESIUM_BASE_URL = '/cesium/'
+    },
+
+  },
+  env: {
+    // 如果不希望插件在渲染仅服务端或岛式组件时运行，将此值设置为 `false`
+    islands: false,
+  },
+})

packages/app/utils/loadGeoJson.ts

@@ -0,0 +1,47 @@
+import { Cartesian3, GeoJsonDataSource } from 'cesium'
+import { EMPTY_OBJ, isFunction } from '~~/packages/shared/utils'
+
+interface Options extends GeoJsonDataSource.LoadOptions {
+  beforeLoad?: () => void
+  afterLoaded?: (data: any) => void
+}
+
+export function loadGeoJson(url: string, options?: Options) {
+  const { beforeLoad, afterLoaded } = options ?? EMPTY_OBJ
+
+  if (isFunction(beforeLoad)) {
+    beforeLoad()
+  }
+
+  const geoJsonPending = GeoJsonDataSource.load(url, options)
+
+  return geoJsonPending.then((data) => {
+    if (isFunction(afterLoaded)) {
+      afterLoaded(data)
+    }
+
+    return data
+  })
+}
+
+export async function geoJsonToBuildingModel(url: string) {
+  const geojsonData = await (await fetch(url)).json()
+
+  let positions: Cartesian3[][] = []
+
+  // 解析GeoJSON并生成多面体（棱柱）
+  geojsonData?.features?.forEach?.((feature: any) => {
+    const geometry = feature.geometry
+    if (geometry.type === 'Polygon') {
+      positions = geometry.coordinates.map((coordinates: [number, number][]) => {
+        return coordinates.map((coord: [number, number]) => {
+          const longitude = coord[0] // 经度
+          const latitude = coord[1] // 纬度
+          return Cartesian3.fromDegrees(longitude, latitude)
+        })
+      })
+    }
+  })
+
+  return positions
+}

packages/shared/utils/cancel.ts

@@ -0,0 +1,35 @@
+import { LOOP } from './constants'
+
+export function cancelPromise(callback: (...args: any[]) => any) {
+  let cancel = LOOP
+
+  const promise = new Promise((resolve, reject) => {
+    cancel()
+    cancel = () => {
+      resolve = reject = LOOP
+    }
+
+    try {
+      const maybePromiseOrResult = callback()
+
+      if (maybePromiseOrResult instanceof Promise) {
+        maybePromiseOrResult.then((result) => {
+          resolve(result)
+        }).catch((error) => {
+          reject(error)
+        })
+      }
+      else {
+        resolve(maybePromiseOrResult)
+      }
+    }
+    catch (error) {
+      reject(error)
+    }
+  })
+
+  return {
+    cancel,
+    promise,
+  }
+}

packages/shared/utils/constants.ts

@@ -0,0 +1,4 @@
+export const EMPTY_OBJ = Object.create(null)
+
+// eslint-disable-next-line antfu/top-level-function
+export const LOOP = () => {}