@xizher/ol
v1.2.2
Published
基于Openlayers的业务功能型二次开发地图API
Downloads
10
Readme
@xizher/ol
介绍
基于Openlayers的业务功能型二次开发地图库,集成包括地图底图控制、地图鼠标样式控制等功能,这些功能可通过插件方式按需引入到地图库统一入口类WebMap中。
SDK文档入口:https://xizher.github.io/xizher-ol/docs
安装
npm install @xizher/ol
使用
import {
WebMap,
MapCursor,
Basemap,
MapElementDisplay,
MapTools,
LayerOperation,
} from '@xizher/ol'
const webMap = new WebMap('ol-container')
.use(new Basemap())
.use(new MapCursor())
.use(new MapElementDisplay())
.use(new MapTools())
.use(new LayerOperation())
.mount() // 当document渲染完成时执行 mount
// 例子:底图控制
webMap.basemap.setBasemap('xxx')
webMap.basemap.setVisible(true)
// ...
// 例子:地图鼠标样式控制
webMap.mapCursor.setCursor('xxx')
// ...
// 例子:地图工具链调用
webMap.mapTools.setMapTool('xxx')
// ...
// 例子:获取图层对象
webMap.layerOperation.getLayerByName('xxx')
// ...
插件
Basemap 底图控制插件
默认底图项:
- 天地图影像
- 天地图影像含注记
- 天地图矢量
- 天地图矢量含注记
- 天地图地形
- 天地图地形含注记
- 彩色地图
- 灰色地图
- 蓝黑色地图
- 暖色地图
监听项:
'change': { key: string, visible: boolean }
→ 当前显示底图项变化或底图可见性变化触发'change:key': { key: string }
→ 当前显示底图项变化触发'change:visible': { visible: boolean }
→ 底图可见性变化触发
MapCursor 地图鼠标样式控制插件
鼠标样式可选项
'default'
'pan'
'panning'
'wait'
'draw'
'zoomin'
'zoomout'
'clear'
监听项:
'change': { type: MapCursorType }
→ 当前地图鼠标样式变化触发
MapElementDisplay 图元控制插件
MapTools 地图工具链插件
默认工具可选项:
default
draw-point
draw-line
draw-line-faster
draw-polyline
draw-polygon
draw-rectangle
draw-rectangle-faster
draw-circle
draw-circle-faster
zoom-in
zoom-out
zoom-in-rect
zoom-out-rect
mark
mark-remove
measure
measure-remove
zoom-home
fullscreen
fullmap
clear
hit-test