sat-earth 0.4.4 → 0.4.5

package/README.md

@@ -1,393 +1,391 @@
-## 什么是快乐“星球” ?
-  [SatEarth](https://gitee.com/gengkaibo/sat-earth)是基于 [Mars3D](http://mars3d.cn/) 和 [Cesium](https://cesium.com/) 的底层API，实现的一个开源三维地球组件库，目的是支持开发人员快速搭建三维场景，目前尚在搭建中，后续会封装符合扩展性、通用性、健壮性的组件，以及完善guide文档。
-
-## 前序准备
-- [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>
-```
-
-- 在 `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")
-
-```
-- 因为sat-earth组件库使用按需自动导入的形式依赖了element-plus组件库的部分组件，如果您也在项目中使用element-plus组件库，请尽量使用[`按需自动导入`](https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5)的形式，自动导入配置示例：
-```ts
-import { defineConfig } from 'vite'
-import { resolve } from 'path'
-import vue from '@vitejs/plugin-vue'
-import DefineOptions from 'unplugin-vue-define-options/vite' // 支持在vue3 script setup语法中写入options API，如：给组件添加name
-import AutoImport from 'unplugin-auto-import/vite' // 函数自动导入，当前用于vite打包，如果是库模式开发请用 unplugin-auto-import/rollup
-import Components from 'unplugin-vue-components/vite' // 组件自动导入，当前用于vite打包，如果是库模式开发请用 unplugin-vue-components/rollup
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // element-plus的自动注册自动导入解析器
-export default defineConfig({
-  base: '/',
-  publicDir: 'public',
-  resolve: {
-    alias: {
-      '@packages': resolve(__dirname, 'packages'),
-    }
-  },
-  plugins: [
-    DefineOptions(),
-    vue(),
-    AutoImport({
-      imports: [
-        'vue',
-        '@vueuse/core',
-        'pinia',
-      ],
-      dts: 'typings/auto-import.d.ts'
-    }),
-    Components({
-      resolvers: [ElementPlusResolver()], // 自动暴露组件
-      dts: 'typings/components.d.ts',
-    }),
-  ], // 编译vue
-  server: {
-    port: 8888,
-  }
-})
-
-```
-
-- 在`tsconfig.json`中引入类型声明文件`sat-earth/dist/packages/global`，来支持[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/packages/global"
-    ],
-    "paths": {
-      "@src/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "**/*.ts",
-    "**/*.d.ts",
-    "**/*.vue"
-  ]
-}
-```
-
-- 开始使用，组件化调用`<SatGlobe></SatGlobe>`，或者调用 `sat-earth` 暴露的方法，例:
-```ts
-<script setup lang="ts">
-import { SatMapTypes, type MenuItem } from 'sat-earth'
-/*
-  初始化参数尽量保证了和mars3d的Map构造一致性,但是任然有一些地方进行了小改动，下面请看
-  改动：
-    1. 在mars3d的Map构造参数的基础上扩展了custom对象。
-      （
-        custom: {
-          // 工具栏新增项
-          toolbar: {
-            mapSplit: true, // 开启卷帘工具
-            bookmark: true, // 开启视角书签工具
-            keyboardRoam: true, // 开启键盘漫游功能
-          },
-          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: {
-      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<MenuItem[]>([
-  {
-    name: 'hello',
-    label: '你好',
-    icon: {
-      class: 'fa-commenting-o',
-    },
-    enable: false,
-    active: false
-  },
-])
-const changeDataToEnable = (item: MenuItem) => {
-  item.enable = true
-  item.active = true
-  console.log('do init...')
-}
-const changeDataToUnEnable = (item: 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>
-      <SatBallistic></SatBallistic>
-      <!-- 自定义菜单项 -->
-      <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>
-
-```
-## 菜单计划
-- 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.视频融合
-- 4.模拟仿真
-    - 4.1.飞行漫游
-    - 4.2.曲率弹道
-
-## 其他说明
-这是我第一次搭建组件库，目前状态是有时间就会写点儿，平时还要工作，所以无法保证开发进度，当然有一部分原因其实是把这次搭建组件库作为一种学习方式。如果您有什么问题或者见解欢迎指正和讨论。微信号：`KaiboGeng`
-
-## 如何贡献
-你可以[提一个 issue](https://gitee.com/gengkaibo/sat-earth/issues) 或者提交一个 Pull Request。
-
-#### Pull Request
-
-1. Fork 代码!
-2. 创建自己的分支: `git checkout -b feat/xxxx`
-3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
-4. 推送您的分支: `git push origin feat/xxxx`
-5. 提交`pull request`
-
-#### Git 贡献提交规范，参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范
-  - `feat` 增加新功能
-  - `fix` 修复问题/BUG
-  - `style` 代码风格相关无影响运行结果的
-  - `perf` 优化/性能提升
-  - `refactor` 重构
-  - `polish` 修改
-  - `revert` 撤销修改
-  - `test` 测试相关
-  - `docs` 文档/注释
-  - `chore` 依赖更新/脚手架配置修改等
-  - `workflow` 工作流改进
-  - `ci` 持续集成
-  - `types` 类型定义文件更改
+## 什么是快乐“星球” ?
+&emsp;&emsp;[SatEarth](https://gitee.com/gengkaibo/sat-earth)是基于 [Mars3D](http://mars3d.cn/) 和 [Cesium](https://cesium.com/) 的底层API，实现的一个开源三维地球组件库，目的是支持开发人员快速搭建三维场景，目前尚在搭建中，后续会封装符合扩展性、通用性、健壮性的组件，以及完善guide文档。
+
+## 前序准备
+- [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>
+```
+
+- 在 `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")
+
+```
+- 因为sat-earth组件库使用按需自动导入的形式依赖了element-plus组件库的部分组件，如果您也在项目中使用element-plus组件库，请尽量使用[`按需自动导入`](https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5)的形式，自动导入配置示例：
+```ts
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import vue from '@vitejs/plugin-vue'
+import DefineOptions from 'unplugin-vue-define-options/vite' // 支持在vue3 script setup语法中写入options API，如：给组件添加name
+import AutoImport from 'unplugin-auto-import/vite' // 函数自动导入，当前用于vite打包，如果是库模式开发请用 unplugin-auto-import/rollup
+import Components from 'unplugin-vue-components/vite' // 组件自动导入，当前用于vite打包，如果是库模式开发请用 unplugin-vue-components/rollup
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // element-plus的自动注册自动导入解析器
+export default defineConfig({
+  base: '/',
+  publicDir: 'public',
+  resolve: {
+    alias: {
+      '@packages': resolve(__dirname, 'packages'),
+    }
+  },
+  plugins: [
+    DefineOptions(),
+    vue(),
+    AutoImport({
+      imports: [
+        'vue',
+        '@vueuse/core',
+        'pinia',
+      ],
+      dts: 'typings/auto-import.d.ts'
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()], // 自动暴露组件
+      dts: 'typings/components.d.ts',
+    }),
+  ], // 编译vue
+  server: {
+    port: 8888,
+  }
+})
+
+```
+
+- 在`tsconfig.json`中引入类型声明文件`sat-earth/dist/packages/global`，来支持[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/packages/global"
+    ],
+    "paths": {
+      "@src/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.d.ts",
+    "**/*.vue"
+  ]
+}
+```
+
+- 开始使用，组件化调用`<SatGlobe></SatGlobe>`，或者调用 `sat-earth` 暴露的方法，例:
+```ts
+<script setup lang="ts">
+import { SatMapTypes, type MenuItem } from 'sat-earth'
+/*
+  初始化参数尽量保证了和mars3d的Map构造一致性,但是任然有一些地方进行了小改动，下面请看
+  改动：
+    1. 在mars3d的Map构造参数的基础上扩展了custom对象。
+      （
+        custom: {
+          // 工具栏新增项
+          toolbar: {
+            mapSplit: true, // 开启卷帘工具
+            bookmark: true, // 开启视角书签工具
+            keyboardRoam: true, // 开启键盘漫游功能
+          },
+          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: {
+      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<MenuItem[]>([
+  {
+    name: 'hello',
+    label: '你好',
+    icon: {
+      class: 'fa-commenting-o',
+    },
+    enable: false,
+    active: false
+  },
+])
+const changeDataToEnable = (item: MenuItem) => {
+  item.enable = true
+  item.active = true
+  console.log('do init...')
+}
+const changeDataToUnEnable = (item: 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>
+      <SatBallistic></SatBallistic>
+      <!-- 自定义菜单项 -->
+      <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>
+
+```
+## 菜单计划
+- 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.视频融合
+- 4.模拟仿真
+    - 4.1.飞行漫游
+    - 4.2.曲率弹道
+
+## 其他说明
+这是我第一次搭建组件库，目前状态是有时间就会写点儿，平时还要工作，所以无法保证开发进度，当然有一部分原因其实是把这次搭建组件库作为一种学习方式。如果您有什么问题或者见解欢迎指正和讨论。微信号：`KaiboGeng`
+
+## 如何贡献
+你可以[提一个 issue](https://gitee.com/gengkaibo/sat-earth/issues) 或者提交一个 Pull Request。
+
+#### Pull Request
+
+1. Fork 代码!
+2. 创建自己的分支: `git checkout -b feat/xxxx`
+3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
+4. 推送您的分支: `git push origin feat/xxxx`
+5. 提交`pull request`
+
+#### Git 贡献提交规范，参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范
+  - `feat` 增加新功能
+  - `fix` 修复问题/BUG
+  - `style` 代码风格相关无影响运行结果的
+  - `perf` 优化/性能提升
+  - `refactor` 重构
+  - `polish` 修改
+  - `revert` 撤销修改
+  - `test` 测试相关
+  - `docs` 文档/注释
+  - `chore` 依赖更新/脚手架配置修改等
+  - `workflow` 工作流改进
+  - `ci` 持续集成
+  - `types` 类型定义文件更改

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sat-earth",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "private": false,
   "description": "The sat-earth is a digital earth component library based on mars3d and cesium.",
   "main": "dist/sat-earth.umd.js",