Fmmapmanager NPM

快速开始

引入

 import FmMapManager from 'FmMapManger'

创建实例

const fmMonitorOptions = {
      flight_data: data, //必填。 请求到的任务数据
      local_id: '' , // 必填。任务id
      url: '',  // 必填。websocket监听地址
      platform: '', // 选填。不填默认web端
      isWgsNeeded: false, // 选填。不填默认false， 即 不生成wgs航线/标记点
      /*
       * airlineOptions 航线配置
       * base_airline_options: 底层航线，upper_airline_options： 上层航线
       * 具体航线配置参考Polyline文档
       */
      airlineOptions: { 
        base_airline_options: {    // 选填。底层航线
          strokeColor: '#aaccaa',
          strokeWidth: 2,
          id: '1'
        },
        upper_airline_options: {   // 选填。上层航线
          strokeColor: '#1686cc',
          strokeWidth: 2,
          id: '2'
        }
      },
      /*
       * markersOptions 标记点配置
       * landingMarker: 起飞点，endPointMarker: 终止点，planeMarker:飞机；
       * 网页端参考amap marker文档, uniapp端参考文档。配置除图片和位置外的所需参数
       */
      markersOptions: { 
        landingMarker: {}, // 起飞点
        endPointMarker: {}, // 终止点
        planeMarker: {}, // 飞机
      },
}
const fmManager = new FmMapManager(fmMonitorOptions);

调用飞机监视方法。

fmManager.createMonitor()

fmManager.onPlaneMove(position => {
  // 监听飞机移动事件
})

fmManager.errorMonitor(err => {
  // 连接错误处理
})

获取航线数据。在调用3中的createMonitor()方法后，fmManager 会被初始化为一个对象。可以通过读取其属性值，在页面进行显示。

// 监视数据
const fmMonitor = fmManager.fmMonitor

//航线数据
const airlines = fmManager.airlines
// 获取单个航线
const airline = fmManager._airline
const flyingAirline = fmManager._flyingAirline

const wgs84Airline = fmManager._wgs84Airline
const wgs84FlyingAirline = fmManager._wgs84FlyingAirline

`FmMapManager`

属性	类型	描述	用法示例
`airlines`	`Polyline[]`	`[_airline, _flyingAirline]`
`_airline`	`Polyline`	`Polyline`配置参数，Object, 初始航线。地图 `Polyline` 对象的配置参数。将其添加到地图即可进行显示。	高德地图：const polyline = `new Amap.Polyline(airline); <br />polyline.setMap(this.map)uniapp`: `<map :polyline: [airline]></map>`
`_flyingAirline`	`Polyline`	`Polyline`配置参数，Object, 飞行轨迹。同`airline`	同`airline`
`mapHelper`	`MapHelper`类	`MapHelper`类, 地图航线/marker工具。可以调用其方法进行航线/marker的绘制和更新。	见`MapHelper`
`fmMonitor`	`FmMonitor`类	`FmMonitor`类,飞机实时数据。对飞机传来的实时数据做了一次处理和封装。	见`FmMonitor`

`fmMonitorOptions`

`MapHelper`

MapHelper工具类对uniapp和web端的地图实例进行了区分处理。

方法	参数	示例
`getAirline(positions, polylineOptions)`	`positions`。经纬度对象数组	{latitude: 0, longitude: 0}, {latitude: 0, longitude: 0}
`getAirline(positions, polylineOptions)`	`polylineOptions`	见`PolylineOptions`
`updateAirline(position, airline)`	position。经纬度对象	{latitude: 0, longitude: 0}
`updateAirline(position, airline)`	`airline`。由`getAirline`方法生成的航线对象	略

`PolylineOptions`参数

参数	示例	必填	默认值
`flight_data`	将请求到的航线数据直接赋值即可如： { flight_mission_info: {}, plane_info: {}, ...}	是	无。
`local_id`	任务id, 如: b819f45eba3142dcba04e86eff681110	是	无。
`url`	websocket监听地址	是	无。
`base_airline_options`	参数示例见: 高德地图-polyline示例	否	{ `strokeColor`: `'#aaccaa'`, `strokeWidth`: 2,}
`upper_airline_options`	参数示例见: 高德地图-polyline示例	否	同 `base_airline_options`

`FmMonitor`

属性	类型	描述	示例
`flightMissionInfo`	Object	飞行任务数据。	详见接口描述。
`flightPanelDatas`	Object	仪表盘相关数据。	{ "drone_pilot_distance":"0m", // 操作员位置 "latitude":"31.7992296", // 飞机纬度 "longitude":"107.3511841", // 飞机经度 "temperature":0, // 温度 "windSpeed":0, // 风速 "speed":0, // 飞行速度 "target_speed":"8m/s", // 目标速度 "angle":"90°", // 旋转角度 "target_height":"52m",// 目标高度 "drone_height": "0m", // 飞机高度 "flight_miles":"0km", // 飞行里程 "flight_duration":"00:00:00", // 目标高度 "finished_point_count":0 ,// 已飞航点 "total_point_count":74, // 航点总数 "flight_progress":"0/74" // 航点进度 "photo_count":0, // 照片数量 "fixPlane":true }
`droneInfo`	Object	无人机数据。	{ "gps_signal_icon": "/static/image/signal_5.png", "gps_signal_sup": "", "hd_signal_icon": "/static/image/signal_5.png", "hd_signal_sup": "", \|"drone_battery_percent": "", "drone_battery_percent_2": "", "drone_battery_percent_3": "" }
`homePoint`	Object	起始点经纬度	{"latitude":31.799229568878847,"longitude":107.35118412570608}
`endPoint`	Object	终止点经纬度	{"latitude":31.799229568878847,"longitude":107.35118412570608}
`keyInfo`	Object	/	见接口描述
`lastUas`	Object	/	见接口描述
`uasInfo`	Object	/	见接口描述
`planeInfo`	Object	飞机信息	见接口描述
`planeType`	String	飞机型号	略
`taskInfo`	Object	任务信息	略