openlayers 扩展标绘

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

build

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

git clone https://github.com/dailiwei/color4.git
pnpm run dev
pnpm run build

Use

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

CDN

https://unpkg.com/color4/dist/color4.js
https://unpkg.com/color4/dist/color4.css

NPM

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

Examples

其他示例请参看 playground 文件夹

实例方法

plotDraw Methods

activate(type, params)

激活标绘工具

| key | type | desc | |:---------|:---------|:-------| | type | string | 标绘符号类型 | | params | Object | 标绘符号参数 |

type

标绘类型

type:

| key | type | desc | | :---------------------- | :--- |:----------| | color4.PlotTypes.ARC | string | 弓形 | | color4.PlotTypes.ELLIPSE | string | 椭圆 | | color4.PlotTypes.CURVE | string | 曲线 | | color4.PlotTypes.CLOSED_CURVE | string | 闭合曲面 | | color4.PlotTypes.LUNE | string | 弓形 | | color4.PlotTypes.SECTOR | string | 扇形 | | color4.PlotTypes.GATHERING_PLACE | string | 集结地 | | color4.PlotTypes.STRAIGHT_ARROW | string | 细直箭头 | | color4.PlotTypes.ASSAULT_DIRECTION | string | 粗单直箭头 | | color4.PlotTypes.ATTACK_ARROW | string | 进攻方向 | | color4.PlotTypes.TAILED_ATTACK_ARROW | string | 进攻方向（尾） | | color4.PlotTypes.SQUAD_COMBAT | string | 战斗行动 | | color4.PlotTypes.TAILED_SQUAD_COMBAT | string | 分队战斗行动（尾） | | color4.PlotTypes.FINE_ARROW | string | 粗单尖头箭头 | | color4.PlotTypes.CIRCLE | string | 圆 | | color4.PlotTypes.DOUBLE_ARROW | string | 双箭头 | | color4.PlotTypes.POLYLINE | string | 线 | | color4.PlotTypes.FREEHAND_LINE | string | 自由线 | | color4.PlotTypes.POLYGON | string | 面 | | color4.PlotTypes.FREEHAND_POLYGON | string | 自由面 | | color4.PlotTypes.RECTANGLE | string | 矩形 | | color4.PlotTypes.RectInclined1 | string | 斜矩形1 | | color4.PlotTypes.RectInclined2 | string | 斜矩形2 | | color4.PlotTypes.MARKER | string | 点 | | color4.PlotTypes.TEXTAREA | string | 文本框 |

deactivate()

取消绘制工具的激活状态

plotEdit Methods

activate(feature)

| key | type | desc | | :--- | :--- | :---------- | | feature | ol.Feature | 要激活的标绘符号 |

激活符号要素编辑

deactivate()

取消符号要素编辑状态

PlotUtils Methods

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

事件

plotDraw

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

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

drawStart

监听符号开始绘制

drawEnd

监听符号结束绘制

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

取消激活文本框编辑事件