sat-earth 0.0.9 → 0.0.12

package/README.md

@@ -1,121 +1,318 @@
-## What is SatEarth?
-  [SatEarth](https://gitee.com/gengkaibo/sat-earth)是延续了 [vite2-vue3-ts-quick-start](https://gitee.com/gengkaibo/vite2-vue3-ts-quick-start) 底层技术，基于 [航天星云](https://www.satcloud.com.cn/#/index) · 数字地球技术中台的功能及UI风格以及 [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")
-
-```
-或者按需加载
-```ts
-import { createApp } from "vue"
-import App from "./app.vue"
-import { SatGlobe } from 'sat-earth'
-import 'sat-earth/dist/style.css'
-const app = createApp(App)
-
-app.use(SatGlobe)
-app.mount("#app")
-
-```
-- 在`tsconfig.json`中引入类型声明文件`sat-earth/dist/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/global"
-    ],
-    "paths": {
-      "@src/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "**/*.ts",
-    "**/*.d.ts",
-    "**/*.vue"
-  ]
-}
-```
-
-- 开始使用，组件化调用`<SatGlobe></SatGlobe>`，或者调用 `satEarth` 暴露的方法
-
-## 其他说明
-这是我第一次搭建组件库，目前状态是有时间就会写点儿，平时还要工作，所以无法保证开发进度，当然有一部分原因其实是把这次搭建组件库作为一种学习方式。如果您有什么问题或者见解欢迎指正和讨论。微信号：`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` 类型定义文件更改
+## What is SatEarth?
+&emsp;&emsp;[SatEarth](https://gitee.com/gengkaibo/sat-earth)是延续了 [vite2-vue3-ts-quick-start](https://gitee.com/gengkaibo/vite2-vue3-ts-quick-start) 底层技术，基于 [航天星云](https://www.satcloud.com.cn/#/index) · 数字地球技术中台的功能及UI风格以及 [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")
+
+```
+或者按需加载
+```ts
+import { createApp } from "vue"
+import App from "./app.vue"
+import { SatGlobe } from 'sat-earth'
+import 'sat-earth/dist/style.css'
+const app = createApp(App)
+
+app.use(SatGlobe)
+app.mount("#app")
+
+```
+- 在`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 { SatUtil, type MenuItem } from 'sat-earth'
+/*
+  初始化参数尽量保证了和mars3d的Map构造一致性,但是任然有一些地方进行了小改动，下面请看
+  改动：
+    1. 在mars3d的Map构造参数的基础上扩展了custom对象。
+      （
+        custom: {
+          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: SatUtil.types.SatMapOptions = {
+  map3d: {
+    control: {
+      baseLayerPicker: true,
+      animation: true,
+      timeline: true
+    },
+    token: {
+      bing: 'Ai9rlVuU69CDOgiaiN4wT4M_seF7DAgaD3IuMa39awQ9jVQ07JJj8LIIBPX0L2pd'
+    },
+    basemaps: {
+      cover: false,
+      list: []
+    },
+    custom: {
+      layers: {
+        /* list 这是要加入到数据源管理中的自定义Layer图层，参数与 mars3d构造 Layer 的参数一致，
+         通过 'id/pid' 在 'SatSource' 组件中形成对应的树形结构, 不加 pid 的时候或者任意添加的 pid
+         导致所有图层中并没有该 pid 对应图层项时，组件会给该项添加默认的 pid，并加入到树的跟节点上。
+        */
+        list: [
+          {
+            id: 'bing',
+            name: 'Bing地图',
+            type: 'group'
+          },
+          {
+            id: 'bing-1',
+            pid: 'bing',
+            name: 'Bing影像',
+            type: 'bing',
+            show: false,
+            layer: 'Aerial',
+            zIndex: 33,
+            center: {
+              lng: 0,
+              lat: 0,
+              alt: 10000
+            },
+          },
+          {
+            id: 'bing-2',
+            pid: 'bing',
+            name: 'Bing影像(含注记)',
+            type: 'bing',
+            show: false,
+            zIndex: 32,
+            layer: 'AerialWithLabels',
+          },
+          {
+            id: 'bing-3',
+            pid: 'bing',
+            name: 'Bing电子地图',
+            type: 'bing',
+            show: false,
+            layer: 'Road',
+          },
+          {
+            id: 'bing-4',
+            pid: 'bing',
+            name: 'Bing浅色电子',
+            type: 'bing',
+            show: false,
+            layer: 'CanvasLight',
+          },
+          {
+            '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集合
+        }
+      }
+    },
+  },
+}
+
+// 使用内置菜单组件时候，可以添加自定义菜单项， icon的class对应font-awesome图标库的class
+const treeData = ref<MenuItem[]>([{
+  name: 'hello',
+  label: '你好',
+  icon: {
+    class: 'fa-commenting-o'
+  },
+  enable: false
+}])
+const changeDataToEnable = (item: MenuItem) => {
+  item.enable = true
+}
+const changeDataToUnEnable = (item: MenuItem) => {
+  item.enable = false
+}
+</script>
+```
+```html
+<template>
+  <SatGlobe :sat-map-options="options">
+    <!-- 嵌入内置菜单组件 -->
+    <SatMenu>
+      <!-- 在菜单组件中再嵌入内置数据源组件 -->
+      <SatSource></SatSource>
+      <!-- 自定义菜单项 -->
+      <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>
+    <!-- 不使用菜单组件 -->
+    <!-- <SatSource v-model:visible="isVisible"></SatSource> -->
+  </SatGlobe>
+  <!-- 在SatGlobe外部无法使用组件 -->
+  <!-- <SatSource v-model:visible="isVisible"></SatSource> -->
+</template>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+</style>
+
+```
+
+## 其他说明
+这是我第一次搭建组件库，目前状态是有时间就会写点儿，平时还要工作，所以无法保证开发进度，当然有一部分原因其实是把这次搭建组件库作为一种学习方式。如果您有什么问题或者见解欢迎指正和讨论。微信号：`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/dist/packages/auto-import.d.ts

@@ -28,6 +28,13 @@ declare global {
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElDrawer: typeof import('element-plus/es')['ElDrawer']
+  const ElMenu: typeof import('element-plus/es')['ElMenu']
+  const ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+  const ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+  const ElTabPane: typeof import('element-plus/es')['ElTabPane']
+  const ElTabs: typeof import('element-plus/es')['ElTabs']
+  const ElTree: typeof import('element-plus/es')['ElTree']
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']

package/dist/packages/components/components.d.ts

@@ -1,4 +1,4 @@
-import type { Plugin } from "vue";
+import type { Plugin } from 'vue';
 export declare const components: Array<Plugin & {
     name?: string;
 }>;

package/dist/packages/components/globe/SatGlobe.vue.d.ts

@@ -1,26 +1,65 @@
-import { type MapInitOptions } from '../../utils/map/types';
+import { type PropType } from 'vue';
+import { type SatMapOptions, type SatLayer } from '../../utils/map/types';
+import { type TreeSatLayer } from '../../store/modules/layer';
 declare const _sfc_main: import("vue").DefineComponent<{
-    mapInitOptions: {
-        type: import("vue").PropType<MapInitOptions>;
-        default: () => MapInitOptions;
+    eleId: {
+        type: StringConstructor;
+        default: string;
+    };
+    satMapOptions: {
+        type: PropType<SatMapOptions>;
+        default: () => SatMapOptions;
     };
 }, {
+    compStore: import("pinia").Store<"SatCompState", import('../../store/modules/compState').CompState, {
+        getComponents: (state: {
+            SatSource?: {
+                label: string;
+                name: string;
+                parentName: string;
+                enable: boolean;
+                active: boolean;
+                ready?: boolean | undefined;
+                isUnDestroy?: boolean | undefined;
+            } | undefined;
+        } & {}) => any;
+    }, {
+        setSatSource(val: import('../../store/modules/compState').StateItem): void;
+    }>;
+    layerStore: import("pinia").Store<"SatLayer", import('../../store/modules/layer').LayerState, {}, {
+        setLayerList(val: SatLayer[]): void;
+        setLayerTree(val: TreeSatLayer[]): void;
+    }>;
+    layoutStore: import("pinia").Store<"SatLayout", import('../../store/modules/layout').LayoutState, {}, {
+        setIsDark(val: boolean): void;
+        setIsMobile(val: boolean): void;
+        setIsForceHorizontal(val: boolean): void;
+    }>;
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-        mapInitOptions: {
-            type: import("vue").PropType<MapInitOptions>;
-            default: () => MapInitOptions;
+        eleId: {
+            type: StringConstructor;
+            default: string;
+        };
+        satMapOptions: {
+            type: PropType<SatMapOptions>;
+            default: () => SatMapOptions;
         };
     }>> & {
         [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
     }>>;
-    uuid: string;
-    eleId: import("vue").ComputedRef<string>;
+    merged: SatMapOptions;
+    _isDark: boolean;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    mapInitOptions: {
-        type: import("vue").PropType<MapInitOptions>;
-        default: () => MapInitOptions;
+    eleId: {
+        type: StringConstructor;
+        default: string;
+    };
+    satMapOptions: {
+        type: PropType<SatMapOptions>;
+        default: () => SatMapOptions;
     };
 }>>, {
-    mapInitOptions: MapInitOptions;
+    eleId: string;
+    satMapOptions: SatMapOptions;
 }>;
 export default _sfc_main;