❤
npm
Sign UpSign In

apaas-maplayer-vehicle-uav-layer
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

VehicleUavLayer 车载和无人机巡检图层

整体图层

介绍

提供了VehicleUavLayer图层组件，能够快速构建车载和无人机巡检图层并提供了默认组件，以及各子组件，可使用其中的子组件进行二次开发。

安装教程

  1. npm i apaas-maplayer
  2. import {VehicleUavLayer} from 'apaas-maplayer'

使用方法

先在外部初始化组件

import {VehicleUavLayer} from 'apaas-maplayer'

> 注册组件
```javascript
components: {
  VehicleUavLayer
}

template中声明

<template>
  <section>
    <div class="map" id="map"></div>
    {/* 此组件为整个车载和无人机巡检图层 engine为地图实例*/}
    <VehicleUavLayer />
  </section>
</template>

注意事项

需要先调用 initVehicleUavLayerConfig() 方法，初始化地图数据与接口参数，初始化操作执行完毕后再让车载和无人机巡检图层渲染。示例如下：

<template>
  <section>
    <div class="map" id="map"></div>
    {/* 此组件为整个车载和无人机巡检图层 engine为地图实例*/}
    <VehicleUavLayer v-if="mapShow" />
  </section>
</template>

<script>
    const mapShow = ref(false);
    onMounted(() => {
        initVehicleUavLayerConfig({
            engine: mapRef.value.map,
            apiHost,
        });
        mapShow.value = true
    })
</script>

参数说明 props

Prop name Type Default Description
engine object required 地图实例

车载和无人机巡检子组件

宏观图层

使用

<script>
    import {VehicleUavLayer_MacroscopicLayer as MacroscopicLayer} from'apaas-maplayer'

    components: {
        MacroscopicLayer
    }
</script>

<template>
    <MacroscopicLayer />
</template>

中观图层

使用

<script>
    import {VehicleUavLayer_MesoscopicLayer as MesoscopicLayer} from'apaas-maplayer'

    components: {
        MesoscopicLayer
    }
</script>

<template>
    <MesoscopicLayer />
</template>

微观图层

使用

<script>
    import {VehicleUavLayer_MicroscopicLayer as MicroscopicLayer} from'apaas-maplayer'

    components: {
        MicroscopicLayer
    }
</script>

<template>
    <MicroscopicLayer />
</template>

宏观扎点

使用

<script>
    import {VehicleUavLayer_MacroscopicMarker} from'apaas-maplayer'

    components: {
        VehicleUavLayer_MacroscopicMarker
    }
</script>

<template>
    <VehicleUavLayer_MacroscopicMarker :list="list" :callback="callback" />
</template>

所需参数

参数名称 数据类型 是否必传 参数含义
list array true 中观扎点数据数组
callback function true 中观扎点点击事件回调函数

参数详细数据

list：

[
  {
    "orgId": "7eba1a03c5624d18a8dd95c0cd8b7dbd", // 二级单位编码
    "orgName": "广东省交通实业投资有限公司", // 二级单位名称
    "planCount": 0, // 计划数量
    "position": [ // 坐标（GCJ02坐标系）
      114.022388,
      22.937886,
      80
    ]
  }
]

中观扎点

使用

<script>
    import {VehicleUavLayer_MesoscopicMaker} from'apaas-maplayer'

    components: {
        VehicleUavLayer_MesoscopicMaker
    }
</script>

<template>
    <VehicleUavLayer_MesoscopicMaker :list="list" :callback="callback" />
</template>

所需参数

参数名称 数据类型 是否必传 参数含义
list array true 中观扎点数据数组
callback function true 中观扎点点击事件回调函数

参数详细数据

list：

[
    {
    "sectionId": "G0025440010", // 路段编码
    "sectionName": "天汕高速", // 路段名称
    "planCount": 0, // 计划数量
    "position": [ // 坐标（GCJ02坐标系）
      114.022388,
      22.937886,
      80
    ]
  }
]

微观扎点 - 无人机

使用

<script>
    import {VehicleUavLayer_MicMaker_WurenjiMaker as WurenjiMaker} from'apaas-maplayer'

    components: {
        WurenjiMaker
    }
</script>

<template>
    <WurenjiMaker :list="list" :callback="callback" />
</template>

所需参数

参数名称 数据类型 是否必传 参数含义
list array true 微观事件扎点数据数组
callback function true 微观事件扎点点击事件回调函数

参数详细数据

list：

[
    {
      "inspectionId": "mockinsp26156329229944962919", // 巡检编码
      "deviceId": "UAV52869085706379161427", // 设备编码（无人机编码)
      "deviceType": 1, // 设备类型（1：无人机）
      "startTime": "2023-11-14 00:00:00",  // 开始时间
      "endTime": "2023-11-14 00:22:00", // 结束时间
      "status": 2, // 状态
      "position": [ // 坐标（GCJ02坐标系）
          112.128,
          24.6276
      ],
    }
]

微观扎点 - 巡检车

使用

<script>
    import {VehicleUavLayer_MicMaker_XunjiancheMaker as XunjiancheMaker} from'apaas-maplayer'

    components: {
        XunjiancheMaker
    }
</script>

<template>
    <XunjiancheMaker :list="list" :callback="callback" />
</template>

所需参数

参数名称 数据类型 是否必传 参数含义
list array true 微观事件扎点数据数组
callback function true 微观事件扎点点击事件回调函数

参数详细数据

list：

[
    {
      "inspectionId": "mockinsp40288222521454249618", // 巡检编码
      "deviceId": "粤A632672", // 设备编码（车辆号码)
      "deviceType": 2, // 设备类型（2：车载）
      "startTime": "2023-11-14 00:00:00",  // 开始时间
      "endTime": "2023-11-14 00:22:00", // 结束时间
      "status": 2, // 状态
      "position": [ // 坐标（GCJ02坐标系）
          112.128,
          24.6276
      ],
    }
]

微观扎点 - 巡检计划

使用

<script>
    import {VehicleUavLayer_MicMaker_XujianjihuaMaker as XujianjihuaMaker} from'apaas-maplayer'

    components: {
        XujianjihuaMaker
    }
</script>

<template>
    <XujianjihuaMaker :list="list" :callback="callback" />
</template>

所需参数

参数名称 数据类型 是否必传 参数含义
list array true 微观事件扎点数据数组
callback function true 微观事件扎点点击事件回调函数

参数详细数据

list：

[
    {
        "planId": "mockplan06187502304553149869", // 计划编码
        "planType": 1, // 计划类型 
        "typeName": "日检", // 计划类型名称
        "startTime": "2023-11-26 00:00:00", // 开始时间
        "endTime": "2023-11-30 00:00:00", // 结束时间
        "sectionName": "二广高速", // 路段名称
        "direction": "2", // 方向
        "startStake": "K3408+900", // 巡检开始桩号
        "endStake": "K3405+0", //  巡检结束桩号
        "status": 3, // 状态
        "statusName": "已完成", // 状态名称
        "position": [ // 坐标（GCJ02坐标系）
            115.314,
            24.0938
        ]
    }
]

宏观、中观、微观二维左右两侧组件

巡检计划统计

  • 使用方法

    import {VehicleUavLayer_PlanStatistics} from 'apaas-maplayer'
    components: {
    VehicleUavLayer_PlanStatistics
}
    <template>
    <VehicleUavLayer_PlanStatistics :manager="manager" :info="info" :allWainingNum="allWainingNum" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    info true Object 卡片数据

  • 参数详细数据

info:

{
    "dailyPlanCount": 78, // 日检计划数量
    "offenPlanCount": 78, // 经检计划数量
    "regularPlanCount": 78, // 定检计划数量
    "specialPlanCount": 78, // 特检计划数量
}

无人机巡检计划

  • 使用方法

    import {VehicleUavLayer_UavInspectionPlan} from 'apaas-maplayer'
    components: {
    VehicleUavLayer_UavInspectionPlan
}
    <template>
    <VehicleUavLayer_UavInspectionPlan :list="list" :callback="callback" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    list true Array 列表数据
    callback true Function 点击事件回调函数

  • 参数详细数据

list:

{
    "inspectionId": "mockinsp97446458159728286012", // 巡检编码
    "deviceId": "UAV81602169576574472274", // 设备编码（无人机编号)
    "deviceType": 1, // 设备类型（1：无人机）
    "startTime": "2023-10-26 00:00:00", // 开始时间
    "endTime": "2023-10-26 00:34:00", // 结束时间
    "status": 1, // 状态
    "statusName": "计划中", // 状态名称
    "position": [] // 坐标（GCJ02坐标系）
}

车载巡检计划

  • 使用方法

    import {VehicleUavLayer_VehicleInspectionPlan} from 'apaas-maplayer'
    components: {
    VehicleUavLayer_VehicleInspectionPlan
}
    <template>
    <VehicleUavLayer_VehicleInspectionPlan :list="list" :callback="callback" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    list true Array 列表数据
    callback true Function 点击事件回调函数

  • 参数详细数据

list:

{
    "inspectionId": "mockinsp26857702598344831069", // 巡检编码
    "deviceId": "粤A896867", // 设备编码（车辆编号)
    "deviceType": 2, // 设备类型（2：车载）
    "startTime": "2023-10-26 00:00:00", // 开始时间
    "endTime": "2023-10-26 00:58:00", // 结束时间
    "status": 1, // 状态
    "statusName": "计划中", // 状态名称
    "position": [] // 坐标（GCJ02坐标系）
}

无人机/车载巡检计划详细信息

  • 使用方法

    import {VehicleUavLayer_PlanInfo} from 'apaas-maplayer'
    components: {
    VehicleUavLayer_PlanInfo
}
    <template>
    <VehicleUavLayer_PlanInfo :info="info" :callback="callback" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    info true Object 无人机/车载巡检计划详细信息
    callback true Function 点击事件回调函数 参数：(type, info) type: 历史轨迹、实时追踪、关闭 info: 卡片详情

  • 参数详细数据

info:

{
    "deviceInfo": { // 设备信息
        "deviceName": "无人机", // 设备名称
        "deviceId": "UAV84737889447644280150", // 设备编码
        "deviceType": 1, // 设备类型，1：无人机，2：巡检车
        "owner": "owner99646760358986330054", // 设备所属
        "status": 2, // 设备状态
        "statusName": "进行中" // 设备状态名称
    },
    "inspectionInfo": { // 巡检信息
        "inspectionId": "mockinsp26746230352857178047", // 巡检编码
        "startTime": "2023-11-26 00:00:00", // 开始时间
        "endTime": "2023-11-26 00:33:00", // 结束时间
        "sectionName": "二广高速", // 路段名称
        "direction": "下行", // 方向
        "startStake": "K3408+900", // 巡检开始桩号
        "endStake": "K3405+0", // 巡检结束桩号
        "status": 3, // 巡检状态
        "statusName": "已完成", // 巡检状态名称
        "linePic": "testpic" // 巡检线路图片
    },
    "movementStatistic": { // 移动统计
        "distance": "0.1", // 已巡检距离，单位KM
        "time": 1, // 已巡检时长，单位分钟
        "avgSpeed": "27.14" // 平均速度单位KM/H
    },
    "realtimeTrack": { // 实时轨迹
        "reportTime": "2023-11-26 00:00:13", // 上报时间
        "speed": "27.69", // 当前速度，单位KM/H
        "height": "98.36", // 当前高度，单位米
        "heading": "150", // 航向角
        "sectionName": "二广高速", // 路段名称
        "direction": "下行", // 方向
        "stake": "K3408+700", // 桩号
        "timestamp": 1700928013000, // 当前时间戳
        "position": [ // 坐标（GCJ02坐标系）
            115.315964,
            24.093426
        ]
    }
}

微观三维左右两侧组件

无人机/车载巡检统计

  • 使用方法

    import {VehicleUavLayer_MicLayer_InspectionStatistics as InspectionStatistics} from 'apaas-maplayer'
    components: {
    InspectionStatistics
}
    <template>
    <InspectionStatistics :info="info" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    info true Object 无人机/车载巡检计划详细信息

  • 参数详细数据

info:

{
    "deviceInfo": { // 设备信息
        "deviceName": "无人机", // 设备名称
        "deviceId": "UAV84737889447644280150", // 设备编码
        "deviceType": 1, // 设备类型，1：无人机，2：巡检车
        "owner": "owner99646760358986330054", // 设备所属
        "status": 2, // 设备状态
        "statusName": "进行中" // 设备状态名称
    },
    "movementStatistic": { // 移动统计
        "distance": "0.1", // 已巡检距离，单位KM
        "time": 1, // 已巡检时长，单位分钟
        "avgSpeed": "27.14" // 平均速度单位KM/H
    },
}

无人机/车载设备信息

  • 使用方法

    import {VehicleUavLayer_MicLayer_DeviceInfo as DeviceInfo} from 'apaas-maplayer'
    components: {
    DeviceInfo
}
    <template>
    <DeviceInfo :info="info" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    info true Object 无人机/车载巡检计划详细信息

  • 参数详细数据

info:

{
    "deviceInfo": { // 设备信息
        "deviceName": "无人机", // 设备名称
        "deviceId": "UAV84737889447644280150", // 设备编码
        "deviceType": 1, // 设备类型，1：无人机，2：巡检车
        "owner": "owner99646760358986330054", // 设备所属
        "status": 2, // 设备状态
        "statusName": "进行中" // 设备状态名称
    },
}

无人机/车载巡检信息

  • 使用方法

    import {VehicleUavLayer_MicLayer_InspectionInfo as InspectionInfo} from 'apaas-maplayer'
    components: {
    InspectionInfo
}
    <template>
    <InspectionInfo :info="info" :callback="callback" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    info true Object 无人机/车载巡检计划详细信息
    callback true Function 点击事件回调函数 参数：(type, info) type: 历史轨迹、实时追踪 info: 卡片详情

  • 参数详细数据

info:

{
    "deviceInfo": { // 设备信息
        "deviceName": "无人机", // 设备名称
        "deviceId": "UAV84737889447644280150", // 设备编码
        "deviceType": 1, // 设备类型，1：无人机，2：巡检车
        "owner": "owner99646760358986330054", // 设备所属
        "status": 2, // 设备状态
        "statusName": "进行中" // 设备状态名称
    },
    "inspectionInfo": { // 巡检信息
        "inspectionId": "mockinsp26746230352857178047", // 巡检编码
        "startTime": "2023-11-26 00:00:00", // 开始时间
        "endTime": "2023-11-26 00:33:00", // 结束时间
        "sectionName": "二广高速", // 路段名称
        "direction": "下行", // 方向
        "startStake": "K3408+900", // 巡检开始桩号
        "endStake": "K3405+0", // 巡检结束桩号
        "status": 3, // 巡检状态
        "statusName": "已完成", // 巡检状态名称
        "linePic": "testpic" // 巡检线路图片
    },
}

无人机/车载实时位置

  • 使用方法

    import {VehicleUavLayer_MicLayer_RealtimeLocation as RealtimeLocation} from 'apaas-maplayer'
    components: {
    RealtimeLocation
}
    <template>
    <RealtimeLocation :info="info" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    info true Object 无人机/车载巡检计划详细信息

  • 参数详细数据

info:

{
    "deviceInfo": { // 设备信息
        "deviceName": "无人机", // 设备名称
        "deviceId": "UAV84737889447644280150", // 设备编码
        "deviceType": 1, // 设备类型，1：无人机，2：巡检车
        "owner": "owner99646760358986330054", // 设备所属
        "status": 2, // 设备状态
        "statusName": "进行中" // 设备状态名称
    },
    "realtimeTrack": { // 实时轨迹
        "reportTime": "2023-11-26 00:00:13", // 上报时间
        "speed": "27.69", // 当前速度，单位KM/H
        "height": "98.36", // 当前高度，单位米
        "heading": "150", // 航向角
        "sectionName": "二广高速", // 路段名称
        "direction": "下行", // 方向
        "stake": "K3408+700", // 桩号
        "timestamp": 1700928013000, // 当前时间戳
        "position": [ // 坐标（GCJ02坐标系）
            115.315964,
            24.093426
        ]
    },
}

巡检计划详情

  • 使用方法

    import {VehicleUavLayer_MicLayer_InspectionPlanDetail as InspectionPlanDetail} from 'apaas-maplayer'
    components: {
    InspectionPlanDetail
}
    <template>
    <InspectionPlanDetail :info="info" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    info true Object 巡检计划详细信息

  • 参数详细数据

info:

{ // 巡检计划详情
    "planId": "mockplan10690454260743825560", // 计划编码
    "planType": 2, // 计划类型
    "typeName": "经检", // 计划类型名称
    "startTime": "2023-11-04 00:00:00", // 计划开始时间
    "endTime": "2023-11-06 00:00:00", // 计划结束时间
    "sectionName": "二广高速", // 路段名称
    "direction": "下行", // 方向
    "startStake": "K105+500", // 计划开始桩号
    "endStake": "K104+0", // 计划结束桩号
    "status": 1, // 计划状态
    "statusName": "计划中", // 计划状态名称
    "position": [ // 坐标（GCJ02坐标系）
        113.644,
        23.3417
    ]
}

关联无人机巡检计划

  • 使用方法

    import {VehicleUavLayer_MicLayer_UAVInspectionPlan as UAVInspectionPlan} from 'apaas-maplayer'
    components: {
    UAVInspectionPlan
}
    <template>
    <UAVInspectionPlan :list="list" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    list true Array 关联无人机巡检计划列表

  • 参数详细数据

info:

[{ // 关联无人机巡检信息
    "inspectionId": "巡检编码",
    "deviceId": "无人机编号/车牌号码",
    "deviceType": "类型，1：无人机，2：车载",
    "status": 1, // 状态
    "statusName": "状态名称"
}]

关联车载巡检计划

  • 使用方法

    import {VehicleUavLayer_MicLayer_CarInspectionPlan as CarInspectionPlan} from 'apaas-maplayer'
    components: {
    CarInspectionPlan
}
    <template>
    <CarInspectionPlan :list="list" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    list true Array 关联车载巡检计划列表

  • 参数详细数据

info:

[{ // 关联车载巡检计划
    "inspectionId": "巡检编码",
    "deviceId": "无人机编号/车牌号码",
    "deviceType": "类型，1：无人机，2：车载",
    "startTime": "巡检开始时间",
    "endTime": "巡检结束时间",
    "status": 1, // 状态
    "statusName": "状态名称"
}]

无人机/车载扎点弹窗

  • 使用方法

    import {VehicleUavLayer_PopupInfo as PopupInfo} from 'apaas-maplayer'
    components: {
    PopupInfo
}
    <template>
    <PopupInfo :info="info" :callback="callback" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    info true Object 无人机、巡检车详情
    callback true Function 点击事件回调函数 参数：(type, info) type: 关闭、微观视角 info: 卡片详情

  • 参数详细数据

info:

{
    "deviceInfo": {
        "deviceName": "无人机",
        "deviceId": "UAV51724594037638241874",
        "deviceType": 1,
        "owner": "owner51707580396008189298",
        "status": 2,
        "statusName": "进行中"
    },
    "inspectionInfo": {
        "inspectionId": "mockinsp56032627026427545521",
        "startTime": "2023-12-22 00:00:00",
        "endTime": "2023-12-22 00:35:00",
        "sectionName": "二广高速",
        "direction": "下行",
        "startStake": "K508+800",
        "endStake": "K507+0",
        "status": 2,
        "statusName": "进行中",
        "linePic": "testpic"
    },
    "movementStatistic": {
        "distance": "0.21",
        "time": 1,
        "avgSpeed": "35.31"
    },
    "realtimeTrack": {
        "reportTime": "2023-12-22 00:00:21",
        "speed": "32.73",
        "height": "72.42",
        "heading": "199",
        "sectionName": "二广高速",
        "direction": "下行",
        "stake": "K508+500",
        "timestamp": 1703174421000,
        "position": [
            112.411,
            23.3024
        ]
    }
}

视频图像

  • 使用方法

    import {Structure_Micro3dVideo} from 'apaas-maplayer'
    components: {
    Structure_Micro3dVideo
}
    <template>
    <Structure_Micro3dVideo :info="info" />
</template>

  • 所需参数

    参数名 是否必传 类型 含义
    info true array[] 视频流组件数据

  • 参数详细数据

    info:

    {
  videoData: [
      {
          centerStake:"K3321+310" // 视频中心桩号
          endCameraName:"葵岗隧道上行CA4" // 后摄像头名称
          endDeviceId:"180702010100000009782" // 后摄像头id
          endSectionDirection:"3" // 后摄像头方向
          endStake:"K3321+408" // 视频结束桩号
          sectionDirection:"1" // 摄像头方向
          sectionName:"梅河高速" // 高速名称
          startCameraName:"葵岗隧道下行CA2" // 前摄像头名称
          startDeviceId:"180702010100000009776" //前摄像头id
          startSectionDirection:"3" // 前摄像头方向
          startStake:"K3321+263" // 视频起始桩号
      }
  ],
}

Readme

Keywords

Package Sidebar

Install

npm i apaas-maplayer-vehicle-uav-layer

Weekly Downloads

3

Version

0.0.4

License

MIT

Unpacked Size

3.41 MB

Total Files

93

Last publish

Collaborators

  • wangjianpm
Try on RunKit
Report malware