Skip to content

Map

Jump to bottom
Zhexuan Liu edited this page Jun 21, 2018 · 5 revisions

Map

edit simpleOverview detailOverview
image image image

绘制或展示飞行路径并且实时地图，显示飞机以及成员的位置的地图控件。下面的例子中在地图内部嵌入了一个 coupleLabel 作为使用示例，但它并不是必须要与 map 控件一起使用:

<map type="edit" editType="waypoint" style="satellite" waypoints={myStore.waypoints} selected={myStore.selectedIndex} size="stretch" on-change={xxx}>
  <couplelabel leftContent={myStore.currentLat} rightContent={myStore.currentLng} style="transparent">
  </couplelabel>
</map>
const { MapView } from 'mesh-envoy-tag'

const view = (
  <MapView
    waypoints={this.state.waypoints}
    selected={this.state.selected}
    autoScroll={true}
    size="stretch"
    alignment="bottom"
    type="edit"
    editType="waypoint"
    onChange={linkEvent(changeWaypoint, this)} />
)
名称 作用 必须 可否更改
type map 类型，取值如下：
edit: 默认值，上述图一，可编辑路径
simpleOverview: 上述图二
detailOverview: 上述图三		 false false
editType edit 类型，取值如下：
waypoint: 编辑 waypoint
hotpoint: 编辑 hotpoint
area: 编辑区域		 false false
style map 样式，取值如下：
standard: 标准视图
satellite: 卫星视图		 false true
waypoints 用户生成的路径 GPS 点，它必须是一个字典的数组。其中字典的 key 为 lat 或者 lng，value 为 double 类型数值，即：[{lat: xxx, lng: xxx}, ...] false true
hotpoint 用户生成的 Hotpoint GPS 点，它必须是一个字典的长度为1数组。其中字典的 key 为 lat 或者 lng，value 为 double 类型数值，即：[{lat: xxx, lng: xxx}] false true
hotpointRadius 用户生成的 Hotpoint 半径，为 Double 类型 false true
areaVertex area 编辑模式下，生成的 area 对应的 4 个顶点，其初始值由客户端生成并通过 on-change 返回 false true
selected 当前选择的路径点的 index，为 Int 类型 false true
autoScroll Bool: 是否自动滚动到可视范围内中心 false true

on-change 事件用于向 JS 返回 Map 的数据，根据 editType 的不同，返回的数据也会有不同。

editType 描述
waypoint 向 JS 返回 map 上已经存在的 waypoint 的 GPS 坐标。如果此时用户在地图上进行了点击操作，那么该次点击对应 GPS 坐标也会 append 在已有 waypoint 的 GPS 序列后方一并返回
hotpoint 当用户在地图上进行了点击操作，向 JS 返回这次点击对应的 GPS 坐标
area 用户对地图上的区域进行了变换后，向 JS 返回区域对应的 4 个顶点
homepoint 用户在限定范围之内选择新的 homepoint

Method Calling

Map 暴露了以下方法：

1. convertGPSToPoint

pointArray = mesh.call(moduleID, convertGPSToPoint, [gpsArray])

此方法将 GPS 坐标转换为地图上对应的 point，其接收一个数组 gpsArray 作为参数：

gpsArray = [
  {
    "lat": xxx,
    "lng": xxx
  }, ...
]

返回值为一个数组 pointArray，代表 GPS 点在 Map 上的对应视图坐标：

[
  {
    "x": xxx,
    "y": xxx
  }, ...
]

2. convertPointToGPS

gpsArray = mesh.call(moduleID, convertPointToGPS, [points])

此方法将地图上的某点转换为 GPS 坐标，其接收一个数组 points 作为参数：

points = [
  {
    "x": xxx,
    "y": xxx
  }, ...
]

返回值为一个数组 gpsArray，表示对应的 GPS 坐标：

[
  {
    "lat": xxx,
    "lng": xxx
  }, ...
]

3. metersPerPoint

meters = mesh.call(moduleID, metersPerPoint, [latitude])

返回在当前 Map 的 zoom level 以及给定的 latitude 下，Map 上的一个 point 所对应的实际长度，单位为 meter.

Clone this wiki locally