ooomap 总控平台接口说明

本文档中的接口是针对总控平台项目对ooomap接口的二次封装,提供更加简单易用的方法操作地图

ooomap原生接口
ooomap地图组件实例
标注(marker)操作
视图操作
地图画线
地图坐标

ooomap原生接口

ooomap命名空间为om, 在合入 ooomap.min.js后, 即可以使用 om.xxx 的方式访问ooomap的原生接口

在创建地图组件后可以使用如下方法得到地图(Map)实例
```
  var map = om.Map.getInstance();
```

ooomap地图组件实例

我们将地图封装成了地图组件, 这样开发人员不需要使用原生接口从0开始. 我们已经将地图的加载, 效果的调节, 动画元素的引入等等的细节工作都在组件中完成了. 只需要一行代码便可以将地图引入到您的项目中.

地图组件的命名空间为omComps

使用 omComps.initOoomap 方法创建地图组件实例

  // 传入地图的容器 domElement, 地图会填满元素
  // 返回地图组件实例
  var mapComp = omComps.initOoomap(document.body);

地图数据加载完成事件

添加 marker 的操作要在地图地图数据加载完成后执行
```
  mapComp.$on('sceneLoaded', () => {
      console.log('地图数据加载完成');
  });
```

地图元素拾取事件

  // 拾取 POI 事件
  mapComp.$on('picked', evt => {
      console.log('拾取的数据:', evt.detail);
  })

执行上面的代码, 在使用鼠标点击地图后便会在控制台上输出如下内容

  {
      info: {},               // 这里是所拾取到的元素的一些附加信息, 一般为空
      intersect: {
          distance:           // 拾取点与当前视点的距离,单位为米, 一般不需要关注
          object:             // 拾取元素的Object3D对象, 一般不需要关注
          point: [x, y, z]    // 拾取到的坐标值, 此值可以记录下来, 用来做为创建 marker的位置坐标
          uv:                 // 不需要关注
      }, 
      node:                   // 拾取到的om节点(OMNode)对象,如标注,模型或体块儿等, 为null时为空点击
  }

标注(marker)操作

创建标注

使用地图组件mapComp.createMarker方法创建POI标注对象

创建标注的方法要放在地图数据加载完成之后
```
  // 返回 om.SpriteMarkerNode 对象
  var marker = mapComp.createMarker({
      imageUrl: './assets/camera.jpg',
      position: [0, 0, 50],
      size: 40,
      autoHide: false,
      tag: 'your any tag'
  })
```
参数说明:
- imageUrl: 图标的url
- position: 图标的空间位置[x, y, z], 坐标可以使用地图组件的 picked 事件中取得, z 为高度
- size: 图标的大小, 像素值
- autoHide: 是否在标注重叠时自动隐藏, 默认为true
- tag: 用于标记的字符串
```
  // 获取marker的标记
  marker.config.tag
```
标注的显示/隐藏
```
  marker.visible = false; // true
```
移除标注
```
  marker.dispose();
```

设置标注的位置

  // 设置position属性, [x, y, z]
  marker.position = [1.2, 2, 3.4];
  // 或直接设置x, y, z
  marker.x = 1.23;
  marker.y = 23.4;
  marker.z = 45;

标注的闪烁动画

  // 使用默认值
  marker.flash();
  // 自定义参数
  marker.flash({
      duration: 1000,     // 动画时长, 毫秒数
      scale: 1.6          // 放大的倍数,默认为1.6
  })

视图操作

在创建地图组件后, 得到地图(Map)对象的实例
```
 var map = om.Map.getInstance();
```

get/set 比例尺或比例尺级别

  // 比例尺, 屏幕1厘米对应场景中的实际长度(厘米)
  // get zoom
  map.view.zoom;
  // set
  map.view.zoom = 1000;       // 屏幕1厘米对应场景中1000厘米(10米的距离)
  // 参数模式
  map.view.zoom = {
      zoom: 1000,
      duration: 1000,         // 动画时长
      callback: () => {}      // 动画完成回调
  }

  // 比例尺级别 1 ~ 28 级, 室内园区的级别范围一般在 16 ~ 23级
  // get zoomLevel
  map.view.zoomLevel;
  // set
  map.view.zoomLevel = 18;
  // 参数模式
  map.view.zoomLevel = {
      level: 18,
      duration: 1000,
      callback: () => {}
  }

2D/3D 模式

  // 默认参数
  map.view.viewMode = '2d';   // '3d'
  // 参数模式
  map.view.viewMode = {
      mode: '2d',     // '3d'
      duration: 1000,
      callback: () => {}
  }

视图角度

  // 地图平面角度 0 ~ 360, 角度值
  map.viewAngle = 45;
  // 参数模式
  map.viewAngle = {
      angle: 45,
      duration: 1000, 
      callback: () => {}
  }
  // 地图倾斜角度 0 ~ 180, 但默认地图的最大倾斜角度为 60 度, 垂直为 0 度
  map.polarAngle = 30;
  map.polarAngle = {
      angle: 30,
      duration: 1000,
      callback: () => {}
  }

get/set 视图状态

得到当前视图的数据包括比例尺,视图中心,角度等等

  // get
  var viewState = map.view.getViewState();

  // 将值打印到控制台上
  console.log(viewState);
  // 从控制台上将输出的字符串复制一下, 您可以将其使用一个变量储存这个视图状态
  var viewStateString = "your view state string";
  //
  // 设置视图状态
  // setViewState(viewStateString, duration, callback);
  map.view.setViewState(viewStateString, 1000, () => {});

视图的移动(moveTo)

  // 简单模式
  // moveTo(viewCenter, callback);
  map.view.moveTo([100, 200, 30], () => {});
  // 参数模式
  map.view.moveTo({
      viewCenter: [100, 200, 30], // 必填, 以下都为可选参数
      viewAngle: 45,
      zoom: 1200,
      polarAngle: 40,
      duration: 1000,
      easing: 'backOut',  // 默认为 'cubicOut' ...
      callback: () => {}  // 动画完成后回调
  })

视图的缩放速度

  // 默认值为 0.4, 调大可以加快缩放速度
  map.view.controls.zoomSpeed = 1;

地图画线

创建线形对象

  // API
  // points: [ [x, y, z], [x, y, z], ... ]
  // lineStyle: {              // 可选
  //      type: 'naviArrow',   // normal | arrow | naviArrow
  //      color: 0xff00ff,     // 线的颜色
  //      lineWidth: 10,       // 线的宽度
  // }
  var line = mapComp.createLine(points, lineStyle);

移除线形对象
```
  line.dispose();
```

地图坐标

ooomap场景地图的坐标规则是每个场景有一个中心点的墨卡托坐标(gcj02), 其它的所有坐标都是相对于此中心点的相对坐标

得到当前地图场景的中心点墨卡托坐标

  var center = map.baseLayer.config.center;
  console.log( center );

  // 输出
  // {x: 12567656.496084629, y: 4059305.983966098}

将经纬度坐标转为墨卡托坐标

  var coord = om.utils.coordTransform.lngLatToMercator({lng: 130.134, lat: 36.211});
  console.log(coord);
  // 输出
  // {x: 12567656.496084629, y: 4059305.983966098}

从经纬度坐标转为ooomap场景坐标的流程

将经纬度转为墨卡托坐标

使用转化后的墨卡托坐标与场景中心墨卡托坐标相减

 // 场景坐标 [x, y, z], z 为高度
 var sceneCoord = [coord.x - center.x, coord.y - center.y, 20]