ww-ui-vue

Vue 3 + TypeScript + Vite

快速开始

完整引入

// main.ts

import { createApp } from 'vue'
import App from './App.vue'
import wwUi from "ww-ui-vue";
import "ww-ui-vue/lib/style.css"

createApp(App).use(wwUi).mount('#app')

按需导入

自动导入^推荐^

• 首先你需要安装unplugin-vue-components这款插件

npm install -D unplugin-vue-components

• 然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { WwUiResolver } from 'ww-ui-vue/resolver'

export default defineConfig({
    // ...
    plugins: [
        Components({
            resolvers: [WwUiResolver()],
        }),
    ],
})

Webpack

const Components = require('unplugin-vue-components/webpack')
import { WwUiResolver } from 'ww-ui-vue/resolver'

module.exports = {
  // ...
  plugins: [
    Components({
      resolvers: [WwUiResolver()],
    }),
  ],
}

手动导入

App.vue

<template>
  <media-device-selector />
</template>
<script>
  import { MediaDeviceSelector } from 'ww-ui-vue'
  export default {
    components: { MediaDeviceSelector },
  }
</script>

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import "ww-ui-vue/lib/style.css"

createApp(App).mount('#app')

自定义组件

MediaDeviceSelector

电脑摄像头和麦克风设备选择组件,需要https

属性

属性名	说明	类型	默认值
camera	摄像头id v-model双向绑定	string|undefined	undefined
mic	麦克风id v-model双向绑定	string|undefined	undefined

事件

事件名	说明	类型
change	选中值发生变化时触发	() => void

AudioWave

音频画声纹图组件

属性

属性名	说明	类型	默认值
fftSize	样本数量 ，必须是从 32 到 32768 范围内的 2 的非零幂	number	512

方法

方法	说明	类型
start	开始播放(audio/video标签)	(mediaElement: HTMLMediaElement, muted:boolean = true) => void
streamStart	开始播放(MediaStream)	(stream: MediaStream, muted: boolean = true) => void
stop	停止播放	async () => void

MapBase

地图底图组件

属性

属性名	说明	类型	默认值
baseUrl	发起http请求的基础url http://ip:port	string|undefined
token	发起http请求token	string

事件

事件名	说明	类型
onMapInitialized	地图初始化完成	(mapNode: MapNode) => void

方法

方法	说明	类型
changeMapType	修改地图底图类型	(mapType: string) => string
getMapLayerTypeList	获取地图底图类型列表	() => MapLayerType[]
setMapDefaultCenter	设置当前中心点和缩放级别为默认	() => void
getCurrentLayerType	获取当前显示的底图类型	()=>string

MapLayerGroups

地图图层多组组件

属性

属性名	说明	类型	默认值
mapNode	底图初始化完成后的节点	MapNode
mqtt	动态点位主题订阅的mqtt	Mqtt|undefined	undefined

方法

方法	说明	类型
selectByCircle	获取在圈选圈内的数据	(feature?: Feature) => LayerGroup[]

MapLayerGroup

地图图层单组组件

属性

属性名	说明	类型	默认值
mapNode	底图初始化完成后的节点	MapNode
mqtt	动态点位主题订阅的mqtt	Mqtt|undefined	undefined
layerGroup	图层组数据	LayerGroup

方法

方法	说明	类型
selectByCircle	获取在圈选圈内的数据	(feature?: Feature) => LayerGroup

MapModelLayer

地图图层组件

属性

属性名	说明	类型	默认值
mapNode	底图初始化完成后的节点	MapNode
mqtt	动态点位主题订阅的mqtt	Mqtt|undefined	undefined
layerInfo	图层数据	LayerInfo

方法

方法	说明	类型
selectByCircle	获取在圈选圈内的数据	(feature?: Feature) => LayerInfo
setVisible	设置图层是否显示	(visible: boolean) => void

MapPopup

地图鼠标移上显示名称(通过标签实现显示名称,可通过插槽自定义)、点击弹窗组件

属性

属性名	说明	类型	默认值
mapNode	底图初始化完成后的节点	MapNode

事件

事件名	说明	类型
onClose	关闭弹窗	() => void
onOpen	打开弹窗	() => void
onAudioCall	语音呼叫	(called: string) => void
onVideoCall	视频呼叫	(called: string) => void
onQueryTrack	轨迹查询	(code: string) => void

方法

方法	说明	类型
closePopup	关闭弹窗	() => void

插槽

插槽名	说明	类型
default	自定义弹窗内容	{title:string,data:LayerPointDetails,model:string}
title	自定义鼠标移上去显示内容	title:string

MapPopupWithTitle

地图鼠标移上显示名称(通过地图样式实现显示名称)、点击弹窗组件

属性

属性名	说明	类型	默认值
mapNode	底图初始化完成后的节点	MapNode

事件

事件名	说明	类型
onClose	关闭弹窗	() => void
onOpen	打开弹窗	() => void
onAudioCall	语音呼叫	(called: string) => void
onVideoCall	视频呼叫	(called: string) => void
onQueryTrack	轨迹查询	(code: string) => void

方法

方法	说明	类型
closePopup	关闭弹窗	() => void

插槽

插槽名	说明	类型
default	自定义弹窗内容	{title:string,data:LayerPointDetails,model:string}

MapPopupCommon

地图弹窗内容通用组件

属性

属性名	说明	类型	默认值
mapNode	底图初始化完成后的节点	MapNode
popupTitle	显示标题	string
popupData	显示字段列表	LayerPointDetails[]

事件

事件名	说明	类型
onClose	关闭弹窗	() => void
onAudioCall	语音呼叫	(called: string) => void
onVideoCall	视频呼叫	(called: string) => void

方法

方法	说明	类型
close	关闭	() => void

插槽

插槽名	说明	类型
content	自定义弹窗里的内容

MapDraw

地图画图组件(点、线、多边形绘制/修改/删除)

属性

属性名	说明	类型	默认值
mapNode	底图初始化完成后的节点	MapNode

方法

方法	说明	类型
startDraw	画图	(type: import("ol/geom/Geometry").Type) => Promise
startModify	修改	(modifyEnd?: (feature: Feature) => void) => void
startDelete	删除	() => Promise
done	取消/完成	() => void

MapDrawMeasure

地图计算组件(距离,面积)

属性

属性名	说明	类型	默认值
mapNode	底图初始化完成后的节点	MapNode

方法

方法	说明	类型
startMeasure	开始计算	(measureType: MeasureType) => void
done	取消/完成	() => void

MapDrawTrack

地图画轨迹组件

属性

属性名	说明	类型	默认值
mapNode	底图初始化完成后的节点	MapNode

方法

方法	说明	类型
drawTracePoint	通过点对象画轨迹	(trackPoints: GisPoint[]) => void
drawTraceCoordinate	通过坐标数组画轨迹	(coordinates: number[][]) => void
clear	清空	() => void

MapDrawingTool

地图标注工具组件(图层设置点、线、多边形经纬度时使用)

属性

属性名	说明	类型	默认值
baseUrl	发起http请求的基础url http://ip:port	string|undefined
token	发起http请求token	string
type	画图类型	'Point' | 'LineString' | 'Polygon' | 'Circle'	Point
coordinates	坐标数组 点是1维数组,线是2维数组,多边形是3维数组 v-model双向绑定	number[]|number[][]|number[][][]|undefined
radius	圆半径 v-model双向绑定	number|undefined

工具

• Mqtt 对mqtt的封装
• HttpRequest 对axios的封装
• MapDrawing 对地图画图的封装,MapDraw组件在此基础上封装成组件