runbir-tools 1.0.5 → 1.0.7

package/README.md

@@ -1,217 +1,218 @@
-# Vue 3 + TypeScript + Vite 项目
-
-这是一个基于现代前端技术栈的项目，使用以下技术构建：
-
-## 技术栈
-
-- ⚡️ [Vite](https://vitejs.dev/) - 下一代前端工具链
-- 🖖 [Vue 3](https://vuejs.org/) - 渐进式 JavaScript 框架
-- 🦾 [TypeScript](https://www.typescriptlang.org/) - 类型安全的 JavaScript 超集
-- 📦 [PNPM](https://pnpm.io/) - 快速、节省磁盘空间的包管理器
-- 💅 [Sass](https://sass-lang.com/) - 专业级的 CSS 扩展语言
-- 📅 [Day.js](https://day.js.org/) - 轻量级日期处理库
-- 📊 [Vue-ECharts](https://github.com/ecomfe/vue-echarts) - ECharts 图表组件
-- 🎨 [Element Plus](https://element-plus.org/) - Vue 3 组件库
-- � [ESLint](https://eslint.org/) - 可插拔的 JavaScript 代码检查工具
-- 🐶 [Husky](https://typicode.github.io/husky/) - Git 钩子工具
-- 🚫 [lint-staged](https://github.com/okonet/lint-staged) - 对暂存的 Git 文件运行 linter
-
-## 项目结构
-
-```bash
-├── .husky/                      # Git钩子配置
-│   ├── pre-commit               # 提交前执行的脚本
-│   └── commit-msg               # commit信息校验
-├── .vscode/                     # VSCode配置
-│   ├── settings.json            # 编辑器设置
-│   └── extensions.json          # 推荐插件
-├── public/                      # 静态资源目录
-│   └── vue.svg                  # 网站图标
-├── src/                         # 源代码目录
-│   ├── assets/                  # 静态资源
-│   │   ├── fonts/               # 字体文件
-│   │   ├── images/              # 图片资源
-│   │   └── styles/              # 样式文件
-│   │       ├── _mixins.scss     # SCSS混入
-│   │       └── _variables.scss  # SCSS变量
-│   ├── components/              # 公共组件
-│   ├── composables/             # 组合式函数
-│   ├── router/                  # 路由配置
-│   │   └── index.ts             # 路由入口
-│   ├── services/                # API服务
-│   │   └── api-client.ts        # 请求封装
-│   ├── stores/                  # 状态管理
-│   │   ├── index.ts             # Store入口
-│   │   └── modules/             # Store模块
-│   ├── types/                   # 类型定义
-│   ├── utils/                   # 工具函数
-│   ├── view/                    # 页面组件
-│   ├── App.vue                  # 根组件
-│   ├── main.ts                  # 应用入口
-│   ├── style.css                # 全局样式
-│   └── vite-env.d.ts            # 环境变量类型
-├── .env                         # 基础环境变量
-├── .env.development             # 开发环境变量
-├── .env.production              # 生产环境变量
-├── .gitignore                   # Git忽略规则
-├── .prettierrc.cjs              # Prettier配置
-├── auto-imports.d.ts            # 自动导入声明
-├── components.d.ts              # 组件类型声明
-├── eslint.config.js             # ESLint配置
-├── index.html                   # HTML入口
-├── package.json                 # 项目配置
-├── pnpm-lock.yaml               # 依赖锁文件
-├── README.md                    # 项目说明
-├── tsconfig.app.json            # 应用TS配置
-├── tsconfig.json                # 基础TS配置
-├── tsconfig.node.json           # Node环境TS配置
-└── vite.config.ts               # Vite配置
 
+# 软博工具包
+这是一个基于vue3开发的工具包，目前包依赖ol和@turf/turf。
+#### 安装包
 ```
-
-## 快速开始
-
-### 安装依赖
-
-```bash
-pnpm install
+npm install runbir-tools
 ```
-
-### 开发模式
-
-```bash
-pnpm dev
+## 基于ol的快速开发组件
+主要是基于vue3，对ol的基本功能做双向绑定，以及提供气象相关的一些工具。
+### 快速开始
+基于天地图，创建简单的GIS。
+```typescript
+<script setup>
+import { VueOl } from "runbir-tools";
+import { ref } from "vue";
+const options = ref({
+  view: {
+    center: [113.41, 23.32],
+    zoom: 7,
+    projection: "EPSG:4326",
+  },
+  layers: [
+    {
+      id: "vec",
+      type: "xyz",
+      source: {
+        url: "https://t{0-7}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=48fb1019fa26991b5831d6a97db2fc16",
+        projection: "EPSG:4326",
+      },
+    },
+    {
+      id: "cva",
+      type: "xyz",
+      source: {
+        url: "https://t{0-7}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=48fb1019fa26991b5831d6a97db2fc16",
+        projection: "EPSG:4326",
+      },
+    },
+  ],
+});
+</script>
+<template>
+  <div class="demo"><vue-ol :options="options"></vue-ol></div>
+</template>
+<style>
+.demo {
+  width: 100%;
+  height: 100%;
+}
+</style>
 ```
-
-### 生产构建
-
-```bash
-pnpm build
+### options配置
+#### 1. options.value.view 视图配置
+视图的options同[ol/view](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html)一致，由于基于vue做了双向绑定，故直接更改属性值即可刷新，免去ol原来的繁琐重渲染操作。
+例如，更改视图中心点
 ```
-
-### 预览生产构建
-
-```bash
-pnpm preview
+options.value.view.center = [newlng,newlat]
 ```
 
-### 代码检查
-
-```bash
-pnpm lint
+#### 2. options.value.layers 图层配置
+图层配置目前仅支持以下图层
+##### 2.1  xyz配置
+xyz的options同[ol/layer/Tile](https://openlayers.org/en/latest/apidoc/module-ol_layer_Tile-TileLayer.html)和[ol/source/xyz](https://openlayers.org/en/latest/apidoc/module-ol_source_XYZ-XYZ.html)一致,必须配置type:"xyz"以及id（自定义命名），id是图层的唯一标记，示例如下：
+```typescript
+<script setup>
+import { VueOl } from "runbir-tools";
+import { ref } from "vue";
+const options = ref({
+  view: {.....},
+  layers: [
+    {
+      id: "radar",
+      type: "xyz",
+      source: {
+        url: "https://xxxx/data/radar_cut/20250703093600/{z}/{x}/{y}.png",
+        projection: "EPSG:4326",
+      },
+    },
+  ],
+});
+</script>
 ```
-
-### 格式化代码
-
-```bash
-pnpm format
+更改图层配置项值，同样能够直接渲染到地图
 ```
-
-### 初始化 Git 钩子
-
-```bash
-pnpm prepare
+    const radar = options.value.layers.find((l: any) => l.id === 'radar')
+    radar.source.url = "新的url"
 ```
-
-### 运行测试（开发模式）
-
-```bash
-pnpm test
-```
-
-### 运行测试（CI 模式）
-
-```bash
-pnpm test:run
+删除图片则直接在layers删除即可
 ```
-
-### 生成覆盖率报告
-
-```bash
-pnpm coverage
+const index = options.value.layers.findIndex((l: any) => l.id === 'radar')
+options.value.layers.splice(index, 1)
 ```
-
-## 主要依赖说明
-
-### Element Plus 使用
-
-项目已集成 Element Plus 组件库，自动按需导入配置已完成。使用方式：
-
+##### 2.2 imageStatic 静态图片配置
+imageStatic的options同[ol/layer/image](https://openlayers.org/en/latest/apidoc/module-ol_layer_Image-ImageLayer.html)和
+[ol/source/ImageStatic](https://openlayers.org/en/latest/apidoc/module-ol_source_ImageStatic-Static.html)一致,必须配置type:"imageStatic"以及id（自定义命名），id是图层的唯一标记，示例如下：
 ```typescript
-// 在组件中直接使用
-<el-button type="primary">按钮</el-button>
-```
-
-### Vue-ECharts 使用
-
-项目已集成 Vue-ECharts 图表库，采用全局按需注册的方式，使用方式：
-
-```typescript
-// 在main.ts 中注册
-import { BarChart, LineChart, PieChart } from 'echarts/charts'
-
-use([
-  CanvasRenderer,
-  BarChart,
-  LineChart,
-  PieChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  TitleComponent,
-])
+<script setup>
+import { VueOl } from "runbir-tools";
+import { ref } from "vue";
+const options = ref({
+  view: {.....},
+  layers: [
+      {
+        id: 'satellite',
+        type: 'imageStatic',
+        opacity: 0.2,
+        source: {
+          imageExtent: [54.3, -5, 159.6, 66],
+          url: 'https://xxxx/data/cloud/3D/20250704/FY2G_2025_07_04_02_01_M_PJ1_3D.GIF',
+        },
+      },
+  ],
+});
+</script>
 ```
-
+更新和删除同上
+##### 2.3 point 散点配置
+point的options同[ol/layer/Vector](https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html)和
+[ol/source/Vector](https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html)一致（仅支持ol/geom/Point，style样式除了ol内置style，还额外提供一个小组件风向杆）,必须配置type:"point以及id（自定义命名），id是图层的唯一标记；示例如下：
 ```typescript
-// 在组件中使用
-<template>
-  <v-chart class="chart" :option="option" />
-</template>
-
 <script setup>
-  import type { EChartsOption } from 'echarts'
-
-  const options = ref<EChartsOption>({
-    //  配置项
-  })
+import { VueOl } from "runbir-tools";
+import { ref } from "vue";
+const options = ref({
+  view: {.....},
+  layers: [
+      {
+        id: 'point',
+        type: 'point',
+        data: [
+          {
+            lng: 113.5,
+            lat: 23.5,
+            style: {
+              image: {
+                type: 'circle',
+                radius: 10,
+                fill: { color: 'blue' },
+                stroke: { color: 'white', width: 2 },
+              },
+            },
+          },
+          { lng: 113.6, lat: 23.6, value: 22 },
+          {
+            lng: 113.4,
+            lat: 23.6,
+            winds: 14,
+            windd: 342,
+            style: { image: { type: 'windBarb' } },
+          },
+          {
+            lng: 113.5,
+            lat: 25.5,
+            text: '22mm',
+            style: { text: { font: '14px sans-serif' } },
+          },
+        ],
+      },
+  ],
+});
 </script>
 ```
-
-### Day.js 使用
-
-项目已集成 Day.js 日期处理库，推荐使用方式：
-
+更新删除同上
+##### 2.3 typhoon 台风配置
+台风配置必须配置type:"typhoon以及id（自定义命名），id是图层的唯一标记，data数据格式只可以参考以下链接；示例如下：
 ```typescript
-import dayjs from 'dayjs'
-
-// 格式化日期
-const formattedDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
+    const typhoon = {
+        "tsId": "764",
+        "tscName": "罗莎",
+        "tseName": "krosa",
+        "intlId": "2509",
+        "intId": "",
+        "landOn": "",
+        "origin": "",
+        "meanings": "",
+        "remark": "",
+        "crtTime": "2025-08-03 15:54:22.0"
+    }
+    const typhoonPath = (await getTyphoonPath('https://www.gzqxfw.com.cn/data/typhoon/2025/764.json')) as any
+    const data: any = { baseInfo: typhoon }
+    data.mainPath = 'BABJ'    // 如果配置这项，则为单个台风单条路径（多用于面向公众系统）；如果没有配置，则是单个台风多条路径（多用于内部系统）
+    typhoonPath.BABJ.color = '#ff0000'
+    typhoonPath.BCGZ.color = '#ff00ff'
+    typhoonPath.PGTW.color = '#91f4f5'
+    typhoonPath.RJTD.color = '#6eba39'
+    typhoonPath.VHHH.color = '#e39538'
+    data.data = typhoonPath
+    const ty = { id: 'typhoon', type: 'typhoon', data }
+    options.value.layers.push(ty)
 ```
+台风不提供更新、修改路径的功能（业务上很少有这种操作）；删除同上
+#### 3. options.value.event 事件配置
+关于ol的事件，建议使用以下配置；由于包内部也应用了事件监听，为了节约系统开支，使用以下配置统一调度
+```typescript
+const options = ref<any>({
+    view: {....... },
+    layers: [.....],
+    event: {
+      register: ['singleclick'],
+      callback: (event: any) => {
+        console.log(event)
+      },
+    },
+  })
+```
+#### 4. 以上功能不满足的情况下，可以获取地图对象，进行自定义操作
 
-## Git 提交规范
-
-项目使用 [Conventional Commits](https://www.conventionalcommits.org/) 规范，提交前会自动运行 lint-staged 进行检查。
-
-## 编辑器配置
-
-推荐使用 [VSCode](https://code.visualstudio.com/) 并安装以下插件：
-
-- [Vue - Official](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 官方支持
-- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 代码检查
-- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化
-- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - CSS/SCSS 检查
-- [Element Plus Snippets](https://marketplace.visualstudio.com/items?itemName=ElementPlus.element-plus-snippets) - Element Plus 代码片段
-
-## 代码规范
-
-- 组件使用 `PascalCase` 命名
-- 组合式函数使用 `camelCase` 命名并以 `use` 开头
-- 类型定义使用 `PascalCase` 命名并以 `Type` 结尾
-- 接口定义使用 `PascalCase` 命名并以 `Interface` 结尾
-- 枚举使用 `PascalCase` 命名
-- Element Plus 组件保持原标签名 (如 `<el-button>`)
-- ECharts 相关变量以 `chart` 为前缀
-
-## 浏览器支持
-
-项目默认支持现代浏览器，如需兼容旧版浏览器，请自行配置 `@vitejs/plugin-legacy`。
+目前该组件只封装了一些常见的功能，在功能不满足使用的情况下，请获取地图对象，用原生ol编写代码；获取地图对象方法如下：
+```typescript
+<script setup lang="ts">
+  const getMapObject = (map: any) => {
+    console.log(map)
+  }
+</script>
+<template>
+ <vue-ol :options="mapOptions" @ol-map="getMapObject" />
+</template>
+```

package/dist/runbir-tools.es.js

@@ -1,4 +1,4 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".map[data-v-f90a5acf]{width:100%;height:100%}@keyframes rotate-f90a5acf{0%{transform:rotate(0)}to{transform:rotate(360deg)}}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".map[data-v-0a4735ce]{width:100%;height:100%}@keyframes rotate-0a4735ce{0%{transform:rotate(0)}to{transform:rotate(360deg)}}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
 var ze = Object.defineProperty;
 var Ve = (s, e, t) => e in s ? ze(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
 var se = (s, e, t) => Ve(s, typeof e != "symbol" ? e + "" : e, t);
@@ -24528,7 +24528,7 @@ const _hoisted_1 = {
       props.options.event && props.options.event.register.forEach((e) => {
         s.add(e);
       }), s.add("pointermove"), map.on([...s], (e) => {
-        switch (props.options.event.register.includes(e.type) && props.options.event.callback(e), e.type) {
+        switch (props.options.event && props.options.event.register.includes(e.type) && props.options.event.callback(e), e.type) {
           case "pointermove":
             handlePointermove(e);
             break;
@@ -24618,7 +24618,7 @@ const _hoisted_1 = {
   for (const [i, n] of e)
     t[i] = n;
   return t;
-}, VueOl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f90a5acf"]]), plugin = {
+}, VueOl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0a4735ce"]]), plugin = {
   install(s) {
     s.component("VueOl", VueOl);
   }