apaas-maplayer-vehicle-uav-layer

v0.0.4

Published

8 months ago

广东一张图-地图图层SDK 车辆无人机图层

Downloads

0High
0Medium
0Low

wangjianpm

apaas maplayer apaas-maplayer vehicle-uav-layer

VehicleUavLayer 车载和无人机巡检图层

整体图层

介绍

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

安装教程

npm i apaas-maplayer
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" // 视频起始桩号
      }
  ],
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

VehicleUavLayer 车载和无人机巡检图层

整体图层

介绍

安装教程

使用方法

注意事项

参数说明 props

车载和无人机巡检子组件

宏观图层

使用

中观图层

使用

微观图层

使用

宏观扎点

使用

所需参数

参数详细数据

中观扎点

使用

所需参数

参数详细数据

微观扎点 - 无人机

使用

所需参数

参数详细数据

微观扎点 - 巡检车

使用

所需参数

参数详细数据

微观扎点 - 巡检计划

使用

所需参数

参数详细数据

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

巡检计划统计

无人机巡检计划

车载巡检计划

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

微观三维左右两侧组件

无人机/车载巡检统计

无人机/车载设备信息

无人机/车载巡检信息

无人机/车载实时位置

巡检计划详情

关联无人机巡检计划

关联车载巡检计划

无人机/车载扎点弹窗

视频图像