1.1.1 • Published 10 months ago

ol-plot-tool v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

openlayers 扩展标绘

CI npm version npm downloads JS gzip size GitHub stars GitHub license

标绘功能,支持openlayers5 / 6 / 7;同时也实现了一个简单的 Vue 组件,请查看 playground/vue3 使用,npm 发布的包为 npm version

build

重要: 如果想要使用 Github 上最新的源码,你需要自己构建。


git clone https://github.com/sakitam-fdd/ol-plot.git
pnpm run dev
pnpm run build

Use

new olPlot.(map) 初始化标绘绘制工具

CDN

https://unpkg.com/ol-plot/dist/ol-plot.js
https://unpkg.com/ol-plot/dist/ol-plot.css

NPM

npm install ol-plot --save
import 'ol-plot/dist/ol-plot.css'
import Plot form 'ol-plot'

Examples

site

demo

其他示例请参看 playground 文件夹

实例方法

plotDraw Methods

activate(type, params)

激活标绘工具

keytypedesc
typestring标绘符号类型
paramsObject标绘符号参数
type

标绘类型

type:
keytypedesc
olPlot.PlotTypes.ARCstring弓形
olPlot.PlotTypes.ELLIPSEstring椭圆
olPlot.PlotTypes.CURVEstring曲线
olPlot.PlotTypes.CLOSED_CURVEstring闭合曲面
olPlot.PlotTypes.LUNEstring弓形
olPlot.PlotTypes.SECTORstring扇形
olPlot.PlotTypes.GATHERING_PLACEstring集结地
olPlot.PlotTypes.STRAIGHT_ARROWstring细直箭头
olPlot.PlotTypes.ASSAULT_DIRECTIONstring粗单直箭头
olPlot.PlotTypes.ATTACK_ARROWstring进攻方向
olPlot.PlotTypes.TAILED_ATTACK_ARROWstring进攻方向(尾)
olPlot.PlotTypes.SQUAD_COMBATstring战斗行动
olPlot.PlotTypes.TAILED_SQUAD_COMBATstring分队战斗行动(尾)
olPlot.PlotTypes.FINE_ARROWstring粗单尖头箭头
olPlot.PlotTypes.CIRCLEstring
olPlot.PlotTypes.DOUBLE_ARROWstring双箭头
olPlot.PlotTypes.POLYLINEstring线
olPlot.PlotTypes.FREEHAND_LINEstring自由线
olPlot.PlotTypes.POLYGONstring
olPlot.PlotTypes.FREEHAND_POLYGONstring自由面
olPlot.PlotTypes.RECTANGLEstring矩形
olPlot.PlotTypes.RectInclined1string斜矩形1
olPlot.PlotTypes.RectInclined2string斜矩形2
olPlot.PlotTypes.MARKERstring
olPlot.PlotTypes.TEXTAREAstring文本框

deactivate()

取消绘制工具的激活状态

plotEdit Methods

activate(feature)

keytypedesc
featureol.Feature要激活的标绘符号

激活符号要素编辑

deactivate()

取消符号要素编辑状态

PlotUtils Methods

方法说明参数
getFeatures序列化地图上所有符号--
addFeatures反序列化保存的符号features : Array
removeAllFeatures删除所有符号--

事件

plotDraw

plot.plotDraw.on('drawStart', (e) => {
  console.log(e);
});

plot.plotDraw.on('drawEnd', onDrawEnd);

drawStart

监听符号开始绘制,通过事件类型 plotType 判断是哪种标绘类型

drawEnd

监听符号结束绘制,通过事件类型 plotType 判断是哪种标绘类型

plotEdit

plot.plotEdit.on('activePlotChange', (e) => {
  console.log(e);
});

plot.plotEdit.on('deactivatePlot', (e) => {
  console.log(e);
});

activePlotChange

激活编辑状态的要素变化事件

deactivatePlot

监听要素结束编辑状态

plot 实例事件

比较特殊,3.0 版本是绑定在 map 实例上的,从 4.0 版本起需要绑定在 plot 实例上。

plot.on('activeTextArea', (e) => {
  console.log(e);
});

plot.on('deactivateTextArea', (e) => {
  console.log(e);
});

activeTextArea

激活文本框编辑事件

deactivateTextArea

取消激活文本框编辑事件

1.1.1

10 months ago

1.1.0

10 months ago

1.0.9

10 months ago

1.0.8

10 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago