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').default
const { WwUiResolver } = require('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[] | | findFeature | 获取Feature对象 | (id:string, model:string): Feature|undefined | | addFeature | 添加点位 | (layerData:LayerData, model:string): boolean |

MapLayerGroup

地图图层单组组件

属性

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

方法

| 方法 | 说明 | 类型 | |----------------|-------------|-----------------------------------------------| | selectByCircle | 获取在圈选圈内的数据 | (feature?: Feature) => LayerGroup | | findFeature | 获取Feature对象 | (id:string, model:string): Feature|undefined | | addFeature | 添加点位 | (layerData:LayerData, model:string): boolean |

MapModelLayer

地图图层组件

属性

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

方法

| 方法 | 说明 | 类型 | |----------------|-------------|-----------------------------------------------| | selectByCircle | 获取在圈选圈内的数据 | (feature?: Feature) => LayerInfo | | setVisible | 设置图层是否显示 | (visible: boolean) => void | | findFeature | 获取Feature对象 | (id:string, model:string): Feature|undefined | | addFeature | 添加点位 | (layerData:LayerData, model:string): boolean |

插槽

| 插槽名 | 说明 | 类型 | |---------|---------|----| | default | 自定义菜单内容 | |

MapPopup

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

属性

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

事件

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

方法

| 方法 | 说明 | 类型 | |------------|------|---------------------------------------------------------------------| | closePopup | 关闭弹窗 | () => void | | openPopup | 打开弹窗 | (feature: Feature, zoom:number = 15, duration:number = 500) => void |

插槽

| 插槽名 | 说明 | 类型 | | ------- | ------------------------ |--------------------------------------------------------------| | default | 自定义弹窗内容 | {title:string,data:LayerPointDetails,model:string,id: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 | | openPopup | 打开弹窗 | (feature: Feature, zoom:number = 15, duration:number = 500) => void |

插槽

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

MapPopupCommon

地图弹窗内容通用组件

属性

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

事件

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

方法

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

插槽

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

MapDraw

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

属性

| 属性名 | 说明 | 类型 | 默认值 | |---------|-------------|---------|-----| | mapNode | 底图初始化完成后的节点 | MapNode | | | style | 画图样式 | Style | |

方法

| 方法 | 说明 | 类型 | |-------------|--------------|----------------------------------------------------------------------------------------------------------------------------------| | startDraw | 画图 | (type: DrawType) => Promise | | startModify | 修改 | (modifyEnd?: (feature: Feature) => void, conditionFeature?: Feature) => void | | startDelete | 删除 | () => Promise | | autoDraw | 通过点位画图 | (type: import("../base/constants").DrawType, coordinates: number[]|number[][] |number[][][], radius?: number) => Promise | | addFeature | 添加自定义feature | (feature: Feature) => void | | 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 | | style | 画图样式 | Style | | | coordinates | 坐标数组 点是1维数组,线是2维数组,多边形是3维数组 v-model双向绑定 | number[]|number[][]|number[][][]|undefined | | | radius | 圆半径 v-model双向绑定 | number|undefined | |

工具

• Mqtt 对mqtt的封装
• HttpRequest 对axios的封装
• MapDrawing 对地图画图的封装,MapDraw组件在此基础上封装成组件
• setGifPointStyle 方法 对feature点设置gif图片样式
• eventGifIcon 告警事件Gif图片