@rev-ai/screen-map v0.0.1

screen-map

Screen Map

Install

# $ 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

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实例方法

POI实例方法

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配置参数

其他配置参考 文本配置：https://openlayers.org/en/latest/apidoc/module-ol_style_Text-Text.html 图标配置：https://openlayers.org/en/latest/apidoc/module-ol_style_Icon-Icon.html |属性|说明|默认值| |:--|:--|:--| |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 实例方法

Update

$ npm i @revai/screen-map@latest