runbir-tools 1.0.15 → 1.0.17

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>
-```
+```