ol-plot v4.1.10

openlayers 扩展标绘

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

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

其他示例请参看 playground 文件夹

实例方法

plotDraw Methods

activate(type, params)

激活标绘工具

type

标绘类型

type:

deactivate()

取消绘制工具的激活状态

plotEdit Methods

activate(feature)

激活符号要素编辑

deactivate()

取消符号要素编辑状态

PlotUtils Methods

事件

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

取消激活文本框编辑事件