@rev-ai/screen-map

v0.0.1

Published

2 years ago

基于openlayers封装的地图管理工具

Downloads

0High
0Medium
0Low

hujingn

openlayers ol screen-map map

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

|方法|说明|属性/方法参数| |:--|:--|:--| |new ScreenMap(container)|构造函数|container地图容器| |addMapFromSvg(svgPath, svgAlignParams, mapConfig)|使用svg初始化地图|svgPath:svg地图, svgAlignParams:对齐参数, mapConfig:地图配置参考ol.Map/View的配置, 如果配置了convertToJson=true将svg转换成json后渲染，效果同addMapFromJson| |addMapFromJson(jsonPath, svgAlignParams, mapConfig)|使用json初始化地图|jsonPath:json地图, svgAlignParams:对齐参数, mapConfig:地图配置参考ol.Map/View的配置,| |addLayer(layerOptions, layerKey)|添加一个图层|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:配置参数(参考), layerKey:指定图层| |removePoi(poi)|删除一个poi|poi:poiId或者poi对象| |getPoiByName(name)|根据poi配置name字段查找poi|name:poi配置的name字段| |addOverlay(overlayOptions)|根据overlay配置创建覆盖层|overlayOptions:overlay配置(参考)| |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:地图边界(为空时取地图边界), options:配置参数{duration:动画时长, padding:边界距离容器的padding[top, right, bottom, left], callback: 成功回调}| |scaleExtendCenter(padding, duration, callback)|居中并缩放地图底图区域(fit方法的简化版)|padding:边界距离容器的padding[top, right, bottom, left], duration:duration:动画时长, callback: 成功回调| |animate(options, callback)|执行一个地图动画|options:参考ol.View.animate, {center,zoom,resolution,rotation,duration}, callback:动画完成的回调| |convertPositionToCoordinate(position)|工具类：基于对齐配置，3D坐标转换成2D地图坐标|position:3D坐标| |convertCoordinateToPosition(coordinate)|工具类：基于对齐配置，2D地图坐标转换成3D坐标|coordinate:2D坐标| |addNavigation(nav)|添加导航路线控制|nav:导航路线对象(参考)| |removeNavigation(nav)|删除导航路线控制|nav:导航路线对象| |setRender3D(options, layerKey)|设置图层的3D渲染|options:{height: 高度50, defaultHeight: 默认高度30, duration: 动画时长1000}, layerKey:需要渲染的图层id，不传默认svg底图| |dispose()|销毁地图|-|

POI实例方法

layerOptions 图层配置参数

poiOptions POI配置参数

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