# xyzgis-switch-and-sync

**Repository Path**: xuyizhuo/xyzgis-switch-and-sync

## Basic Information

- **Project Name**: xyzgis-switch-and-sync
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-26
- **Last Updated**: 2024-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# xyzgis-switch-and-sync

## 介绍

本项目主要是Leaflet、Openlayers、MapBox、Cesium四类主流开源客户端平台的操作同步。

## 软件架构

（1）npm工具：node18.x，pnpm

（2）GIS框架：Leaflet、Openlayers、MapBox、Cesium

（3）前端框架：基于Vue、TypeScript、SCSS、Element-Plus、Vite

## 安装教程

### 1 创建项目

```shell
# 创建项目
pnpm create vite xyzgis-switch-and-sync

# 进入项目
cd vite xyzgis-switch-and-sync

# 安装依赖
pnpm install

# 运行项目
npm run dev
```

### 2 配置src别名

修改vite.config.ts

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': resolve('./src'), // 配置相对路径别名，使用 @ 代替 src
        },
    },
})
```

### 3 集成SCSS与样式公用重用

#### 3.1 安装SCSS

```shell
pnpm i sass-loader sass --save-dev
```

#### 3.2 样式公用（全局变量）

##### styles/variables.scss

```scss
// 公共变量
$vw: 19.2vw;

// 字体大小
$app-font-size: (20 / $vw);

// 主题色
$app-bg-color: #f5f5f5;
// 主题高亮色
$app-bg-height-color: #666666;
// 字体色
$app-font-color: #222222;
// 字体高亮色
$app-font-height-color: #ffff43;
```

##### vite.config.ts

```typescript
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    css: {
        preprocessorOptions: {
            scss: {
                javascriptEnabled: true,
                // 在组件中引入公共变量
                additionalData: '@import "@/assets/styles/variables.scss";',
            },
        },
    },
})
```

#### 3.3 样式重用

##### main.ts

```typescript
import { createApp } from 'vue'
// 引用公共样式
import './assets/styles/common.scss'
import App from './App.vue'

createApp(App).mount('#app')
```

##### styles/common.scss

```scss
// 样式重用
@import './variables'; // 引入公共变量

* {
    padding: 0;
    margin: 0;
}

html,
body,
#app {
    width: 100%;
    height: 100%;
}

body {
    font:
        $app-font-size 'Microsoft Yahei',
        'PingFang SC',
        'Avenir',
        'Segoe UI',
        'Hiragino Sans GB',
        'STHeiti',
        'Microsoft Sans Serif',
        'WenQuanYi Micro Hei',
        sans-serif;
}

// 去除边距
ul,
h1,
h3,
h4,
p,
dl,
dd {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: $app-font-color;
    outline: none;
}

i {
    font-style: normal;
}

// input的样式
input[type='text'],
input[type='search'],
input[type='password'],
input[type='checkbox'] {
    padding: 0;
    outline: none;
    border: none;
    -webkit-appearance: none;

    &::placeholder {
        color: $app-font-color;
    }
}

img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

ul {
    list-style: none;
}
```

### 4 集成Element-plus

```shell
pnpm install element-plus --save

# 按需导入插件
pnpm install -D unplugin-vue-components unplugin-auto-import

# icon图标
pnpm install @element-plus/icons-vue
pnpm i unplugin-icons -D
```

#### vite.config.js

```typescript
import { defineConfig } from 'vite'
// element-plus 按需导入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// element-plus icon 按需导入插件
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
    plugins: [
        vue(),
        // element-plus 按需导入插件
        AutoImport({
            resolvers: [
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({
                    prefix: 'Icon',
                }),
            ],
        }),
        Components({
            resolvers: [
                ElementPlusResolver(),
                // 自动注册图标组件
                IconsResolver({
                    enabledCollections: ['ep'],
                }),
            ],
        }),
        Icons({
            autoInstall: true,
        }),
    ],
})
```

### 集群GIS

#### Cesium

```shell
pnpm install cesium --save

# Cesium插件
pnpm i vite-plugin-cesium vite -D
```

自动导入配置

vite.config.js

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

export default defineConfig({
    plugins: [vue(), cesium()],
})
```

#### Leaflet

```shell
pnpm install --save leaflet

# ts集成
pnpm install @types/leaflet --save-dev
```

#### Openlayers

```shell
pnpm install --save ol
```

#### Mapbox

```shell
pnpm install --save mapbox-gl

# ts集成依赖
pnpm install @types/mapbox-gl -D
```

### 基本校验规则

#### eslint

参考：https://juejin.cn/post/7201048368382476347
在根目录创建eslint配置文件有三种方式：.eslintrc 、.eslintrc.js、.eslintrc.cjs

#### .eslintrc.js

在package.json中配置了 type 为 module 时，所有js文件全部使用es模块化，module.exports这种commonjs模块化方式不可以用。
解决：1、可以将 .eslintrc.js 改为 .eslintrc.cjs，意思就是使用commonjs模块化；2、type 改为 commonjs

```javascript
module.exports = {
    extends: ['plugin:vue/vue3-recommended'],
}
```

#### .eslintrc.cjs

开启了eslint之后，该配置文件报错，Delete ‘␍’ eslint(prettier/prettier) ，罪魁祸首是git的一个配置属性：core.autocrlf，由于历史原因，windows下和linux下的文本文件的换行符不一致。
解决：1、.prettierrc.cjs文件配置endOfLine: "auto"，不检测换行符；2、使用.eslintrc

```javascript
module.exports = {
    extends: ['plugin:vue/vue3-recommended'],
}
```

#### .eslintrc

需要用json写法

```json
{
    "extends": ["plugin:vue/vue3-recommended"]
}
```

#### 代码提交规则

填写**commit**信息的时候

```javascript
'feat' // 新特性、新功能
'fix' // 修改bug
'docs' // 文档修改
'style' // 代码格式修改, 注意不是 css 修改
'refactor' // 代码重构
'perf' // 优化相关，比如提升性能、体验
'test' // 测试用例修改
'chore' // 其他修改, 比如改变构建流程、或者增加依赖库、工具等
'revert' // 回滚到上一个版本
'build' // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
```

## 使用说明

## 参与贡献