sat-earth 0.7.1 → 0.7.2

package/README.md

@@ -1,345 +1,345 @@
-## 什么是快乐“星球” ?
-  [SatEarth](https://gitee.com/gengkaibo/sat-earth)是一个三维地球组件库，目的是支持开发人员快速搭建三维场景。
-
-## 组件库亮点
-- 内置丰富基础功能组件以及菜单组件，如果不需要定制化开发，可以分分钟出一个平台级应用系统
-- 对外暴露API，可随意调用sat-earth、mars3d、cesium API 进行定制化开发
-- 功能组件可配合菜单组件也可独立运行，兼顾灵活与便捷
-- 对样式进行了友好的移动端适配，兼顾大屏与小屏视觉体验
-- ...
-
-## 当前开发进度
-- 1.数据源 (done)
-- 2.地图部件 (done)
-  - 坐标信息
-  - 悬浮导航
-  - 时钟动画
-  - 鹰眼地图
-- 3.工具栏
-  - 3.1.搜索定位(done)
-    - 地名检索
-    - 坐标定位
-    - 路径规划
-  - 3.2.量测工具(done)
-    - 坐标测量
-    - 空间距离
-    - 水平面积
-    - 高度测量
-    - 三角测量
-    - 方位测量
-    - 贴地距离
-    - 贴地面积
-  - 3.3.图上标绘(done)
-  - 3.4.出图工具(done)
-  - 3.5.空间分析
-    - 剖面分析
-    - 方量分析
-    - 通视分析
-    - 可视域分析
-    - 限高分析
-    - 缓冲分析
-    - 剖面分析
-  - 3.6.地形分析
-    - 挖地分析
-    - 等高线分析
-    - 坡度坡向分析
-    - 淹没分析
-  - 3.7.模型分析
-    - 淹没分析
-    - 模型压平
-    - 模型裁剪
-    - 模型剖切
-  - 3.8.视频融合
-  - 3.9.飞行漫游
-
-## 前序准备
-- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境
-- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
-- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
-- [TypeScript](https://www.typescriptlang.org/) - 熟悉 `TypeScript` 基本语法
-- [Es6+](http://es6.ruanyifeng.com/) - 熟悉`es6`基本语法
-- [Cesium](https://cesium.com/) - Cesium是一个开源的,基于webgl的二、三维地图引擎
-- [Mars3D](http://mars3d.cn/) - 基于Cesium优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台
-
-## 安装
-- 首先在命令行执行如下命令添加 `sat-earth` 的依赖
-```bash
-npm i sat-earth
-```
-
-- 将 `node_modules/mars3d-cesium/Build/Cesium` 目录拷贝到我们开发目录中的public下
-然后在index.html中引入 `cesium` 库
-```html
-<!--引入cesium基础lib-->
-<link href="/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
-<script src="/Cesium/Cesium.js" type="text/javascript"></script>
-```
-
-- 如果您的项目也用了`pinia`，请修改您项目中的piniaStore直接使用`sat-earth`的导出，并且main.ts中不需要在调用App.use(piniaStore)
-```ts
-// const piniaStore = createPinia()
-// export { piniaStore }
-export { piniaStore } from 'sat-earth'
-```
-
-- 在 `main.[jt]s` 中引入我们的 `sat-earth` 资源
-
-```ts
-import { createApp } from "vue"
-import App from "./app.vue"
-import satEarth from 'sat-earth'
-import 'sat-earth/dist/style.css'
-const app = createApp(App)
-
-app.use(satEarth)
-app.mount("#app")
-
-```
-
-- 在`tsconfig.json`中的`types`加入类型声明文件`sat-earth/dist/auto-components`，来支持[Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)的类型提示
-```json
-{
-  "compilerOptions": {
-    "target": "esnext", // 指定ts编译后的ECMAScript目标版本: 'es3' (default), 'es5', 'es2015', 'es2016', 'es2017', or 'esnext'
-    "module": "esnext", // 指定编译后代码使用的模块化规范: 'commonjs', 'amd', 'umd' or 'es...'
-    "declaration": false, // 是否生成声明文件
-    "strict": true, // 开启全部严格模式
-    "removeComments": true, // 删除注释
-    "allowJs": true, // 是否对js文件开启编译
-    "noImplicitAny": false, // 支持类型不标注可以默认any
-    "allowSyntheticDefaultImports": true, // 允许没有导出的模块中导入
-    "resolveJsonModule": true, // json文件是否可导入
-    "isolatedModules": true, // 将每个文件作为单独的模块
-    "useDefineForClassFields": true, // class类的变量声明方式从 = 赋值的方式变更成了Object.defineProperty;所有的字段声明都会生效，即使它没有指定默认值
-    "moduleResolution": "node", // 置顶模块的解析策略，'node' or 'classic'
-    "esModuleInterop": true, // 支持es6,commonjs模块
-    "skipLibCheck": true, // 跳过类库检测
-    "jsx": "preserve",
-    "lib": [
-      "esnext",
-      "dom"
-    ],
-    "types": [
-      "vite/client",
-      "sat-earth/dist/auto-components"
-    ],
-    "paths": {
-      "@src/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "**/*.ts",
-    "**/*.d.ts",
-    "**/*.vue"
-  ]
-}
-```
-
-## 快速开始
-```ts
-<script setup lang="ts">
-import { satMapTypes, type SatMenu_Type_MenuItem } from 'sat-earth'
-/*
-  初始化参数尽量保证了和mars3d的Map构造一致性，但是任然有一些地方进行了小改动，具体查看类型SatMapOptions，下面请看改动：
-    1. 在mars3d的Map构造参数的基础上扩展了custom对象。
-      （
-        custom: {
-          // 工具栏新增项
-          layoutTheme: {
-            primaryColor: '#409eff',
-            isDark: true,
-            showDarkRadio: true
-          },
-          toolbar: {
-            mapSplit: true // 开启卷帘工具
-            bookmark: true // 开启视角书签工具
-            keyboardRoam: true // 开启键盘漫游功能
-          },
-          plotModelUrlPrefix?: string // 标绘模型地址前缀
-          layers: {
-            // list 这是要加入到 'SatSource' 数据源管理中的自定义Layer图层，参数与 mars3d构造 Layer 的参数
-            // 一致，通过 'id/pid' 在 'SatSource' 组件中形成对应的树形结构, 如果不加pid的时候或者任意添加的
-            // pid导致在所有图层中并没有查找到该 pid 对应图层项时，组件会给该项添加默认pid并加到树的跟节点上。
-            list: []
-            // 辅助图层
-            auxiliaryLayers: {
-              cover: boolean // 是否覆盖内置的辅助图层
-              list: [] // 自定义的辅助图层Layer集合
-            },
-            // 地形图层
-            terrainLayers: {
-              cover: boolean // 是否覆盖内置的地形图层
-              list: [] // 自定义的地形图层Layer集合
-            }
-          }
-        }
-      ）
-    2. 对mars3d的Map构造参数中原有的basemaps的传参略作了修改。
-      （
-        basemaps:[] => basemaps:{
-          cover: boolean
-          list: []
-        }
-        ①. 在 'sat-earth' 中加入了默认的基础底图，这里可以选择是否覆盖重写;
-        ②. basemaps中配置的底图最终也会出现在 'SatSource' 数据源组件中的树形结构中;
-      ）
-
-*/
-const options: satMapTypes.SatMapOptions = {
-  map3d: {
-    control: {
-      baseLayerPicker: true,
-      animation: false,
-      timeline: false
-    },
-    basemaps: {
-      cover: false,
-      list: []
-    },
-    custom: {
-      layoutTheme: {
-        primaryColor: '#409eff',
-        isDark: true,
-        showDarkRadio: true
-      },
-      toolbar: {
-        mapSplit: true, // 开启卷帘工具
-        bookmark: true, // 开启视角书签工具
-        keyboardRoam: true, // 开启键盘漫游功能
-      },
-      layers: {
-        /* list 这是要加入到数据源管理中的自定义Layer图层，参数与 mars3d构造 Layer 的参数一致，
-         通过 'id/pid' 在 'SatSource' 组件中形成对应的树形结构, 不加 pid 的时候或者任意添加的 pid
-         导致所有图层中并没有该 pid 对应图层项时，组件会给该项添加默认的 pid，并加入到树的跟节点上。
-        */
-        list: [
-          {
-            'id': 202012,
-            'type': '3dtiles',
-            'name': '石化工厂',
-            'url': 'http://data.mars3d.cn/3dtiles/max-shihua/tileset.json',
-            'position': { 'lng': 117.077158, 'lat': 31.659116, 'alt': 24.6 },
-            'maximumScreenSpaceError': 1,
-            'maximumMemoryUsage': 1024,
-            'highlight': { 'type': 'click', 'color': '#00FF00' },
-            'popup': 'all',
-            'flyTo': true,
-            'scenetree': 'scenetree.json',
-            'center': { 'lat': 31.654916, 'lng': 117.08278, 'alt': 279, 'heading': 316, 'pitch': -29 }
-          },
-        ],
-        // 辅助图层
-        auxiliaryLayers: {
-          cover: false, // 是否覆盖内置的辅助图层
-          list: [] // 自定义的辅助图层Layer集合
-        },
-        // 地形图层
-        terrainLayers: {
-          cover: false, // 是否覆盖内置的地形图层
-          list: [] // 自定义的地形图层Layer集合
-        },
-      },
-    },
-  },
-}
-
-const isSourceVisible = ref(true)
-
-const treeData = ref<SatMenu_Type_MenuItem[]>([
-  {
-    name: 'hello',
-    label: '你好',
-    icon: {
-      class: 'fa-commenting-o',
-    },
-    enable: false,
-    active: false
-  },
-])
-const changeDataToEnable = (item: SatMenu_Type_MenuItem) => {
-  item.enable = true
-  item.active = true
-  console.log('do init...')
-}
-const changeDataToUnEnable = (item: SatMenu_Type_MenuItem) => {
-  item.enable = false
-  item.active = false
-  console.log('do destroy...')
-}
-
-const isMounted = ref(false)
-onMounted(() => {
-  isMounted.value = true
-})
-</script>
-```
-```html
-<template>
-  <SatGlobe
-    v-if="isMounted"
-    :sat-map-options="options"
-  >
-    <SatMenu>
-      <SatSource></SatSource>
-      <SatMapPart></SatMapPart>
-      <SatLocation></SatLocation>
-      <SatMeasure></SatMeasure>
-      <SatPlot></SatPlot>
-      <SatPicture></SatPicture>
-      <SatSpatialAnalysis></SatSpatialAnalysis>
-      <SatTerrainAnalysis></SatTerrainAnalysis>
-      <SatModelAnalysis></SatModelAnalysis>
-      <SatVideoFusion></SatVideoFusion>
-      <SatRoam></SatRoam>
-      <!-- 自定义菜单项 -->
-      <template #custom-enable>
-        <SatMenuTree
-          :custom="true"
-          show-type="enabled"
-          :tree-data="treeData.filter((i) => i.enable)"
-          @custom-click="changeDataToEnable"
-          @custom-close-click="changeDataToUnEnable"
-        ></SatMenuTree>
-      </template>
-      <template #custom>
-        <SatMenuTree
-          :custom="true"
-          :tree-data="treeData"
-          @custom-click="changeDataToEnable"
-        ></SatMenuTree>
-      </template>
-    </SatMenu>
-
-    <!-- 使用SatPanel 面板组件 配合自定义菜单项完成自定义功能面板的开发-->
-    <!-- <SatPanel
-          v-if="treeData.filter(item=>item.name=='hello')[0].enable"
-          v-show="treeData.filter(item=>item.name=='hello')[0].active"
-          title="你好啊"
-          :close-event="()=>{treeData.filter(item=>item.name=='hello')[0].enable = false}"
-          :minimize-event="()=>{treeData.filter(item=>item.name=='hello')[0].active = false}"
-        >
-          内容
-        </SatPanel> -->
-
-    <!-- 在内置的menu外部使用组件 -->
-    <!-- <SatSource v-model:visible="isSourceVisible"></SatSource> -->
-  </SatGlobe>
-  <!-- 在SatGlobe外部无法使用组件 -->
-  <!-- <SatSource v-model:visible="isSourceVisible"></SatSource> -->
-</template>
-<style>
-body {
-  margin: 0;
-  padding: 0;
-}
-
-#app {
-  width: 100vw;
-  height: 100vh;
-  position: relative;
-}
-</style>
-
-```
+## 什么是快乐“星球” ?
+&emsp;&emsp;[SatEarth](https://gitee.com/gengkaibo/sat-earth)是一个三维地球组件库，目的是支持开发人员快速搭建三维场景。
+
+## 组件库亮点
+- 内置丰富基础功能组件以及菜单组件，如果不需要定制化开发，可以分分钟出一个平台级应用系统
+- 对外暴露API，可随意调用sat-earth、mars3d、cesium API 进行定制化开发
+- 功能组件可配合菜单组件也可独立运行，兼顾灵活与便捷
+- 对样式进行了友好的移动端适配，兼顾大屏与小屏视觉体验
+- ...
+
+## 当前开发进度
+- 1.数据源 (done)
+- 2.地图部件 (done)
+  - 坐标信息
+  - 悬浮导航
+  - 时钟动画
+  - 鹰眼地图
+- 3.工具栏
+  - 3.1.搜索定位(done)
+    - 地名检索
+    - 坐标定位
+    - 路径规划
+  - 3.2.量测工具(done)
+    - 坐标测量
+    - 空间距离
+    - 水平面积
+    - 高度测量
+    - 三角测量
+    - 方位测量
+    - 贴地距离
+    - 贴地面积
+  - 3.3.图上标绘(done)
+  - 3.4.出图工具(done)
+  - 3.5.空间分析
+    - 剖面分析
+    - 方量分析
+    - 通视分析
+    - 可视域分析
+    - 限高分析
+    - 缓冲分析
+    - 剖面分析
+  - 3.6.地形分析
+    - 挖地分析
+    - 等高线分析
+    - 坡度坡向分析
+    - 淹没分析
+  - 3.7.模型分析
+    - 淹没分析
+    - 模型压平
+    - 模型裁剪
+    - 模型剖切
+  - 3.8.视频融合
+  - 3.9.飞行漫游
+
+## 前序准备
+- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境
+- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
+- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
+- [TypeScript](https://www.typescriptlang.org/) - 熟悉 `TypeScript` 基本语法
+- [Es6+](http://es6.ruanyifeng.com/) - 熟悉`es6`基本语法
+- [Cesium](https://cesium.com/) - Cesium是一个开源的,基于webgl的二、三维地图引擎
+- [Mars3D](http://mars3d.cn/) - 基于Cesium优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台
+
+## 安装
+- 首先在命令行执行如下命令添加 `sat-earth` 的依赖
+```bash
+npm i sat-earth
+```
+
+- 将 `node_modules/mars3d-cesium/Build/Cesium` 目录拷贝到我们开发目录中的public下
+然后在index.html中引入 `cesium` 库
+```html
+<!--引入cesium基础lib-->
+<link href="/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
+<script src="/Cesium/Cesium.js" type="text/javascript"></script>
+```
+
+- 如果您的项目也用了`pinia`，请修改您项目中的piniaStore直接使用`sat-earth`的导出，并且main.ts中不需要在调用App.use(piniaStore)
+```ts
+// const piniaStore = createPinia()
+// export { piniaStore }
+export { piniaStore } from 'sat-earth'
+```
+
+- 在 `main.[jt]s` 中引入我们的 `sat-earth` 资源
+
+```ts
+import { createApp } from "vue"
+import App from "./app.vue"
+import satEarth from 'sat-earth'
+import 'sat-earth/dist/style.css'
+const app = createApp(App)
+
+app.use(satEarth)
+app.mount("#app")
+
+```
+
+- 在`tsconfig.json`中的`types`加入类型声明文件`sat-earth/dist/auto-components`，来支持[Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)的类型提示
+```json
+{
+  "compilerOptions": {
+    "target": "esnext", // 指定ts编译后的ECMAScript目标版本: 'es3' (default), 'es5', 'es2015', 'es2016', 'es2017', or 'esnext'
+    "module": "esnext", // 指定编译后代码使用的模块化规范: 'commonjs', 'amd', 'umd' or 'es...'
+    "declaration": false, // 是否生成声明文件
+    "strict": true, // 开启全部严格模式
+    "removeComments": true, // 删除注释
+    "allowJs": true, // 是否对js文件开启编译
+    "noImplicitAny": false, // 支持类型不标注可以默认any
+    "allowSyntheticDefaultImports": true, // 允许没有导出的模块中导入
+    "resolveJsonModule": true, // json文件是否可导入
+    "isolatedModules": true, // 将每个文件作为单独的模块
+    "useDefineForClassFields": true, // class类的变量声明方式从 = 赋值的方式变更成了Object.defineProperty;所有的字段声明都会生效，即使它没有指定默认值
+    "moduleResolution": "node", // 置顶模块的解析策略，'node' or 'classic'
+    "esModuleInterop": true, // 支持es6,commonjs模块
+    "skipLibCheck": true, // 跳过类库检测
+    "jsx": "preserve",
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "types": [
+      "vite/client",
+      "sat-earth/dist/auto-components"
+    ],
+    "paths": {
+      "@src/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.d.ts",
+    "**/*.vue"
+  ]
+}
+```
+
+## 快速开始
+```ts
+<script setup lang="ts">
+import { satMapTypes, type SatMenu_Type_MenuItem } from 'sat-earth'
+/*
+  初始化参数尽量保证了和mars3d的Map构造一致性，但是任然有一些地方进行了小改动，具体查看类型SatMapOptions，下面请看改动：
+    1. 在mars3d的Map构造参数的基础上扩展了custom对象。
+      （
+        custom: {
+          // 工具栏新增项
+          layoutTheme: {
+            primaryColor: '#409eff',
+            isDark: true,
+            showDarkRadio: true
+          },
+          toolbar: {
+            mapSplit: true // 开启卷帘工具
+            bookmark: true // 开启视角书签工具
+            keyboardRoam: true // 开启键盘漫游功能
+          },
+          plotModelUrlPrefix?: string // 标绘模型地址前缀
+          layers: {
+            // list 这是要加入到 'SatSource' 数据源管理中的自定义Layer图层，参数与 mars3d构造 Layer 的参数
+            // 一致，通过 'id/pid' 在 'SatSource' 组件中形成对应的树形结构, 如果不加pid的时候或者任意添加的
+            // pid导致在所有图层中并没有查找到该 pid 对应图层项时，组件会给该项添加默认pid并加到树的跟节点上。
+            list: []
+            // 辅助图层
+            auxiliaryLayers: {
+              cover: boolean // 是否覆盖内置的辅助图层
+              list: [] // 自定义的辅助图层Layer集合
+            },
+            // 地形图层
+            terrainLayers: {
+              cover: boolean // 是否覆盖内置的地形图层
+              list: [] // 自定义的地形图层Layer集合
+            }
+          }
+        }
+      ）
+    2. 对mars3d的Map构造参数中原有的basemaps的传参略作了修改。
+      （
+        basemaps:[] => basemaps:{
+          cover: boolean
+          list: []
+        }
+        ①. 在 'sat-earth' 中加入了默认的基础底图，这里可以选择是否覆盖重写;
+        ②. basemaps中配置的底图最终也会出现在 'SatSource' 数据源组件中的树形结构中;
+      ）
+
+*/
+const options: satMapTypes.SatMapOptions = {
+  map3d: {
+    control: {
+      baseLayerPicker: true,
+      animation: false,
+      timeline: false
+    },
+    basemaps: {
+      cover: false,
+      list: []
+    },
+    custom: {
+      layoutTheme: {
+        primaryColor: '#409eff',
+        isDark: true,
+        showDarkRadio: true
+      },
+      toolbar: {
+        mapSplit: true, // 开启卷帘工具
+        bookmark: true, // 开启视角书签工具
+        keyboardRoam: true, // 开启键盘漫游功能
+      },
+      layers: {
+        /* list 这是要加入到数据源管理中的自定义Layer图层，参数与 mars3d构造 Layer 的参数一致，
+         通过 'id/pid' 在 'SatSource' 组件中形成对应的树形结构, 不加 pid 的时候或者任意添加的 pid
+         导致所有图层中并没有该 pid 对应图层项时，组件会给该项添加默认的 pid，并加入到树的跟节点上。
+        */
+        list: [
+          {
+            'id': 202012,
+            'type': '3dtiles',
+            'name': '石化工厂',
+            'url': 'http://data.mars3d.cn/3dtiles/max-shihua/tileset.json',
+            'position': { 'lng': 117.077158, 'lat': 31.659116, 'alt': 24.6 },
+            'maximumScreenSpaceError': 1,
+            'maximumMemoryUsage': 1024,
+            'highlight': { 'type': 'click', 'color': '#00FF00' },
+            'popup': 'all',
+            'flyTo': true,
+            'scenetree': 'scenetree.json',
+            'center': { 'lat': 31.654916, 'lng': 117.08278, 'alt': 279, 'heading': 316, 'pitch': -29 }
+          },
+        ],
+        // 辅助图层
+        auxiliaryLayers: {
+          cover: false, // 是否覆盖内置的辅助图层
+          list: [] // 自定义的辅助图层Layer集合
+        },
+        // 地形图层
+        terrainLayers: {
+          cover: false, // 是否覆盖内置的地形图层
+          list: [] // 自定义的地形图层Layer集合
+        },
+      },
+    },
+  },
+}
+
+const isSourceVisible = ref(true)
+
+const treeData = ref<SatMenu_Type_MenuItem[]>([
+  {
+    name: 'hello',
+    label: '你好',
+    icon: {
+      class: 'fa-commenting-o',
+    },
+    enable: false,
+    active: false
+  },
+])
+const changeDataToEnable = (item: SatMenu_Type_MenuItem) => {
+  item.enable = true
+  item.active = true
+  console.log('do init...')
+}
+const changeDataToUnEnable = (item: SatMenu_Type_MenuItem) => {
+  item.enable = false
+  item.active = false
+  console.log('do destroy...')
+}
+
+const isMounted = ref(false)
+onMounted(() => {
+  isMounted.value = true
+})
+</script>
+```
+```html
+<template>
+  <SatGlobe
+    v-if="isMounted"
+    :sat-map-options="options"
+  >
+    <SatMenu>
+      <SatSource></SatSource>
+      <SatMapPart></SatMapPart>
+      <SatLocation></SatLocation>
+      <SatMeasure></SatMeasure>
+      <SatPlot></SatPlot>
+      <SatPicture></SatPicture>
+      <SatSpatialAnalysis></SatSpatialAnalysis>
+      <SatTerrainAnalysis></SatTerrainAnalysis>
+      <SatModelAnalysis></SatModelAnalysis>
+      <SatVideoFusion></SatVideoFusion>
+      <SatRoam></SatRoam>
+      <!-- 自定义菜单项 -->
+      <template #custom-enable>
+        <SatMenuTree
+          :custom="true"
+          show-type="enabled"
+          :tree-data="treeData.filter((i) => i.enable)"
+          @custom-click="changeDataToEnable"
+          @custom-close-click="changeDataToUnEnable"
+        ></SatMenuTree>
+      </template>
+      <template #custom>
+        <SatMenuTree
+          :custom="true"
+          :tree-data="treeData"
+          @custom-click="changeDataToEnable"
+        ></SatMenuTree>
+      </template>
+    </SatMenu>
+
+    <!-- 使用SatPanel 面板组件 配合自定义菜单项完成自定义功能面板的开发-->
+    <!-- <SatPanel
+          v-if="treeData.filter(item=>item.name=='hello')[0].enable"
+          v-show="treeData.filter(item=>item.name=='hello')[0].active"
+          title="你好啊"
+          :close-event="()=>{treeData.filter(item=>item.name=='hello')[0].enable = false}"
+          :minimize-event="()=>{treeData.filter(item=>item.name=='hello')[0].active = false}"
+        >
+          内容
+        </SatPanel> -->
+
+    <!-- 在内置的menu外部使用组件 -->
+    <!-- <SatSource v-model:visible="isSourceVisible"></SatSource> -->
+  </SatGlobe>
+  <!-- 在SatGlobe外部无法使用组件 -->
+  <!-- <SatSource v-model:visible="isSourceVisible"></SatSource> -->
+</template>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+</style>
+
+```