软博工具包

这是一个基于vue3开发的工具包，目前包依赖ol和@turf/turf。

安装包

npm install runbir-tools

基于ol的快速开发组件

主要是基于vue3，对ol的基本功能做双向绑定，以及提供气象相关的一些工具。

快速开始

基于天地图，创建简单的GIS。

<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一致，由于基于vue做了双向绑定，故直接更改属性值即可刷新，免去ol原来的繁琐重渲染操作。 例如，更改视图中心点

options.value.view.center = [newlng,newlat]

2. options.value.layers 图层配置

图层配置目前仅支持以下图层

2.1 xyz配置

xyz的options同ol/layer/Tile和ol/source/xyz一致,必须配置type:"xyz"以及id（自定义命名），id是图层的唯一标记，示例如下：

<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和 ol/source/ImageStatic一致,必须配置type:"imageStatic"以及id（自定义命名），id是图层的唯一标记，示例如下：

<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和 ol/source/Vector一致（仅支持ol/geom/Point，style样式除了ol内置style，还额外提供一个小组件风向杆）,必须配置type:"point以及id（自定义命名），id是图层的唯一标记；示例如下：

<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数据格式只可以参考以下链接；示例如下：

    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的事件，建议使用以下配置；由于包内部也应用了事件监听，为了节约系统开支，使用以下配置统一调度

const options = ref<any>({
    view: {....... },
    layers: [.....],
    event: {
      register: ['singleclick'],
      callback: (event: any) => {
        console.log(event)
      },
    },
  })

4. 以上功能不满足的情况下，可以获取地图对象，进行自定义操作

目前该组件只封装了一些常见的功能，在功能不满足使用的情况下，请获取地图对象，用原生ol编写代码；获取地图对象方法如下：

<script setup lang="ts">
  const getMapObject = (map: any) => {
    console.log(map)
  }
</script>
<template>
 <vue-ol :options="mapOptions" @ol-map="getMapObject" />
</template>