npm package: @rev-ai/screen-map
Description: 基于openlayers封装的地图管理工具
Author: jhu
Latest version: 0.0.1

# screen-map

Screen Map

## Install

```shell
# $ npm config set @revai:registry https://npm.aibee.cn
$ npm i -S @revai/screen-map
```

## Usage
使用示例  
https://gitlab.revai.cn/web/screen-map/-/tree/master/examples/main.js

```javascript
import ScreenMap from '@revai/screen-map';

const dom = document.querySelector('#root');
const map = new ScreenMap(dom);
// 基于svg和对齐参数创建地图
map.addMapFromSvg(
  svgPath,
  align_params,
);
// 地图上添加一个图层
map.addLayer({ moveable: true, selectable: true }, 'layer1');
// 在图层上加入poi
map.setPois(list.map((d) => {
  return {
    iconSize: [40, 40],
    name: d.poiKey,
    icon: d.icon,
    offsetY: 20,
    text: d.name,
    angle: 80,
  };
}), 'layer1');

// 添加覆盖层
const overlay = map.addOverlay({
  element: document.querySelector('#overlay'),
  className: 'my-overlay',
  offset: [0, -10],
});

// 添加事件
map.addEventListener('poi-click', (ev) => {
  const { poi, position, coordinate } = ev.detail;
  // 点击layer1图层，更新图标
  if (poi.getLayerKey() === 'layer1') {
    poi.updateData({
      icon: 'https://prod-deployment.oss-cn-hangzhou.aliyuncs.com/ab3d081187a14e5ea07e5c3b16829513_c1.png',
    });
  }
  // 设置覆盖层位置，并显示
  overlay.setPosition(coordinate);
  overlay.show();
  // overlay.hide();
});

// poi移动结束事件
map.addEventListener('modify-end', (ev) => {
  const { poi, position } = ev.detail;
  console.log(poi, position);
});

// 切换地图可先销毁地图，再实例化
map.dispose();
map = new ScreenMap(dom);
map.addMapFromSvg(
  svgPath,
  align_params,
);
// ...

```

## API

### ScreenMap实例方法
|方法|说明|属性/方法参数|
|:--|:--|:--|
|new ScreenMap(container)|构造函数|container地图容器|
|addMapFromSvg(svgPath, svgAlignParams, mapConfig)|使用svg初始化地图|svgPath:svg地图, <br>svgAlignParams:对齐参数, <br>mapConfig:地图配置参考ol.Map/View的配置, 如果配置了convertToJson=true将svg转换成json后渲染，效果同addMapFromJson|
|addMapFromJson(jsonPath, svgAlignParams, mapConfig)|使用json初始化地图|jsonPath:json地图, <br>svgAlignParams:对齐参数, <br>mapConfig:地图配置参考ol.Map/View的配置,|
|addLayer(layerOptions, layerKey)|添加一个图层|layerOptions:图层配置([参考](#layeroptions-图层配置参数)), layerKey:图层id|
|removeLayer(layerKey)|删除一个图层|layerKey:图层id|
|setLayerVisible(layerKey, bool)|设置图层显隐|layerKey:图层id, bool: Boolean|
|setPois(poiList, layerKey)|清空图层poi，加入新的poi|poiList:poi列表(poiOptions), layerKey:指定图层|
|addPoi(poiOptions,layerKey)|在图层上添加poi|poiOptions:配置参数([参考](#poioptions-poi配置参数)), layerKey:指定图层|
|removePoi(poi)|删除一个poi|poi:poiId或者poi对象|
|getPoiByName(name)|根据poi配置name字段查找poi|name:poi配置的name字段|
|addOverlay(overlayOptions)|根据overlay配置创建覆盖层|overlayOptions:overlay配置([参考](#overlayoptions-覆盖层配置参数))|
|getEventPosition(event)|获取鼠标事件位置的地图坐标|event:鼠标事件|
|rotatePoiTo(poi, angle, duration)|旋转poi|poi: poiId或者poi对象, angle: 旋转角度0-360, duration: 延迟动画0|
|translatePoiTo(poi, x, y, z, duration)|移动poi|poi: poiId或者poi对象, x, y, z, duration: 延迟动画0|
|setPerspective(angle, options)|设置地图倾斜度|angle: 倾斜角度0-30, { duration: 500, easing, x: 0, y: -500 }|
|setCenter(position, duration, callback)|position:设置地图中心点坐标, duration:动画时长, callback: 成功回调|-|
|getMapExtent()|获取地图底图的范围|-|
|getMapCenter()|获取地图底图的中心点|-|
|fit(extent, options)|根据给定的边界适应范围|extent:地图边界(为空时取地图边界), <br>options:配置参数{duration:动画时长, padding:边界距离容器的padding[top, right, bottom, left], callback: 成功回调}|
|scaleExtendCenter(padding, duration, callback)|居中并缩放地图底图区域(fit方法的简化版)|padding:边界距离容器的padding[top, right, bottom, left], <br>duration:duration:动画时长, callback: 成功回调|
|animate(options, callback)|执行一个地图动画|options:参考ol.View.animate, {center,zoom,resolution,rotation,duration}, <br>callback:动画完成的回调|
|convertPositionToCoordinate(position)|工具类：基于对齐配置，3D坐标转换成2D地图坐标|position:3D坐标|
|convertCoordinateToPosition(coordinate)|工具类：基于对齐配置，2D地图坐标转换成3D坐标|coordinate:2D坐标|
|addNavigation(nav)|添加导航路线控制|nav:导航路线对象([参考](#navigation-实例方法))|
|removeNavigation(nav)|删除导航路线控制|nav:导航路线对象|
|setRender3D(options, layerKey)|设置图层的3D渲染|options:{height: 高度50, defaultHeight: 默认高度30, duration: 动画时长1000}, <br>layerKey:需要渲染的图层id，不传默认svg底图|
|dispose()|销毁地图|-|

### POI实例方法
|方法|说明|属性/方法参数|
|:--|:--|:--|
|updateData(poiOptions)|更新poi配置，更新地图poi|poiOptions:POI配置参数|
|getPosition()|获取poi的坐标|-|
|getId()|获取poi的Id|-|
|getLayerKey()|获取poi所在图层id|-|
|get(key)|获取poi的原始配置属性|key:属性key|

### layerOptions 图层配置参数
参考 https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html
|属性|说明|默认值|
|:--|:--|:--|
|declutter|poi是否碰撞隐藏|false|
|moveable|poi是否可拖动（选中后才可拖动）|false|
|selectable|poi是否可选中|false|
|zIndex|图层优先级|默认按添加顺序|

### poiOptions POI配置参数
其他配置参考 <br>
文本配置：https://openlayers.org/en/latest/apidoc/module-ol_style_Text-Text.html <br>
图标配置：https://openlayers.org/en/latest/apidoc/module-ol_style_Icon-Icon.html <br>
|属性|说明|默认值|
|:--|:--|:--|
|name|poi名称，getPoiByName按此字段查询|-|
|text|poi显示文本|-|
|font|文字样式|'10px / 1 sans-serif'|
|labelOffset|文本偏移|[0,0]|
|icon|poi图标|-|
|iconSize|图标尺寸|[20,20]|
|anchor|图标相对中心点位置|[0.5, 0.5]居中|
|iconOffset|图标偏移量|[0, 0]|
|angle|图标旋转角度(0-360)|0|
|moveable|poi选中后，设置moveable=false可以阻止拖动|true|

### overlayOptions 覆盖层配置参数
参考 https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html
|属性|说明|默认值|
|:--|:--|:--|
|element|覆盖层处显示的dom|-|
|className|覆盖层包裹的样式class|-|
|offset|覆盖层像素偏移量|[0,0]|

### 地图事件
map.addEventListener(eventName,callback)
|事件名称|说明|回调参数|
|:--|:--|:--|
|map-load-start|地图加载前|-|
|map-load-end|地图加载完成|{detail:map实例}|
|poi-click|poi点击|{detail:{poi}}|
|map-click|地图点击|{detail:{poi,position}} 如果点击了空白处，poi为空|
|block-click|地图块点击(svg转json后才有)|{detail:{svg,position}} 如果点击了空白处，svg为空|
|modify-start|poi移动前|{detail:{poi,position}}|
|modify-end|poi移动后|{detail:{poi,position}}|

### Navigation 实例方法
|方法|说明|属性/方法参数|
|:--|:--|:--|
|new Navigation(paths, options)|构造函数|paths:path导航接口 coordinate_2d.coords, <br>options:导航配置参数,配置如下<br>lineArrowShow: true, // 显示线上箭头<br>lineArrowGap: 100, // 线上箭头间距px<br>lineArrowAnimate: false, // 箭头前进动画<br>lineArrowSpeed: 10, // 箭头前进动画速度<br>testNavShow: false, // 模拟导航显示箭头<br>testNavSpeed: 20, // 模拟导航前进速度<br>testNavCenter: false, // 模拟导航是否居中地图<br>testNavRotate: false, // 模拟导航是否旋转地图<br>testNavDiffAngle: 15, // 导航旋转超过角度才旋转（默认15°）<br>autoRecoveryExtend: false, // 操作地图，5秒不动后自动恢复extend<br>autoRecoveryDuration: 5000, // 操作地图，5秒不动后自动恢复extend|
|startNav(options)|开始导航|options:导航配置参数(同上)|
|stopNav()|暂停导航|-|
|scaleExtendCenter(padding, duration, callback)|居中并缩放导航路线区域|padding:路线区域距离容器边界padding[top, right, bottom, left], <br>duration:动画时长, <br>callback:动画完成的回调|
|getFirstCoordinate()|获取路线起点坐标|-|
|getLastCoordinate()|获取路线终点坐标|-|
|dispose()|销毁导航|-|

## Update

```shell
$ npm i @revai/screen-map@latest
```