同步代码

Author: muyao1987

src/components/mars-ui/README.md

@@ -0,0 +1,96 @@
+
+## mars-ui介绍
+
+## 依赖库
+- [Ant Design Vue](https://next.antdv.com/components/overview-cn/)：UI 控件库
+- [IconPark](https://iconpark.oceanengine.com/official)：UI 图标库
+
+
+## 将mars-ui集成到自己的项目中
+
+> 前提条件：需要 2 个项目的技术栈基本是一致的，比如`vue3+ts+ant-design-vue`等
+
+
+### 流程概览：
+
+需要拷贝的目录和文件：
+
+- `/src/components/mars-ui` 拷贝到 `/src/components/mars-ui`
+
+需要修改自己项目的文件：
+
+- `package.json`
+- `vite.config.ts` 或 `vue.config.js`
+- `src/main.js`
+- 需要加地图的`vue文件`
+
+![image](http://mars3d.cn/dev/img/guide/project-vue-hebing.jpg)
+
+### 1. 拷贝src/components/mars-ui文件夹
+### 2. 在main.ts文件中进行集成
+```json
+
+import "./components/mars-ui/common";
+import MarsUIInstall from "./components/mars-ui";
+
+
+MarsUIInstall(app);
+```
+### 3. 安装相关依赖
+```json
+  "dependencies": {
+    "@icon-park/svg": "^1.4.2",
+    "@turf/turf": "^6.5.0",
+    "ant-design-vue": "^4.0.7",
+    "consola": "^3.2.3",
+    "echarts": "^5.4.3",
+    "mars3d": "~3.6.0",
+    "mars3d-cesium": "~1.111.0",
+    "nprogress": "^0.2.0",
+    "vite-plugin-style-import": "^2.0.0",
+    "vue": "^3.2.27",
+    "vue-color-kit": "^1.0.6"
+  },
+```
+
+### 4. 配置vite文件
+```json
+  export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+        additionalData: `@import "${path.resolve(
+          __dirname,
+          "src/components/mars-ui/base.less"
+        )}";`,
+      },
+    },
+  },
+  plugins: [
+    vue(),
+    mars3dPlugin(),
+    createStyleImportPlugin({
+      resolves: [AndDesignVueResolve()],
+      libs: [
+        {
+          libraryName: "ant-design-vue",
+          esModule: true,
+          resolveStyle: (name) => {
+            if (name === "auto-complete") {
+              return `ant-design-vue/es/${name}/index`;
+            }
+            return `ant-design-vue/es/${name}/style/index`;
+          },
+        },
+      ],
+    }),
+  ],
+});
+```
+
+### 5. 使用
+参考实例，使用对应的标签
+
+基础项目已经基本保证不会影响外部样式，此处要处理的是您项目中的全局样式对 mars3d 相关组件的影响。修改相关 CSS 保证基础项目功能 UI 正常即可。
+

src/misc/env.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-svg-loader" />
+
 /**
  * 统一定义ts模块类型
  * @copyright 火星科技 mars3d.cn
@@ -29,16 +31,7 @@ declare module "mapv" {
 }
 
 declare module "kml-geojson" {
-  export const toKml: (geojson:any, options:any) => any
-  export const toGeoJSON: (doc:any) => any
+  export const toKml: (geojson: any, options: any) => any
+  export const toGeoJSON: (doc: any) => any
 }
 
-// declare module "*.svg" {
-//   const svg: any
-//   export default svg
-// }
-
-// declare module "*.png" {
-//   const png: string
-//   export default png
-// }

src/widgets/basic/query-poi/index.vue

@@ -153,7 +153,7 @@ const pagination = {
 }
 
 function clickVoid(e) {
-  if (e.target.dataset?.event !== "prevent") {
+  if (e.target.dataset?.event !== "prevent" && e.target.tagName !== "INPUT") {
     e.preventDefault()
   }
 }

vite.config.ts

@@ -4,7 +4,6 @@ import { defineConfig, loadEnv } from "vite" // 帮手函数，这样不用 jsdo
 import vue from "@vitejs/plugin-vue"
 import eslintPlugin from "vite-plugin-eslint"
 import { mars3dPlugin } from "vite-plugin-mars3d"
-
 import { createStyleImportPlugin, AndDesignVueResolve } from "vite-plugin-style-import"
 
 export default ({ mode }: ConfigEnv) => {