runbir-tools 1.0.6 → 1.0.8

package/README.md

@@ -1,9 +1,218 @@
-# 软博工具包
-
-这是一个基于vue3开发的工具包
 
+# 软博工具包
+这是一个基于vue3开发的工具包，目前包依赖ol和@turf/turf。
+#### 安装包
+```
+npm install runbir-tools
+```
 ## 基于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>
+```
+### options配置
+#### 1. options.value.view 视图配置
+视图的options同[ol/view](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html)一致，由于基于vue做了双向绑定，故直接更改属性值即可刷新，免去ol原来的繁琐重渲染操作。
+例如，更改视图中心点
+```
+options.value.view.center = [newlng,newlat]
+```
 
+#### 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>
+```
+更改图层配置项值，同样能够直接渲染到地图
+```
+    const radar = options.value.layers.find((l: any) => l.id === 'radar')
+    radar.source.url = "新的url"
 ```
+删除图片则直接在layers删除即可
+```
+const index = options.value.layers.findIndex((l: any) => l.id === 'radar')
+options.value.layers.splice(index, 1)
+```
+##### 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
+<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
+<script setup>
+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>
+```
+更新删除同上
+##### 2.3 typhoon 台风配置
+台风配置必须配置type:"typhoon以及id（自定义命名），id是图层的唯一标记，data数据格式只可以参考以下链接；示例如下：
+```typescript
+    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. 以上功能不满足的情况下，可以获取地图对象，进行自定义操作
+
+目前该组件只封装了一些常见的功能，在功能不满足使用的情况下，请获取地图对象，用原生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-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)}})();
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".map[data-v-d0235b39]{width:100%;height:100%}@keyframes rotate-d0235b39{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);
@@ -24375,8 +24375,12 @@ const _hoisted_1 = {
       const t = new VectorLayer({
         ...e,
         source: getPointSource(s)
-      }), i = typeof s.style == "function" ? s.style : getStyle(s.style);
-      return t.setStyle(i), t;
+      });
+      if (s.style) {
+        const i = typeof s.style == "function" ? s.style : getStyle(s.style);
+        t.setStyle(i);
+      }
+      return t;
     }, getTypeoonLayer = (s) => {
       const e = [], t = [];
       if (s.data.mainPath) {
@@ -24618,7 +24622,7 @@ const _hoisted_1 = {
   for (const [i, n] of e)
     t[i] = n;
   return t;
-}, VueOl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0a4735ce"]]), plugin = {
+}, VueOl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d0235b39"]]), plugin = {
   install(s) {
     s.component("VueOl", VueOl);
   }