├── .eslintignore
├── .gitignore
├── src
    ├── components
    │   ├── SeamlessScroll
    │   │   ├── index.ts
    │   │   ├── __docs__
    │   │   │   ├── index.zh-CN.md
    │   │   │   ├── demo-base.vue
    │   │   │   ├── demo-props.vue
    │   │   │   └── demo-css-reset.vue
    │   │   └── seamless-scroll.vue
    │   └── Map
    │   │   └── __docs__
    │   │       ├── index.zh-CN.md
    │   │       ├── 01-show-map.vue
    │   │       ├── 03-geojson-map.vue
    │   │       ├── 04-geojson-map.vue
    │   │       └── 02-show-biz-info.vue
    ├── index.ts
    └── index.md
├── .prettierrc.js
├── .devcontainer
    └── devcontainer.json
├── docs
    ├── .vitepress
    │   ├── sidebar.js
    │   ├── theme
    │   │   ├── index.ts
    │   │   └── var.css
    │   └── config.js
    └── public
    │   └── logo.svg
├── vite.config.ts
├── scripts
    ├── fetch.js
    ├── configs.js
    └── merge.js
├── .eslintrc.cjs
├── tsconfig.json
└── package.json


/.eslintignore:
--------------------------------------------------------------------------------
1 | dist


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .docs
3 | dist
4 | .temp


--------------------------------------------------------------------------------
/src/components/SeamlessScroll/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './seamless-scroll.vue';
2 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import SeamlessScroll from './components/SeamlessScroll'
2 | 
3 | export {
4 |   SeamlessScroll
5 | }
6 | 


--------------------------------------------------------------------------------
/src/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | map:
3 |   path: /
4 | --- 
5 | 
6 | 欢迎你，这里是 `windstorm-ui`，**风暴UI**。
7 | 
8 | > 一款不专业、不完善的小组件库。


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   semi: true,
3 |   singleQuote: true,
4 |   tabWidth: 2,
5 |   trailingComma: 'all',
6 |   printWidth: 80,
7 | };
8 | 


--------------------------------------------------------------------------------
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "image": "mcr.microsoft.com/devcontainers/universal:2",
 3 |   "features": {
 4 |   },
 5 |   "ghcr.io/NicoVIII/devcontainer-features/pnpm:1": {
 6 |     "version": 16
 7 |   },
 8 |    "ghcr.io/devcontainers/features/node:1": {}
 9 | }
10 | 


--------------------------------------------------------------------------------
/docs/.vitepress/sidebar.js:
--------------------------------------------------------------------------------
 1 | export const sidebar = {
 2 |   '/': [
 3 |     {
 4 |       text: '组件',
 5 |       items: [
 6 |         { text: '无限滚动', link: '/seamless-scroll/' },
 7 |       ],
 8 |     },
 9 |     {
10 |       text: '地图开发',
11 |       items: [
12 |         { text: 'demo', link: '/map-demo/' },
13 |       ],
14 |     },
15 |   ],
16 | };
17 | 


--------------------------------------------------------------------------------
/docs/.vitepress/theme/index.ts:
--------------------------------------------------------------------------------
 1 | import DefaultTheme from 'vitepress/theme';
 2 | import DemoBlock from '@ruabick/vitepress-demo-block';
 3 | import '@ruabick/vitepress-demo-block/dist/style.css';
 4 | import './var.css';
 5 | 
 6 | export default {
 7 |   ...DefaultTheme,
 8 | 
 9 |   enhanceApp({ app, router, siteData }) {
10 |     // app is the Vue 3 app instance from `createApp()`.
11 |     // router is VitePress' custom router. `siteData` is
12 |     // a `ref` of current site-level metadata.
13 |     app.component('demo', DemoBlock);
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/src/components/SeamlessScroll/__docs__/index.zh-CN.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | map:
 3 |   path: /seamless-scroll/
 4 | --- 
 5 | 
 6 | ## 基本使用
 7 | 
 8 | 效果如下
 9 | 
10 | <demo src="./demo-base.vue"
11 |   title="基础使用"
12 |   desc="最基础的使用演示">
13 | </demo>
14 | 
15 | ## 设置停留和滚动时间
16 | 
17 | 效果如下
18 | 
19 | <demo src="./demo-props.vue"
20 |   title="基础使用"
21 |   desc="最基础的使用演示">
22 | </demo>
23 | 
24 | ## 样式覆写（如何达成斑马线）
25 | 
26 | 效果如下
27 | 
28 | <demo src="./demo-css-reset.vue"
29 |   title="基础使用"
30 |   desc="最基础的使用演示">
31 | </demo>
32 | 
33 | 
34 | <API src="../seamless-scroll.vue" lang="zh"></API>
35 | 


--------------------------------------------------------------------------------
/src/components/Map/__docs__/index.zh-CN.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | map:
 3 |   path: /map-demo/
 4 | --- 
 5 | 
 6 | ## 【瓦片风】基本使用
 7 | 
 8 | 效果如下
 9 | 
10 | <demo src="./01-show-map.vue"
11 |   title="基础使用"
12 |   desc="最基础的使用演示">
13 | </demo>
14 | 
15 | ## 【瓦片风】在地图上显示业务属性
16 | 
17 | 效果如下
18 | 
19 | <demo src="./02-show-biz-info.vue"
20 |   title="基础使用"
21 |   desc="最基础的使用演示">
22 | </demo>
23 | 
24 | ## 【线框风】渲染基础 “湖北省” 基础轮廓
25 | 
26 | 效果如下
27 | 
28 | <demo src="./03-geojson-map.vue"
29 |   title="基础使用"
30 |   desc="最基础的使用演示">
31 | </demo>
32 | 
33 | ## 【线框风】 “湖北省” 高亮 + 下钻
34 | 
35 | 效果如下
36 | 
37 | <demo src="./04-geojson-map.vue"
38 |   title="基础使用"
39 |   desc="最基础的使用演示">
40 | </demo>
41 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'path';
 2 | import { defineConfig } from 'vite';
 3 | import vue from '@vitejs/plugin-vue';
 4 | import dts from 'vite-plugin-dts';
 5 | import packageJson from './package.json'
 6 | 
 7 | export default defineConfig({
 8 |   plugins: [vue(), dts()],
 9 |   build: {
10 |     lib: {
11 |       entry: resolve(__dirname, './src/index.ts'),
12 |       name: 'windstorm-ui',
13 |       // the proper extensions will be added
14 |       fileName: 'windstorm-ui',
15 |     },
16 |     rollupOptions: {
17 |       // 确保外部化处理那些你不想打包进库的依赖
18 |       // @ts-ignore
19 |       external: ['vue', ...Object.keys(packageJson.dependencies || {}), ...Object.keys(packageJson.peerDependencies || {})],
20 |       output: {
21 |         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
22 |         globals: {
23 |           vue: 'Vue',
24 |         },
25 |       },
26 |     },
27 |   },
28 | });
29 | 


--------------------------------------------------------------------------------
/src/components/SeamlessScroll/__docs__/demo-base.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ref } from 'vue';
 3 | import { SeamlessScroll } from 'windstorm-ui';
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div>
 8 |     <SeamlessScroll class="the-demo-list">
 9 |       <div class="the-demo-list__item">1</div>
10 |       <div class="the-demo-list__item">2</div>
11 |       <div class="the-demo-list__item">3</div>
12 |       <div class="the-demo-list__item">4</div>
13 |       <div class="the-demo-list__item">5</div>
14 |       <div class="the-demo-list__item">6</div>
15 |       <div class="the-demo-list__item">7</div>
16 |       <div class="the-demo-list__item">8</div>
17 |     </SeamlessScroll>
18 |   </div>
19 | </template>
20 | 
21 | <style lang="scss">
22 | .the-demo-list {
23 |   height: 180px;
24 | 
25 |   &__item {
26 |     height: 32px;
27 |     font-size: 16px;
28 |     line-height: 32px;
29 |   }
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/components/SeamlessScroll/__docs__/demo-props.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ref } from 'vue';
 3 | import { SeamlessScroll } from 'windstorm-ui';
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div>
 8 |     <SeamlessScroll class="the-demo-list" :delay="1" :duration="0.2">
 9 |       <div class="the-demo-list__item">1</div>
10 |       <div class="the-demo-list__item">2</div>
11 |       <div class="the-demo-list__item">3</div>
12 |       <div class="the-demo-list__item">4</div>
13 |       <div class="the-demo-list__item">5</div>
14 |       <div class="the-demo-list__item">6</div>
15 |       <div class="the-demo-list__item">7</div>
16 |       <div class="the-demo-list__item">8</div>
17 |     </SeamlessScroll>
18 |   </div>
19 | </template>
20 | 
21 | <style lang="scss">
22 | .the-demo-list {
23 |   height: 180px;
24 | 
25 |   &__item {
26 |     height: 32px;
27 |     font-size: 16px;
28 |     line-height: 32px;
29 |   }
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/scripts/fetch.js:
--------------------------------------------------------------------------------
 1 | const axios = require('axios');
 2 | const fs = require('fs-extra');
 3 | const path = require('path')
 4 | const config = require('./configs.js')
 5 | 
 6 | 
 7 | const getGeojson = async (code) => {
 8 |   const res = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${code}.json`)
 9 |   return res.data
10 | }
11 | 
12 | const writeGeojson = async (code, geojson) => {
13 |   const fileName = `${code}.json`
14 |   const filePath = path.resolve(config.ORIGIN_GEOJSON_DIR, fileName)
15 |   await fs.writeJSON(filePath, geojson)
16 | }
17 | 
18 | 
19 | const begin = async () => {
20 |   await fs.remove(config.ORIGIN_GEOJSON_DIR)
21 |   await fs.ensureDir(config.ORIGIN_GEOJSON_DIR)
22 |   const tasks = config.codes.map(t => getGeojson(t))
23 |   const jsons = await Promise.all(tasks)
24 |   const writeTasks = jsons.map((json, index) => writeGeojson(config.codes[index], json))
25 |   await Promise.all(writeTasks)
26 | }
27 | 
28 | begin()
29 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | const { defineConfig } = require('eslint-define-config');
 3 | 
 4 | module.exports = defineConfig({
 5 |   root: true,
 6 |   extends: [
 7 |     'eslint:recommended',
 8 |     'plugin:node/recommended',
 9 |     'plugin:@typescript-eslint/recommended',
10 |   ],
11 |   plugins: ['import'],
12 |   parser: '@typescript-eslint/parser',
13 |   parserOptions: {
14 |     sourceType: 'module',
15 |     ecmaVersion: 2021,
16 |   },
17 |   rules: {
18 |     'no-debugger': ['error'],
19 |     '@typescript-eslint/no-var-requires': 'off',
20 |     'node/no-unpublished-require': 'off',
21 |     'node/no-extraneous-import': 'off',
22 |     'node/no-extraneous-require': 'off',
23 |     'node/no-missing-import': 'off',
24 |     'node/no-missing-require': 'off',
25 |     'no-undef': 'off',
26 |     'node/no-unpublished-import': 'off',
27 |     'node/no-unsupported-features/es-syntax': 'off',
28 |     'no-process-exit': 'off',
29 |     '@typescript-eslint/ban-ts-comment': 'off',
30 |     'no-constant-condition': 'off',
31 |     '@typescript-eslint/no-non-null-assertion': 'off',
32 |     '@typescript-eslint/no-explicit-any': 'off',
33 |   },
34 | });
35 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "baseUrl": "./",
 4 |         "outDir": "dist",
 5 |         "sourceMap": false,
 6 |         "target": "ES2022",
 7 |         "module": "ES2022",
 8 |         "moduleResolution": "node",
 9 |         "allowJs": false,
10 |         "noUnusedLocals": true,
11 |         "strictNullChecks": true,
12 |         "noImplicitAny": true,
13 |         "noImplicitThis": true,
14 |         "experimentalDecorators": true,
15 |         "resolveJsonModule": true,
16 |         "esModuleInterop": true,
17 |         "removeComments": false,
18 |         "declaration": true,
19 |         "isolatedModules": true,
20 |         "jsx": "preserve",
21 |         "lib": [
22 |             "esnext",
23 |             "dom",
24 |         ],
25 |         "types": [],
26 |         "skipLibCheck": true,
27 |         // "files": "src/index.ts",
28 |         "emitDeclarationOnly": true,
29 |         "declarationDir": "dist",
30 |         "rootDir": ".",
31 |         "paths": {
32 |             "@/*": [
33 |                 "src/*"
34 |             ],
35 |             "windstorm-ui": [
36 |                 "src/index.ts"
37 |             ]
38 |         }
39 |     },
40 |     "include": [
41 |         "src/**/*"
42 |     ],
43 |     "exclude": [
44 |         "node_modules",
45 |         "dist",
46 |         "packages/**/__tests__"
47 |     ]
48 | }


--------------------------------------------------------------------------------
/src/components/SeamlessScroll/__docs__/demo-css-reset.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ref } from 'vue';
 3 | import { SeamlessScroll } from 'windstorm-ui';
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div>
 8 |     <SeamlessScroll class="the-demo-list">
 9 |       <div class="the-demo-list__item">1</div>
10 |       <div class="the-demo-list__item">2</div>
11 |       <div class="the-demo-list__item">3</div>
12 |       <div class="the-demo-list__item">4</div>
13 |       <div class="the-demo-list__item">5</div>
14 |       <div class="the-demo-list__item">6</div>
15 |       <div class="the-demo-list__item">7</div>
16 |       <div class="the-demo-list__item">8</div>
17 |     </SeamlessScroll>
18 |   </div>
19 | </template>
20 | 
21 | <style lang="scss" scoped>
22 | .the-demo-list {
23 |   height: 180px;
24 | 
25 |   &__item {
26 |     height: 32px;
27 |     font-size: 16px;
28 |     line-height: 32px;
29 |   }
30 | 
31 |   :deep(.seamless-scroll__box--odd .seamless-scroll__box-top>*:nth-child(2n+1)) {
32 |     background-color: rgba(0, 255, 0, 0.6);
33 |   }
34 | 
35 |   :deep(.seamless-scroll__box--odd .seamless-scroll__box-bottom>*:nth-child(2n)) {
36 |     background-color: rgba(0, 255, 0, 0.6);
37 |   }
38 | 
39 |   :deep(.seamless-scroll__box--even .seamless-scroll__box-top>*:nth-child(2n+1)) {
40 |     background-color: rgba(0, 255, 0, 0.6);
41 |   }
42 | 
43 |   :deep(.seamless-scroll__box--even .seamless-scroll__box-bottom>*:nth-child(2n+1)) {
44 |     background-color: rgba(0, 255, 0, 0.6);
45 |   }
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/docs/public/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659323377213"
 3 |     class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1327"
 4 |     xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
 5 |     <defs>
 6 |         <style type="text/css">
 7 |             @font-face {
 8 |                 font-family: feedback-iconfont;
 9 |                 src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype");
10 |             }
11 |         </style>
12 |     </defs>
13 |     <path
14 |         d="M167 607v250h251v72H155C122.194 929 95.538 902.672 95.008 869.992L95 869V607h72z m762 0v262c0 33.137-26.863 60-60 60H604v-72h253V607h72zM869 98c33.137 0 60 26.863 60 60v263h-72V170H604V98zM418 98v72H167v251H95V158C95 125.194 121.328 98.538 154.008 98.008L155 98h263z"
15 |         fill="#213547" p-id="1328"></path>
16 |     <path d="M339.5 416.5m-57.5 0a57.5 57.5 0 1 0 115 0 57.5 57.5 0 1 0-115 0Z" fill="#213547" p-id="1329"></path>
17 |     <path d="M684.5 416.5m-57.5 0a57.5 57.5 0 1 0 115 0 57.5 57.5 0 1 0-115 0Z" fill="#213547"  p-id="1330"></path>
18 |     <path d="M397 589c0 63.513 51.711 115 115.5 115S628 652.513 628 589" fill="#213547" p-id="1331"></path>
19 | </svg>


--------------------------------------------------------------------------------
/docs/.vitepress/config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vitepress';
 2 | import { applyPlugins } from '@ruabick/md-demo-plugins';
 3 | import { genTemp } from '@ruabick/vite-plugin-gen-temp';
 4 | import { genApiDoc } from '@ruabick/vite-plugin-gen-api-doc';
 5 | import { sidebar } from './sidebar.js';
 6 | import { resolve } from 'path';
 7 | 
 8 | export default defineConfig({
 9 |   lang: 'zh-CN',
10 |   lastUpdated: true,
11 |   base: process.env.NODE_ENV === 'production' ? '/windstorm-ui' : '/',
12 |   locales: {
13 |     '/': {
14 |       lang: 'zh-CN',
15 |       title: 'windstorm-ui',
16 |       description: '',
17 |     },
18 |     // '/en/': {
19 |     //   lang: 'en-US',
20 |     //   title: 'windstorm-ui',
21 |     //   description: '',
22 |     // },
23 |   },
24 |   themeConfig: {
25 |     logo: '/logo.svg',
26 |     localeLinks: {
27 |       text: '',
28 |       items: [
29 |         { text: '简体中文', link: '/' },
30 |         // { text: 'English', link: '/en/' },
31 |       ],
32 |     },
33 |     // nav: [{ text: '指南', link: '/guide' }],s
34 |     sidebar,
35 |     algolia: {},
36 |     socialLinks: [
37 |       { icon: 'github', link: 'https://github.com/zhangshichun/windstorm-ui' },
38 |     ],
39 |   },
40 |   vue: {},
41 |   vite: {
42 |     plugins: [genTemp(), genApiDoc()],
43 |     resolve: {
44 |       alias: {
45 |         'windstorm-ui': resolve('./src/'),
46 |       },
47 |     },
48 |   },
49 |   markdown: {
50 |     config: (md) => {
51 |       applyPlugins(md);
52 |     },
53 |     theme: {
54 |       light: 'github-light',
55 |       dark: 'github-dark',
56 |     },
57 |   },
58 | });
59 | 


--------------------------------------------------------------------------------
/docs/.vitepress/theme/var.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --vp-code-block-bg: #f9fafb;
 3 |   /* --vp-code-block-bg: var(--vp-c-bg-alt); */
 4 | 
 5 |   --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
 6 |   --vp-code-line-number-color: var(--vp-c-text-dark-3);
 7 | 
 8 |   --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
 9 |   --vp-code-copy-code-active-text: var(--vp-c-bg-alt);
10 | 
11 |   --demi-border-color: #ebedf1;
12 | }
13 | 
14 | .dark {
15 |   --vp-code-block-bg: var(--vp-c-bg-alt);
16 | }
17 | 
18 | .vp-doc [class*='language-']:before {
19 |   color: var(--vp-c-text-2);
20 | }
21 | 
22 | @media (min-width: 640px) {
23 |   .vp-doc div[class*='language-'] {
24 |     border-radius: 4px;
25 |     margin: 16px 0;
26 |   }
27 | }
28 | 
29 | @media (max-width: 639px) {
30 |   .vp-doc div[class*='language-'] {
31 |     border-radius: 4px;
32 |   }
33 | }
34 | 
35 | /* 中文字太大了 */
36 | @media (min-width: 640px) {
37 |   .name,
38 |   .text {
39 |     font-size: 28px !important;
40 |   }
41 | }
42 | 
43 | @media (min-width: 960px) {
44 |   .name,
45 |   .text {
46 |     font-size: 32px !important;
47 |   }
48 | }
49 | 
50 | .vp-doc table {
51 |   display: table;
52 |   width: 100%;
53 |   font-size: 15px;
54 | }
55 | 
56 | .vp-doc tr {
57 |   border-top: 1px solid var(--demi-border-color);
58 | }
59 | 
60 | .vp-doc tr:nth-child(2n) {
61 |   background-color: unset;
62 | }
63 | 
64 | .vp-doc th,
65 | .vp-doc td {
66 |   border: 1px solid var(--demi-border-color);
67 |   padding: 10px 20px;
68 | }
69 | 
70 | .vp-doc th {
71 |   font-size: 15px;
72 |   font-weight: 600;
73 |   background-color: var(--vp-c-white-soft);
74 | }
75 | 
76 | .vp-doc table td:first-child {
77 |   font-size: 15px;
78 |   font-weight: 600;
79 | }
80 | 


--------------------------------------------------------------------------------
/src/components/Map/__docs__/01-show-map.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div ref="mapEl" class="map"></div>
 3 | </template>
 4 | <script setup>
 5 | import { onMounted, ref } from 'vue'
 6 | import maplibregl from 'maplibre-gl'
 7 | const MY_KEY = '88f3c1aa7e87a1daa0176fe655a92030';
 8 | const mapEl = ref(null)
 9 | const initOption = {
10 |   style: {
11 |     "version": 8,
12 |     "id": "43f36e14-e3f5-43c1-84c0-50a9c80dc5c7",
13 |     "sources": {
14 |       "tdt-vec": {
15 |         "type": "raster",
16 |         "tiles": [`https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${MY_KEY}`],
17 |         "tileSize": 256
18 |       },
19 |       "tdt-cva": {
20 |         "type": "raster",
21 |         "tiles": [`https://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${MY_KEY}`],
22 |         "tileSize": 256
23 |       }
24 |     },
25 |     "light": {
26 |       "anchor": "map",
27 |       "color": "red",
28 |       "intensity": 1
29 |     },
30 |     "layers": [
31 |       {
32 |         "id": "tdt-tiles-layer",
33 |         "type": "raster",
34 |         "source": "tdt-vec",
35 |         "paint": {
36 |           // "raster-brightness-max": 0.7,
37 |           // "raster-brightness-min": 0.3,
38 |           "raster-hue-rotate": 60,
39 |           "raster-saturation": 0
40 |         }
41 |       },
42 |       {
43 |         "id": "tdt-cva-layer",
44 |         "type": "raster",
45 |         "source": "tdt-cva",
46 |       },
47 |     ]
48 |   },
49 | }
50 | 
51 | 
52 | onMounted(() => {
53 |   const map = new maplibregl.Map({
54 |     container: mapEl.value,
55 |     ...initOption,
56 |   });
57 | })
58 | </script>
59 | <style lang="scss" scoped>
60 | .map {
61 |   width: 600px;
62 |   height: 300px;
63 | }
64 | </style>


--------------------------------------------------------------------------------
/src/components/Map/__docs__/03-geojson-map.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div ref="mapEl" class="map"></div>
 3 | </template>
 4 | <script setup>
 5 | import { onMounted, ref } from 'vue'
 6 | import maplibregl from 'maplibre-gl'
 7 | const mapEl = ref(null)
 8 | const initOption = {
 9 |   zoom: 5,
10 |   center: [
11 |     113.07569050750635,
12 |     30.841719769976834
13 |   ],
14 |   style: {
15 |     "version": 8,
16 |     "id": "43f36e14-e3f5-43c1-84c0-50a9c80dc5c7",
17 |     "sources": {},
18 |     "light": {
19 |       "anchor": "map",
20 |       "color": "red",
21 |       "intensity": 1
22 |     },
23 |     "layers": [
24 |     ],
25 |     "glyphs": "/fonts/mapbox/{fontstack}/{range}.pbf" // 这行没有啥用，是为了hack字体无法显示的bug
26 |   },
27 | }
28 | 
29 | const fetchGeoJSON = async (areaCode) => {
30 |   const response = await fetch(`https://pic.zhangshichun.top/geojson/merged/${areaCode}.json`, {
31 |     headers: {
32 |       'Content-Type': 'application/json'
33 |     }
34 |   })
35 |   return response.json()
36 | }
37 | 
38 | onMounted(async () => {
39 |   const map = new maplibregl.Map({
40 |     container: mapEl.value,
41 |     ...initOption,
42 |   });
43 |   const hubeiGeoJSON = await fetchGeoJSON(420000)
44 |   map.addSource('bound-source', {
45 |     type: 'geojson',
46 |     data: hubeiGeoJSON
47 |   })
48 |   map.addLayer({
49 |     id: 'areas-line',
50 |     type: 'line',
51 |     source: 'bound-source',
52 |     paint: {
53 |       'line-color': '#fff',
54 |       'line-width': 2
55 |     }
56 |   })
57 |   const areaNames = await fetchGeoJSON('420000-area-names')
58 |   map.addSource('names-source', {
59 |     type: 'geojson',
60 |     data: areaNames
61 |   })
62 |   map.addLayer({
63 |     id: 'areas-name',
64 |     source: 'names-source',
65 |     "type": "symbol",
66 |     "layout": {
67 |       "text-field": '{name}',
68 |       "text-size": 8,
69 |     },
70 |     "paint": {
71 |       "text-color": "white",
72 |       "text-halo-color": "rgba(0, 0, 0, 0)"
73 |     },
74 |     filter: ['==', 'parentCode', 420000]
75 |   })
76 | })
77 | </script>
78 | <style lang="scss" scoped>
79 | .map {
80 |   width: 600px;
81 |   height: 300px;
82 | }
83 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "windstorm-ui",
 3 |   "version": "0.0.0",
 4 |   "description": "",
 5 |   "homepage": "https://zhangshichun.github.io/windstorm-ui",
 6 |   "types": "./dist/index.d.ts",
 7 |   "main": "./dist/windstorm-ui.umd.cjs",
 8 |   "module": "./dist/windstorm-ui.js",
 9 |   "exports": {
10 |     ".": {
11 |       "import": "./dist/windstorm-ui.js",
12 |       "require": "./dist/windstorm-ui.umd.cjs"
13 |     },
14 |     "./dist/style.css": "./dist/style.css"
15 |   },
16 |   "scripts": {
17 |     "dev": "initial-scan docs && vitepress dev .docs --host",
18 |     "build": "vite build",
19 |     "site:build": "initial-scan docs && cross-env NODE_ENV=production vitepress build .docs",
20 |     "serve": "vitepress serve .docs --host",
21 |     "deploy": "gh-pages -d .docs/.vitepress/dist -t true",
22 |     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
23 |     "lint": "eslint src/**/*.{vue,js,ts,tsx}",
24 |     "lint-fix": "yarn lint -- --fix",
25 |     "release": "np",
26 |     "geojson:fetch": "node scripts/fetch.js",
27 |     "geojson:merge": "node scripts/merge.js"
28 |   },
29 |   "keywords": [],
30 |   "author": "zhangshichun",
31 |   "license": "MIT",
32 |   "dependencies": {
33 |     "@vueuse/core": "^9.4.0",
34 |     "gsap": "^3.11.2",
35 |     "@turf/turf": "^6.5.0"
36 |   },
37 |   "devDependencies": {
38 |     "@ruabick/md-demo-plugins": "latest",
39 |     "@ruabick/vite-plugin-gen-api-doc": "latest",
40 |     "@ruabick/vite-plugin-gen-temp": "latest",
41 |     "@ruabick/vitepress-demo-block": "latest",
42 |     "@typescript-eslint/eslint-plugin": "^5.33.1",
43 |     "@typescript-eslint/parser": "^5.33.1",
44 |     "@vitejs/plugin-vue": "^3.0.1",
45 |     "cross-env": "^7.0.3",
46 |     "eslint": "^8.20.0",
47 |     "eslint-define-config": "^1.6.0",
48 |     "eslint-plugin-import": "^2.26.0",
49 |     "eslint-plugin-node": "^11.1.0",
50 |     "gh-pages": "^4.0.0",
51 |     "maplibre-gl": "^2.4.0",
52 |     "np": "^7.6.2",
53 |     "prettier": "^2.7.1",
54 |     "sass": "^1.56.1",
55 |     "vite": "3.2.5",
56 |     "vite-plugin-dts": "^1.4.0",
57 |     "vitepress": "1.0.0-alpha.29",
58 |     "vue": "latest",
59 |     "axios": "^1.1.2",
60 |     "fs-extra": "^10.1.0",
61 |     "lodash": "^4.17.21"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/scripts/configs.js:
--------------------------------------------------------------------------------
  1 | const path = require('path')
  2 | 
  3 | 
  4 | const codes = [
  5 |   420000,
  6 |   420100,
  7 |   420102,
  8 |   420103,
  9 |   420104,
 10 |   420105,
 11 |   420106,
 12 |   420107,
 13 |   420111,
 14 |   420112,
 15 |   420113,
 16 |   420114,
 17 |   420115,
 18 |   420116,
 19 |   420117,
 20 |   420200,
 21 |   420202,
 22 |   420203,
 23 |   420204,
 24 |   420205,
 25 |   420222,
 26 |   420281,
 27 |   420300,
 28 |   420302,
 29 |   420303,
 30 |   420304,
 31 |   420322,
 32 |   420323,
 33 |   420324,
 34 |   420325,
 35 |   420381,
 36 |   420500,
 37 |   420502,
 38 |   420503,
 39 |   420504,
 40 |   420505,
 41 |   420506,
 42 |   420525,
 43 |   420526,
 44 |   420527,
 45 |   420528,
 46 |   420529,
 47 |   420581,
 48 |   420582,
 49 |   420583,
 50 |   420600,
 51 |   420602,
 52 |   420606,
 53 |   420607,
 54 |   420624,
 55 |   420625,
 56 |   420626,
 57 |   420682,
 58 |   420683,
 59 |   420684,
 60 |   420700,
 61 |   420702,
 62 |   420703,
 63 |   420704,
 64 |   420800,
 65 |   420802,
 66 |   420804,
 67 |   420822,
 68 |   420881,
 69 |   420882,
 70 |   420900,
 71 |   420902,
 72 |   420921,
 73 |   420922,
 74 |   420923,
 75 |   420981,
 76 |   420982,
 77 |   420984,
 78 |   421000,
 79 |   421002,
 80 |   421003,
 81 |   421022,
 82 |   421024,
 83 |   421081,
 84 |   421083,
 85 |   421087,
 86 |   // 421088,
 87 |   421100,
 88 |   421102,
 89 |   421121,
 90 |   421122,
 91 |   421123,
 92 |   421124,
 93 |   421125,
 94 |   421126,
 95 |   421127,
 96 |   421181,
 97 |   421182,
 98 |   421200,
 99 |   421202,
100 |   421221,
101 |   421222,
102 |   421223,
103 |   421224,
104 |   421281,
105 |   421300,
106 |   421303,
107 |   421321,
108 |   421381,
109 |   422800,
110 |   422801,
111 |   422802,
112 |   422822,
113 |   422823,
114 |   422825,
115 |   422826,
116 |   422827,
117 |   422828,
118 |   429004,
119 |   429005,
120 |   429006,
121 |   429021,
122 | ]
123 | 
124 | const ORIGIN_GEOJSON_DIR = path.resolve(__dirname, '../.temp/origin-geojson')
125 | 
126 | const MERGED_GEOJSON_DIR = path.resolve(__dirname, '../.temp/merged-geojson')
127 | 
128 | module.exports = {
129 |   codes,
130 |   ORIGIN_GEOJSON_DIR,
131 |   MERGED_GEOJSON_DIR,
132 | }


--------------------------------------------------------------------------------
/src/components/Map/__docs__/04-geojson-map.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div ref="mapEl" class="map"></div>
  3 | </template>
  4 | <script setup>
  5 | import { onMounted, ref } from 'vue'
  6 | import maplibregl from 'maplibre-gl'
  7 | import * as turf from '@turf/turf'
  8 | const mapEl = ref(null)
  9 | const initOption = {
 10 |   zoom: 5,
 11 |   center: [
 12 |     113.07569050750635,
 13 |     30.841719769976834
 14 |   ],
 15 |   style: {
 16 |     "version": 8,
 17 |     "id": "43f36e14-e3f5-43c1-84c0-50a9c80dc5c7",
 18 |     "sources": {},
 19 |     "light": {
 20 |       "anchor": "map",
 21 |       "color": "red",
 22 |       "intensity": 1
 23 |     },
 24 |     "layers": [
 25 |     ],
 26 |     "glyphs": "/fonts/mapbox/{fontstack}/{range}.pbf" // 这行没有啥用，是为了hack字体无法显示的bug
 27 |   },
 28 | }
 29 | 
 30 | const fetchGeoJSON = async (areaCode) => {
 31 |   const response = await fetch(`https://pic.zhangshichun.top/geojson/merged/${areaCode}.json`, {
 32 |     headers: {
 33 |       'Content-Type': 'application/json'
 34 |     }
 35 |   })
 36 |   return response.json()
 37 | }
 38 | let map;
 39 | const emptyGeoJSON = { "type": "FeatureCollection", "features": [] }
 40 | 
 41 | const fitBounds = (feature, options = {}) => {
 42 |   const bboxResult = turf.bbox(feature);
 43 |   const [a, b, c, d] = bboxResult;
 44 |   map?.fitBounds(
 45 |     [
 46 |       [a, b],
 47 |       [c, d],
 48 |     ],
 49 |     options,
 50 |   );
 51 | }
 52 | 
 53 | const loadArea = async (code) => {
 54 |   const geoJSON = await fetchGeoJSON(code)
 55 |   map?.getSource('bound-source').setData(geoJSON)
 56 |   fitBounds(geoJSON)
 57 |   map?.setFilter('areas-name', ['==', 'parentCode', Number(code)]);
 58 | }
 59 | 
 60 | onMounted(async () => {
 61 |   map = new maplibregl.Map({
 62 |     container: mapEl.value,
 63 |     ...initOption,
 64 |   });
 65 |   map.on('style.load', async () => {
 66 |     map.addSource('bound-source', {
 67 |       type: 'geojson',
 68 |       data: emptyGeoJSON
 69 |     })
 70 |     map.addLayer({
 71 |       id: 'areas-surface',
 72 |       type: 'fill',
 73 |       source: 'bound-source',
 74 |       layout: {},
 75 |       paint: {
 76 |         'fill-color': '#0357aa',
 77 |         'fill-opacity': 1,
 78 |       },
 79 |     })
 80 |     map.addLayer({
 81 |       id: 'areas-surface-hight',
 82 |       type: 'fill',
 83 |       source: 'bound-source',
 84 |       layout: {},
 85 |       paint: {
 86 |         'fill-color': 'orange',
 87 |         'fill-opacity': 1,
 88 |       },
 89 |       filter: ['==', 'adcode', '']
 90 |     })
 91 |     map.addLayer({
 92 |       id: 'areas-line',
 93 |       type: 'line',
 94 |       source: 'bound-source',
 95 |       paint: {
 96 |         'line-color': 'red',
 97 |         'line-width': 2
 98 |       }
 99 |     })
100 |     map.on('click', 'areas-surface', (e) => {
101 |       const feature = e.features?.[0];
102 |       const code = feature?.properties?.adcode;
103 |       loadArea(code)
104 |     })
105 |     map.on('mousemove', 'areas-surface', (e) => {
106 |       const feature = e.features?.[0];
107 |       const code = feature?.properties?.adcode;
108 |       map?.setFilter('areas-surface-hight', ['==', 'adcode', Number(code)]);
109 |     })
110 |     loadArea(420000)
111 |     const areaNames = await fetchGeoJSON('420000-area-names')
112 |     map.addSource('names-source', {
113 |       type: 'geojson',
114 |       data: areaNames
115 |     })
116 |     map.addLayer({
117 |       id: 'areas-name',
118 |       source: 'names-source',
119 |       "type": "symbol",
120 |       "layout": {
121 |         "text-field": '{name}',
122 |         "text-size": 8,
123 |       },
124 |       "paint": {
125 |         "text-color": "black",
126 |         "text-halo-color": "rgba(0, 0, 0, 0)"
127 |       },
128 |       filter: ['==', 'parentCode', 420000]
129 |     })
130 |   })
131 | 
132 | })
133 | </script>
134 | <style lang="scss" scoped>
135 | .map {
136 |   width: 600px;
137 |   height: 300px;
138 |   background-color: #fff;
139 | }
140 | </style>


--------------------------------------------------------------------------------
/src/components/SeamlessScroll/seamless-scroll.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { computed, nextTick, onMounted, ref, watchEffect } from 'vue';
  3 | import { useElementSize } from '@vueuse/core';
  4 | import gsap from 'gsap'
  5 | import { useMutationObserver } from '@vueuse/core'
  6 | const props = withDefaults(defineProps<{
  7 |   /**
  8 |    * 滑动单位距离需要的时间(s)
  9 |    */
 10 |    duration?: number,
 11 |    /**
 12 |     * 两次滑动之间的停顿时长(s)
 13 |     */
 14 |    delay?: number
 15 | }>(), {
 16 |   duration: 2,
 17 |   delay: 1
 18 | })
 19 | 
 20 | const wrapperRef = ref(null)
 21 | const boxRef = ref(null)
 22 | const topRef = ref<HTMLDivElement>()
 23 | const { height: wrapperHeight } = useElementSize(wrapperRef)
 24 | const { height: boxHeight } = useElementSize(boxRef)
 25 | const { height: topBoxHeight } = useElementSize(topRef)
 26 | 
 27 | const timeLine = gsap.timeline()
 28 | let scrollingElIndex = 0
 29 | 
 30 | const genAnimates = () => {
 31 |   if (!topRef.value) {
 32 |     return
 33 |   }
 34 |   const nodeList = topRef.value.childNodes
 35 |   const nodeArr = Array.from((nodeList as any).values()).filter((t: any) => t.nodeType === Node.ELEMENT_NODE) as HTMLElement[]
 36 |   const currentScrollingEl = nodeArr[scrollingElIndex]
 37 |   scrollingElIndex = (scrollingElIndex + 1) % nodeArr.length
 38 |   if (!currentScrollingEl) {
 39 |     return
 40 |   }
 41 |   let rect = currentScrollingEl.getBoundingClientRect();
 42 |   const elHeight = rect.height
 43 |   const offsetTop = currentScrollingEl.offsetTop
 44 |   const scrollTarget = offsetTop + elHeight;
 45 |   const scrollAreaHeight = topBoxHeight.value
 46 |   const willScrollToEdge = scrollTarget >= scrollAreaHeight
 47 |   if (!willScrollToEdge) {
 48 |     timeLine.to(wrapperRef.value, { scrollTop: scrollTarget, duration: props.duration }, `+=${props.delay}`)
 49 |     return
 50 |   }
 51 |   timeLine.to(wrapperRef.value, { scrollTop: scrollAreaHeight, duration: props.duration }, `+=${props.delay}`)
 52 | }
 53 | 
 54 | const update = () => {
 55 |   timeLine.eventCallback('onComplete', () => {
 56 |     if (scrollingElIndex === 0) {
 57 |       gsap.to(wrapperRef.value, {
 58 |         scrollTop: 0, duration: 0, onComplete: () => {
 59 |           genAnimates()
 60 |         }
 61 |       })
 62 |       return
 63 |     }
 64 |     genAnimates()
 65 |   })
 66 |   genAnimates()
 67 | }
 68 | 
 69 | const showShadowDiv = computed(() => {
 70 |   if (!topBoxHeight.value) {
 71 |     return false
 72 |   }
 73 |   if (!wrapperHeight.value) {
 74 |     return false
 75 |   }
 76 |   if (!boxHeight.value) {
 77 |     return false
 78 |   }
 79 |   return boxHeight.value > wrapperHeight.value
 80 | })
 81 | 
 82 | watchEffect(() => {
 83 |   if (showShadowDiv.value) {
 84 |     nextTick(() => update())
 85 |   }
 86 | })
 87 | 
 88 | const onMouseOver = () => {
 89 |   timeLine.pause()
 90 | }
 91 | 
 92 | const onMouseOut = () => {
 93 |   timeLine.resume()
 94 | }
 95 | 
 96 | const childNodesCount = ref(0)
 97 | const isChildNodesOdd = computed(() => childNodesCount.value % 2 !== 0)
 98 | 
 99 | const refreshChildNodesCount = () => {
100 |   if (!topRef.value) {
101 |     return
102 |   }
103 |   const nodeList = topRef.value.childNodes
104 |   const nodeArr = Array.from((nodeList as any).values()).filter((t: any) => t.nodeType === Node.ELEMENT_NODE)
105 |   childNodesCount.value = nodeArr.length
106 | }
107 | 
108 | // 关于初始化以及增加元素后
109 | useMutationObserver(topRef, (mutations) => {
110 |   refreshChildNodesCount()
111 | }, {
112 |   childList: true,
113 | })
114 | 
115 | onMounted(() => {
116 |   refreshChildNodesCount()
117 | })
118 | 
119 | </script>
120 | 
121 | <template>
122 |   <div class="seamless-scroll">
123 |     <div ref="wrapperRef" class="seamless-scroll__wrapper" @mouseover="onMouseOver" @mouseout="onMouseOut">
124 |       <div ref="boxRef"
125 |         :class="{ 'seamless-scroll__box': true, 'seamless-scroll__box--odd': isChildNodesOdd, 'seamless-scroll__box--even': !isChildNodesOdd }">
126 |         <div class="seamless-scroll__box-top" ref="topRef">
127 |           <slot></slot>
128 |         </div>
129 |         <div v-if="showShadowDiv" class="seamless-scroll__box-bottom">
130 |           <slot></slot>
131 |         </div>
132 |       </div>
133 |     </div>
134 |   </div>
135 | </template>
136 | <style lang="scss">
137 | .seamless-scroll {
138 |   &__wrapper {
139 |     width: 100%;
140 |     height: 100%;
141 |     position: relative;
142 |     overflow: hidden;
143 |   }
144 | 
145 |   &__box {
146 |     padding: 0;
147 | 
148 |     &-top,
149 |     &-bottom {
150 |       overflow: hidden;
151 | 
152 |       &>* {
153 |         background-size: 100% 100%;
154 |       }
155 |     }
156 |   }
157 | }
158 | </style>


--------------------------------------------------------------------------------
/scripts/merge.js:
--------------------------------------------------------------------------------
  1 | const fs = require('fs-extra');
  2 | const path = require('path')
  3 | const config = require('./configs.js')
  4 | const _ = require('lodash');
  5 | const { set } = require('lodash');
  6 | 
  7 | const readOriginJson = async (code) => {
  8 |   const filePath = path.resolve(config.ORIGIN_GEOJSON_DIR, `${code}.json`)
  9 |   return fs.readJSON(filePath)
 10 | }
 11 | 
 12 | const readJsons = async (codes) => {
 13 |   const tasks = codes.map(t => readOriginJson(t))
 14 |   const jsons = await Promise.all(tasks)
 15 |   return jsons;
 16 | }
 17 | 
 18 | const getAllFeatures = (jsons) => {
 19 |   const features = []
 20 |   jsons.forEach((json) => {
 21 |     const feature = _.get(json, 'features.0')
 22 |     const acroutes = _.get(feature, 'properties.acroutes')
 23 |     set(feature, 'properties.deep', acroutes.length)
 24 |     features.push(feature)
 25 |     // const parentCode = _.get(feature, 'properties.parent.adcode')
 26 |     // if (!codes.includes(parentCode)) {
 27 |     //   rootNodes.push(feature)
 28 |     //   return
 29 |     // }
 30 |     // const parentJson = jsons.find(t => _.get(t,'features.0.properties.adcode') == parentCode)
 31 |     // const parentNode = _.get(parentJson, 'features.0')
 32 |     // const parentChildren = _.get(parentNode, 'children') ?? []
 33 |     // parentChildren.push(feature)
 34 |     // _.set(parentNode, 'children', parentChildren)
 35 |     // return;
 36 |   })
 37 |   return features;
 38 | }
 39 | 
 40 | const genChildrenMap = (features) => {
 41 |   const map = {}
 42 |   features.forEach(feature => {
 43 |     const adcode = _.get(feature, 'properties.adcode')
 44 |     const parentCode = _.get(feature, 'properties.parent.adcode')
 45 |     if (!features.some(t => _.get(t, 'properties.adcode') == parentCode)) {
 46 |       return
 47 |     }
 48 |     const parentChildren = _.get(map, parentCode) ?? []
 49 |     parentChildren.push(adcode)
 50 |     _.set(map, parentCode, parentChildren)
 51 |   })
 52 |   return map;
 53 | }
 54 | 
 55 | const outputMergedJsons = async (childrenMap, allFeatures) => {
 56 |   await fs.remove(config.MERGED_GEOJSON_DIR)
 57 |   await fs.ensureDir(config.MERGED_GEOJSON_DIR)
 58 |   const tasksWithChildren = Object.keys(childrenMap).map(key => {
 59 |     const childrenCodes = childrenMap[key]
 60 |     const feature = allFeatures.find(t => _.get(t, 'properties.adcode') == key)
 61 |     const features = childrenCodes.map(code => allFeatures.find(t => _.get(t, 'properties.adcode') == code))
 62 |     const geojson = {"type":"FeatureCollection", features, properties: feature.properties}
 63 |     const filePath = path.resolve(config.MERGED_GEOJSON_DIR, `${key}.json`)
 64 |     return fs.writeJSON(filePath, geojson)
 65 |   })
 66 |   await Promise.all(tasksWithChildren)
 67 | 
 68 |   const tasksWithoutChildren = allFeatures.filter(t => !childrenMap[_.get(t, 'properties.adcode')])
 69 |   .map(t => {
 70 |     const code = _.get(t, 'properties.adcode')
 71 |     const filePath = path.resolve(config.MERGED_GEOJSON_DIR, `${code}.json`)
 72 | 
 73 |     return fs.writeJSON(filePath, t)
 74 |   })
 75 |   await Promise.all(tasksWithoutChildren)
 76 | }
 77 | 
 78 | const genAreaNames = (allFeatures) => {
 79 |   const features = allFeatures.map(feature => {
 80 |     const areaCode = _.get(feature, 'properties.adcode')
 81 |     const center = _.get(feature, 'properties.centroid') || _.get(feature, 'properties.center')
 82 |     const name = _.get(feature, 'properties.name')
 83 |     const parentCode = _.get(feature, 'properties.parent.adcode')
 84 |     const deep = _.get(feature, 'properties.deep')
 85 |     return {
 86 |       type: 'Feature',
 87 |       geometry: {
 88 |         type: 'Point',
 89 |         coordinates: center
 90 |       },
 91 |       properties: {
 92 |         name,
 93 |         areaCode,
 94 |         deep,
 95 |         parentCode
 96 |       }
 97 |     }
 98 |   })
 99 |   return {
100 |     "type": "FeatureCollection",
101 |     "features": features
102 |   }
103 | }
104 | 
105 | const outputAreaNames = async (areaNames) => {
106 |   const filePath = path.resolve(config.MERGED_GEOJSON_DIR, 'area-names.json')
107 |   return fs.writeJSON(filePath, areaNames)
108 | }
109 | 
110 | const outputCodePropertiesMap = async (allFeatures) => {
111 |   const codePropertiesMap = allFeatures.reduce((pre, feature) => {
112 |     const code = _.get(feature, 'properties.adcode')
113 |     const properties = _.get(feature, 'properties')
114 |     return {
115 |       ...pre,
116 |       [code]: properties
117 |     }
118 |   }, {})
119 |   const filePath = path.resolve(config.MERGED_GEOJSON_DIR, 'code-properties.json')
120 |   return fs.writeJSON(filePath, codePropertiesMap)
121 | }
122 | 
123 | const begin = async () => {
124 |   const jsons = await readJsons(config.codes)
125 |   const allFeatures = getAllFeatures(jsons)
126 |   const childrenMap = genChildrenMap(allFeatures)
127 |   await outputMergedJsons(childrenMap, allFeatures)
128 |   const areaNames = genAreaNames(allFeatures)
129 |   await outputAreaNames(areaNames)
130 |   await outputCodePropertiesMap(allFeatures)
131 | }
132 | 
133 | begin()


--------------------------------------------------------------------------------
/src/components/Map/__docs__/02-show-biz-info.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div ref="mapEl" class="map"></div>
  3 | </template>
  4 | <script setup>
  5 | import { onMounted, ref } from 'vue'
  6 | import maplibregl from 'maplibre-gl'
  7 | const MY_KEY = '88f3c1aa7e87a1daa0176fe655a92030';
  8 | const mapEl = ref(null)
  9 | const initOption = {
 10 |   style: {
 11 |     "version": 8,
 12 |     "id": "43f36e14-e3f5-43c1-84c0-50a9c80dc5c7",
 13 |     "sources": {
 14 |       "tdt-vec": {
 15 |         "type": "raster",
 16 |         "tiles": [`https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${MY_KEY}`],
 17 |         "tileSize": 256
 18 |       },
 19 |       "tdt-cva": {
 20 |         "type": "raster",
 21 |         "tiles": [`https://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${MY_KEY}`],
 22 |         "tileSize": 256
 23 |       }
 24 |     },
 25 |     "light": {
 26 |       "anchor": "map",
 27 |       "color": "red",
 28 |       "intensity": 1
 29 |     },
 30 |     "layers": [
 31 |       {
 32 |         "id": "tdt-tiles-layer",
 33 |         "type": "raster",
 34 |         "source": "tdt-vec",
 35 |         "paint": {
 36 |           // "raster-brightness-max": 0.7,
 37 |           // "raster-brightness-min": 0.3,
 38 |           "raster-hue-rotate": 60,
 39 |           "raster-saturation": 0
 40 |         }
 41 |       },
 42 |       {
 43 |         "id": "tdt-cva-layer",
 44 |         "type": "raster",
 45 |         "source": "tdt-cva",
 46 |       },
 47 |     ],
 48 |     "glyphs": "/fonts/mapbox/{fontstack}/{range}.pbf"
 49 |   },
 50 |   center: [114.3057884883687, 30.611937378651888],
 51 |   zoom: 10,
 52 |   pitch: 45
 53 | }
 54 | 
 55 | const geojsonArea = {
 56 |   "type": "FeatureCollection",
 57 |   "features": [
 58 |     {
 59 |       "type": "Feature",
 60 |       "properties": {},
 61 |       "geometry": {
 62 |         "coordinates": [
 63 |           [
 64 |             [
 65 |               114.46779835239658,
 66 |               30.605050523900303
 67 |             ],
 68 |             [
 69 |               114.45307942925189,
 70 |               30.624907272879312
 71 |             ],
 72 |             [
 73 |               114.4288130916147,
 74 |               30.622168652698548
 75 |             ],
 76 |             [
 77 |               114.41379951994367,
 78 |               30.6195846480625
 79 |             ],
 80 |             [
 81 |               114.38794195122841,
 82 |               30.608629101366674
 83 |             ],
 84 |             [
 85 |               114.3696757009294,
 86 |               30.57943525080438
 87 |             ],
 88 |             [
 89 |               114.41528335032035,
 90 |               30.543669137007882
 91 |             ],
 92 |             [
 93 |               114.44153872673763,
 94 |               30.53852985669873
 95 |             ],
 96 |             [
 97 |               114.4773415169152,
 98 |               30.54366913640706
 99 |             ],
100 |             [
101 |               114.4837064566533,
102 |               30.560113005443625
103 |             ],
104 |             [
105 |               114.47376123831367,
106 |               30.58922552097347
107 |             ],
108 |             [
109 |               114.46819191604362,
110 |               30.606004058021256
111 |             ],
112 |             [
113 |               114.46780928809392,
114 |               30.60501608234722
115 |             ],
116 |             [
117 |               114.46779835239658,
118 |               30.605050523900303
119 |             ]
120 |           ]
121 |         ],
122 |         "type": "Polygon"
123 |       }
124 |     },
125 |     {
126 |       "type": "Feature",
127 |       "properties": {},
128 |       "geometry": {
129 |         "coordinates": [
130 |           [
131 |             [
132 |               114.4607075938116,
133 |               30.466500864153844
134 |             ],
135 |             [
136 |               114.37963045409833,
137 |               30.478344631182154
138 |             ],
139 |             [
140 |               114.31710486256651,
141 |               30.46353969699203
142 |             ],
143 |             [
144 |               114.38621826607522,
145 |               30.372908950433754
146 |             ],
147 |             [
148 |               114.47966309031347,
149 |               30.370537758256432
150 |             ],
151 |             [
152 |               114.46236452860569,
153 |               30.44663194215289
154 |             ],
155 |             [
156 |               114.46080027152675,
157 |               30.46637744345206
158 |             ],
159 |             [
160 |               114.46065225645935,
161 |               30.46637744345206
162 |             ],
163 |             [
164 |               114.4607075938116,
165 |               30.466500864153844
166 |             ]
167 |           ]
168 |         ],
169 |         "type": "Polygon"
170 |       }
171 |     }
172 |   ]
173 | }
174 | 
175 | const images = {
176 |   zhuren: 'https://pic.zhangshichun.top/pic/20221129-12.png',
177 |   bao: 'https://pic.zhangshichun.top/pic/20221129-10.png',
178 |   nan: 'https://pic.zhangshichun.top/pic/20221129-11.png'
179 | }
180 | 
181 | const boys = {
182 |   "type": "FeatureCollection",
183 |   "features": [
184 |     {
185 |       "type": "Feature",
186 |       "properties": {
187 |         "name": "德育处主任",
188 |         "icon": "zhuren"
189 |       },
190 |       "geometry": {
191 |         "coordinates": [
192 |           114.34495622042738,
193 |           30.51879704948628
194 |         ],
195 |         "type": "Point"
196 |       }
197 |     },
198 |     {
199 |       "type": "Feature",
200 |       "properties": {
201 |         "name": "战场小包",
202 |         "icon": "bao"
203 |       },
204 |       "geometry": {
205 |         "coordinates": [
206 |           114.46248908403493,
207 |           30.52385942598788
208 |         ],
209 |         "type": "Point"
210 |       }
211 |     },
212 |     {
213 |       "type": "Feature",
214 |       "properties": {
215 |         "name": "南方者",
216 |         "icon": "nan"
217 |       },
218 |       "geometry": {
219 |         "coordinates": [
220 |           114.4188340204089,
221 |           30.481906063384173
222 |         ],
223 |         "type": "Point"
224 |       }
225 |     }
226 |   ]
227 | }
228 | 
229 | onMounted(() => {
230 |   const map = new maplibregl.Map({
231 |     container: mapEl.value,
232 |     ...initOption,
233 |   });
234 | 
235 |   const loadImages = async (imgs) => {
236 |     await Promise.all(
237 |       Object.entries(imgs).map(
238 |         ([key, url]) =>
239 |           new Promise((resolve) => {
240 |             map.loadImage(url, (error, res) => {
241 |               if (error) throw error;
242 |               map.addImage(key, res);
243 |               resolve(res);
244 |             });
245 |           }),
246 |       ),
247 |     );
248 |   };
249 |   map.on('style.load', async () => {
250 |     map.addSource('geojson-area-source', {
251 |       type: 'geojson',
252 |       data: geojsonArea
253 |     })
254 | 
255 |     map.addLayer({
256 |       id: 'geojson-area-layer',
257 |       type: 'fill',
258 |       source: 'geojson-area-source',
259 |       layout: {},
260 |       paint: {
261 |         'fill-color': 'red',
262 |         'fill-opacity': 0.5,
263 |       },
264 |     })
265 |     // 加载图片
266 |     await loadImages(images)
267 |     // 添加位置资源
268 |     map.addSource('boys-source', {
269 |       type: 'geojson',
270 |       data: boys
271 |     })
272 |     // 添加ICON图层
273 |     map.addLayer({
274 |       id: 'boys-icon-layer',
275 |       type: 'symbol',
276 |       source: 'boys-source',
277 |       layout: {
278 |         'icon-image': '{icon}',
279 |         'icon-size': 0.2,
280 |         'icon-anchor': 'center',
281 |         'icon-rotation-alignment': 'viewport',
282 |         'icon-allow-overlap': true
283 |       }
284 |     })
285 |     // 添加名字图层
286 |     map.addLayer({
287 |       id: 'boys-name-layer',
288 |       "type": "symbol",
289 |       source: 'boys-source',
290 |       "layout": {
291 |         "text-field": '{name}',
292 |         "text-size": 14,
293 |         'text-offset': [0, 2.4], // 名字要设置便宜，避免被头像挡住
294 |         'text-allow-overlap': true
295 |       },
296 |       "paint": {
297 |         "text-color": "white",
298 |       },
299 |     })
300 |   })
301 | })
302 | </script>
303 | <style lang="scss" scoped>
304 | .map {
305 |   width: 600px;
306 |   height: 300px;
307 | }
308 | </style>


--------------------------------------------------------------------------------