runbir-tools 1.0.14 → 1.0.16

package/README.md

@@ -1,14 +1,21 @@
-
 # 软博工具包
+
 这是一个基于vue3开发的工具包，目前包依赖ol和@turf/turf。
+
 #### 安装包
+
 ```
 npm install runbir-tools
 ```
+
 ## 基于ol的快速开发组件
+
 主要是基于vue3，对ol的基本功能做双向绑定，以及提供气象相关的一些工具。
+
 ### 快速开始
+
 基于天地图，创建简单的GIS。
+
 ```typescript
 <script setup>
 import { VueOl } from "runbir-tools";
@@ -49,18 +56,26 @@ const options = ref({
 }
 </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配置
+
+##### 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";
@@ -71,6 +86,7 @@ const options = ref({
     {
       id: "radar",
       type: "xyz",
+      useInterimTilesWhenMissing: true, // 当为true时，错误瓦片用空白图代替
       source: {
         url: "https://xxxx/data/radar_cut/20250703093600/{z}/{x}/{y}.png",
         projection: "EPSG:4326",
@@ -80,19 +96,26 @@ const options = ref({
 });
 </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";
@@ -113,10 +136,14 @@ const options = ref({
 });
 </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";
@@ -160,37 +187,47 @@ const options = ref({
 });
 </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)
+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: {....... },
@@ -203,9 +240,11 @@ const options = ref<any>({
     },
   })
 ```
+
 #### 4. 以上功能不满足的情况下，可以获取地图对象，进行自定义操作
 
 目前该组件只封装了一些常见的功能，在功能不满足使用的情况下，请获取地图对象，用原生ol编写代码；获取地图对象方法如下：
+
 ```typescript
 <script setup lang="ts">
   const getMapObject = (map: any) => {
@@ -215,4 +254,4 @@ const options = ref<any>({
 <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-fe2ef848]{width:100%;height:100%}@keyframes rotate-fe2ef848{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-92595ad3]{width:100%;height:100%}@keyframes rotate-92595ad3{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);
@@ -24189,7 +24189,7 @@ class Overlay extends BaseObject {
 const _hoisted_1 = {
   id: "map",
   class: "map"
-}, _sfc_main = /* @__PURE__ */ defineComponent({
+}, transparentTile = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "VueOl",
   props: {
     options: {}
@@ -24249,8 +24249,8 @@ const _hoisted_1 = {
         "properties",
         "renderReprojectionEdges",
         "tileGridForProjection",
-        "tileUrlFunction"
-        // 'url',  当url资源为空时，页面不会显示为空
+        "tileUrlFunction",
+        "url"
       ]);
     }, updateImageStaticLayer = (s, e, t) => {
       updated(s, e, t, [
@@ -24337,7 +24337,7 @@ const _hoisted_1 = {
       for (const key in info)
         if (key === "source") {
           const keys = Object.keys(info.source), flag = keys.every((s) => sourceEffectiveFields.includes(s));
-          if (console.log(flag), flag)
+          if (flag)
             for (const k in info.source)
               eval(`layer.getSource().set${capitalize(k)}(info.source[k])`);
           else {
@@ -24432,8 +24432,17 @@ const _hoisted_1 = {
       return delete i.data, new LayerGroup({ ...i, layers: t });
     }, getSource = (s) => {
       switch (s.type) {
-        case "xyz":
-          return new XYZ({ ...s.source });
+        case "xyz": {
+          const e = { ...s.source };
+          return s.useInterimTilesWhenMissing && (e.transition = 0, e.tileLoadFunction = (t, i) => {
+            const n = t.getImage(), r = document.createElement("img");
+            e.crossOrigin !== void 0 && (r.crossOrigin = e.crossOrigin), r.onload = () => {
+              n.src = i;
+            }, r.onerror = () => {
+              n.src = transparentTile;
+            }, r.src = i;
+          }), new XYZ(e);
+        }
         case "imageStatic":
           return new Static({ ...s.source });
         case "point":
@@ -24652,7 +24661,7 @@ const _hoisted_1 = {
   for (const [i, n] of e)
     t[i] = n;
   return t;
-}, VueOl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fe2ef848"]]), plugin = {
+}, VueOl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-92595ad3"]]), plugin = {
   install(s) {
     s.component("VueOl", VueOl);
   }