sat-earth 0.8.41 → 0.9.0

package/README.md

@@ -1,2 +1,241 @@
-## 什么是快乐“星球” ?
-  [SatEarth](https://gitee.com/gengkaibo/sat-earth)是一个三维地球组件库，目的是支持开发人员快速搭建三维场景。
+## 什么是快乐“星球” ?
+  [SatEarth](https://gitee.com/gengkaibo/sat-earth)是一个基于Vue3.x，面向开发者的三维地球组件库。
+
+## 组件库亮点
+- 内置丰富基础功能组件以及菜单组件
+- 对外暴露API，可随意调用sat-earth、mars3d、cesium API 进行定制化开发
+- 功能组件可配合菜单组件也可独立运行，兼顾灵活与便捷
+- ...
+
+## 前序准备
+- [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 }
+import { SatStore } from 'sat-earth'
+const piniaStore = SatStore.piniaStore
+export {
+  piniaStore
+}
+```
+
+- 在 `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)
+// SatEarth内部引入了ElementPlus，如果你也使用了element-plus，请在你的代码中注释掉不再引入，并且取消element-plus的按需自动导入（目前发现一些样式上的bug，我弃用了）
+// import ElementPlus from 'element-plus'
+// import 'element-plus/dist/index.css'
+// import 'element-plus/theme-chalk/dark/css-vars.css'
+// app.use(ElementPlus)
+app.use(SatEarth)
+app.mount("#app")
+
+```
+
+- 在`tsconfig.json`中的`types`加入类型声明文件`sat-earth/dist/packages/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/packages/auto-components"
+    ],
+    "paths": {
+      "@src/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.d.ts",
+    "**/*.vue"
+  ]
+}
+```
+
+## 开发文档
+等发布1.0版本补文档，暂时没有
+
+## 快速开始
+```ts
+<script setup lang="ts">
+import { type SatMapOptions } from 'sat-earth'
+/*
+  初始化参数尽量保证了和mars3d的Map构造一致性，但是任然有一些地方进行了小改动，具体查看类型SatMapOptions，下面请看改动：
+    1. 在mars3d的Map构造参数的基础上扩展了custom对象。
+      （
+        custom: {
+          // 工具栏新增项
+          layoutTheme: {
+            primaryColor: '#409eff',
+            isDark: 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: SatMapOptions = {
+  map3d: {
+    control: {
+      baseLayerPicker: true,
+      animation: false,
+      timeline: false
+    },
+    basemaps: {
+      cover: false,
+      list: []
+    },
+    custom: {
+      layoutTheme: {
+        primaryColor: '#409eff',
+        isDark: 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集合
+        },
+      },
+    },
+  },
+}
+
+</script>
+```
+```html
+<template>
+  <!-- 注意：在SatGlobe外部无法使用组件 -->
+  <SatGlobe :sat-map-options="options">
+     <SatTaskView></SatTaskView>
+    <SatMenu>
+      <SatSource></SatSource>
+      <SatMapPart></SatMapPart>
+      <SatLocation></SatLocation>
+      <SatMeasure></SatMeasure>
+      <SatPlot></SatPlot>
+      <SatPicture ref="satPicture"></SatPicture>
+    </SatMenu>
+  </SatGlobe>
+</template>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+</style>
+
+```

package/dist/packages/components/_private/TheImageEditor/index.d.ts

@@ -1,12 +1,12 @@
-import TheImageEditor from './index.vue';
-import tuiImageEditor from 'tui-image-editor';
-import type { UploadFile } from 'element-plus';
-import { ShallowRef } from 'vue';
-export { TheImageEditor };
-export interface TheImageEditorExpose {
-    getInstance: () => ShallowRef<tuiImageEditor | undefined>;
-    loadScene: (isIncludeDiv?: boolean) => void;
-    uploadFile: (uploadFile: UploadFile) => void;
-    uploadImageBase64: (base64: string) => void;
-    download: (autoDownload?: boolean) => Promise<string> | undefined;
-}
+import TheImageEditor from './index.vue';
+import tuiImageEditor from 'tui-image-editor';
+import type { UploadFile } from 'element-plus';
+import { ShallowRef } from 'vue';
+export { TheImageEditor };
+export interface TheImageEditorExpose {
+    getInstance: () => ShallowRef<tuiImageEditor | undefined>;
+    loadScene: (isIncludeDiv?: boolean) => void;
+    uploadFile: (uploadFile: UploadFile) => void;
+    uploadImageBase64: (base64: string) => void;
+    download: (autoDownload?: boolean) => Promise<string> | undefined;
+}

package/dist/packages/components/_private/TheImageEditor/index.vue.d.ts

@@ -1,49 +1,49 @@
-/// <reference types="node" />
-import tuiImageEditor from 'tui-image-editor';
-import type { UploadFile } from 'element-plus';
-import { SatMap } from '../../../utils';
-declare const _sfc_main: import("vue").DefineComponent<{}, {
-    mapInstance: import("vue").ShallowRef<SatMap | null> | undefined;
-    mapCanvasEleId: string;
-    instance: import("vue").ShallowRef<tuiImageEditor | undefined>;
-    fileList: import("vue").Ref<{
-        name: string;
-        percentage?: number | undefined;
-        status: import("element-plus").UploadStatus;
-        size?: number | undefined;
-        response?: unknown;
-        uid: number;
-        url?: string | undefined;
-        raw?: {
-            uid: number;
-            readonly lastModified: number;
-            readonly name: string;
-            readonly webkitRelativePath: string;
-            readonly size: number;
-            readonly type: string;
-            arrayBuffer: {
-                (): Promise<ArrayBuffer>;
-                (): Promise<ArrayBuffer>;
-            };
-            slice: {
-                (start?: number | undefined, end?: number | undefined, contentType?: string | undefined): Blob;
-                (start?: number | undefined, end?: number | undefined, contentType?: string | undefined): Blob;
-            };
-            stream: {
-                (): ReadableStream<any>;
-                (): NodeJS.ReadableStream;
-            };
-            text: {
-                (): Promise<string>;
-                (): Promise<string>;
-            };
-        } | undefined;
-    }[]>;
-    init: (imgUrl: string) => void;
-    loadScene: (isIncludeDiv?: boolean | undefined) => void;
-    uploadFile: (uploadFile: UploadFile) => void;
-    uploadImageBase64: (base64: string) => void;
-    download: (autoDownload?: boolean | undefined) => Promise<string> | undefined;
-    getInstance: () => import("vue").ShallowRef<tuiImageEditor | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _sfc_main;
+/// <reference types="node" />
+import tuiImageEditor from 'tui-image-editor';
+import type { UploadFile } from 'element-plus';
+import { SatMap } from '../../../utils';
+declare const _sfc_main: import("vue").DefineComponent<{}, {
+    mapInstance: import("vue").ShallowRef<SatMap | null> | undefined;
+    mapCanvasEleId: string;
+    instance: import("vue").ShallowRef<tuiImageEditor | undefined>;
+    fileList: import("vue").Ref<{
+        name: string;
+        percentage?: number | undefined;
+        status: import("element-plus").UploadStatus;
+        size?: number | undefined;
+        response?: unknown;
+        uid: number;
+        url?: string | undefined;
+        raw?: {
+            uid: number;
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            slice: {
+                (start?: number | undefined, end?: number | undefined, contentType?: string | undefined): Blob;
+                (start?: number | undefined, end?: number | undefined, contentType?: string | undefined): Blob;
+            };
+            stream: {
+                (): ReadableStream<any>;
+                (): NodeJS.ReadableStream;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        } | undefined;
+    }[]>;
+    init: (imgUrl: string) => void;
+    loadScene: (isIncludeDiv?: boolean | undefined) => void;
+    uploadFile: (uploadFile: UploadFile) => void;
+    uploadImageBase64: (base64: string) => void;
+    download: (autoDownload?: boolean | undefined) => Promise<string> | undefined;
+    getInstance: () => import("vue").ShallowRef<tuiImageEditor | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _sfc_main;