引入cesium

.eslintrc.cjs

@@ -35,6 +35,7 @@ module.exports = {
         'no-debugger': 'off',
         // Remove conflicting rules with Prettier
         'prettier/prettier': 'off',
+        'rule-name': 'off',
         'vue/html-indent': [
             'error',
             4,

nuxt.config.ts

@@ -67,12 +67,14 @@ export default defineNuxtConfig({
             link: [
                 { rel: 'icon', type: 'image/svg+xml', href: 'https://blog-cli.oss-cn-hangzhou.aliyuncs.com/logo.ico' },
                 { rel: 'dns-prefetch', href: 'https://blog-cli.oss-cn-hangzhou.aliyuncs.com' },
-                { rel: 'dns-prefetch', href: 'https://docs.gaojianghua.cn' }
+                { rel: 'dns-prefetch', href: 'https://docs.gaojianghua.cn' },
+                { rel: 'stylesheet', href: 'https://unpkg.com/[email protected]/Build/Cesium/Widgets/widgets.css' }
             ],
             script: [
                 {
                     src: 'https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_28150_11.961f67029185d625b7656c914468febb.js'
-                }
+                },
+                { src: 'https://unpkg.com/[email protected]/Build/Cesium/Cesium.js', defer: true }
             ]
         }
     }

src/app.d.ts

@@ -1,8 +1,8 @@
 /*
  * @Author       : 15257184434 [email protected]
  * @Date         : 2023-01-15 09:25:15
- * @LastEditors  : 15257184434 [email protected]
- * @LastEditTime : 2023-01-15 09:25:16
+ * @LastEditors: 高江华
+ * @LastEditTime: 2024-04-08 10:02:48
  * @FilePath     : \varlet-nuxt3-example\src\app.d.ts
  * @Description  :
  *
@@ -13,3 +13,13 @@ declare module '*.vue' {
     const componentOptions: ComponentOptions;
     export default componentOptions;
 }
+declare module './data.ts'
+declare global {
+    interface Window {
+        CESIUM_BASE_URL: string
+    }
+}
+declare module 'cesium' {
+    // 定义或导入Cesium的类型定义
+    export = Cesium;
+}

src/data.ts

@@ -122,6 +122,10 @@ const menus = [
         name: '文章',
         path: '/article'
     },
+    {
+        name: '作品',
+        path: '/works'
+    },
     {
         name: '游戏',
         path: '/game'
@@ -159,10 +163,29 @@ const backMenus = [
     }
 ];
 
+const worksMenus = [
+    {
+        name: 'Three',
+        type: 0
+    },
+    {
+        name: 'Cesium',
+        type: 1
+    },
+    {
+        name: 'Charts',
+        type: 2
+    }
+]
+
+const defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNjZhYTIxZC0zOGRmLTQxZDUtYjY3YS05MWNmYTViOGQxNTYiLCJpZCI6MjA3MjIzLCJpYXQiOjE3MTI1NDU3ODJ9.x3KnX-97CZIytvhOgG5Ox5TopzNUb_qH4_6VSwpLUA4'
+
 export default {
     articleMenus,
     gameMenus,
     list,
     menus,
-    backMenus
+    backMenus,
+    worksMenus,
+    defaultAccessToken
 };

src/pages/works-details/[id].vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="page mx-auto flex w-[100rem]">
+        <div class="box h-full flex-1 p-[0.5rem]">
+            <div id="cesiumContainer" ref="cesiumContainer" class="h-full" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import data from '@/data';
+const cesiumContainer = ref<HTMLDivElement>()
+if (process.client) {
+    window.CESIUM_BASE_URL = 'https://unpkg.com/[email protected]/Build/Cesium/';
+}
+
+onMounted(() => {
+    Cesium.Ion.defaultAccessToken = data.defaultAccessToken;
+
+    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
+    const viewer = new Cesium.Viewer("cesiumContainer", {
+        baseLayer: Cesium.ImageryLayer.fromWorldImagery({
+            
+        }),
+        baseLayerPicker: false,
+    });
+
+    // Fly the camera to San Francisco at the given longitude, latitude, and height.
+    viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
+        orientation: {
+            heading: Cesium.CesiumMath.toRadians(0.0),
+            pitch: Cesium.CesiumMath.toRadians(-15.0),
+        }
+    });
+
+    // Add Cesium OSM Buildings, a global 3D buildings layer.
+    const buildingTileset = Cesium.createOsmBuildingsAsync();
+    viewer.scene.primitives.add(buildingTileset);
+})
+</script>
+
+<style scoped>
+    .page {
+        height: calc(100vh - 5rem - 1.5rem);
+    }
+</style>

src/pages/works.vue

@@ -0,0 +1,100 @@
+<!--
+ * @Author: 高江华 g598670138@163.com
+ * @Date: 2024-04-08 09:57:32
+ * @LastEditors: 高江华
+ * @LastEditTime: 2024-04-08 10:02:00
+ * @Description: file content
+-->
+<template>
+    <div class="page mx-auto flex w-[100rem] flex-col">
+        <div class="box flex h-[5rem] items-center">
+            <div
+                v-for="(item, i) in worksMenus"
+                :key="i"
+                class="text-cd ml-[2rem] flex h-[5rem] cursor-pointer items-center justify-around text-[1.5rem]"
+                :class="menuIndex == item.type ? 'main-color' : 'text-white'"
+                @click="chooseMenu(item.type)"
+            >
+                {{ item.name }}
+            </div>
+        </div>
+        <div ref="el" class="box mt-[0.5rem] h-full flex-1 overflow-y-scroll p-3">
+            <div v-if="list.length === 0" class="flex flex-col items-center justify-center">
+                <span class="mt-5 text-[1.2rem] text-[#ccc]">作者很懒，未发布新的内容！</span>
+            </div>
+            <div v-else class="flex flex-wrap items-center justify-between">
+                <div
+                    v-for="(item, j) in list"
+                    :key="j"
+                    class="box box-cd mb-3 flex w-[32.9%] cursor-pointer flex-col items-center justify-between p-[1rem]"
+                    @click="openDetails(j)"
+                >
+                    <div class="child-right">
+                        <img
+                            class="h-auto w-full shrink object-cover"
+                            src="https://official-document.oss-cn-hangzhou.aliyuncs.com/1c41e41a9594d932e34ce0be021bb0fc.jpg"
+                            alt="" 
+                        >
+                    </div>
+                    <div class="child-left mt-[1rem] flex h-[8rem] w-full flex-1 flex-col justify-between">
+                        <div class="child-title text-[1.3rem] leading-none text-white">
+                            {{ item.title }}
+                        </div>
+                        <div class="child-desc mt-[0.5rem] truncate text-[1.2rem] text-[#ccc]">
+                            {{ item.desc }}
+                        </div>
+                        <div class="tags mt-[0.5rem] flex items-center">
+                            <div v-for="(tag, i) in item.tags" :key="i" class="box mr-3 py-0.5 px-3 text-white">
+                                {{ tag }}
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import data from '@/data';
+import { useRouter } from 'vue-router';
+import { useScroll } from '@vueuse/core';
+
+const menuIndex = ref(0);
+const worksMenus = ref(data.worksMenus);
+
+const router = useRouter();
+const el = ref<HTMLElement | null>(null);
+const list = ref(data.list);
+
+const { arrivedState } = useScroll(el);
+const chooseMenu = (i: number) => {
+    menuIndex.value = i;
+    switch (i) {
+    case 0:
+        list.value = data.list;
+        break;
+    default:
+        list.value = [];
+        break;
+    }
+};
+
+const openDetails = (i: number) => {
+    router.push(`/works-details/${i}`);
+};
+
+watch(arrivedState, newValue => {
+    if (!newValue.top) {
+        list.value = [...list.value, ...data.list];
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+    .page {
+        height: calc(100vh - 5rem - 1.5rem);
+    }
+</style>