sakitam-fdd/ol-plot

:art: | openalyers 3 / 4 / 5 / 6 / 7 扩展标绘

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)

激活标绘工具

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

type

标绘类型

type:

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

监听符号开始绘制，通过事件类型 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

取消激活文本框编辑事件

ol-plot's Issues

v3版本怎样修改绘制图形的填充色

一个新军标的问题

博主，您好。看了您的项目，非常崇拜您。我最近再研究一个新的军标，如以下的图片。我搜索了很多的资料但是比较可惜暂时还没有解决如何绘制该曲线的问题。非常希望能和您一起交流。这是我的qq：2551935684

绘制的point 点，根据getFeatures的geoJson数据不能复现图像，其他的可以

"ol-plot": "^4.1.3",

function getFeatures() {
const features = plot.plotUtils.getFeatures();
console.log(JSON.stringify(features));
plot.plotUtils.removeAllFeatures();
plot.plotEdit.deactivate();
plot.plotUtils.addFeatures(features);
}
function addFeatures() {
// debugger;
// plot.plotUtils.removeAllFeatures();
// plot.plotEdit.deactivate();
plot.plotUtils.addFeatures(data);
}

复现数据后不显示point

vue2，绘制完的图形不能编辑

1.vue2，node版本：16，绘制完图形，没有周围的小点，无法编辑
2.vue3.2，vite，node版本16，绘制完图形，无法拖动。

颜色和透明度

请问第一个example是否有开源的代码 请问怎么修改颜色 感谢

I want to know ol-plot how to use in OL5

I don't kow how use plot in a VUE project,and openlayers i am use 5.3.1,any can help me?

如何在绘制图形前，动态设置颜色

例子中的颜色设置是在已绘制后，可以分别设置颜色，请问如何在绘制图形前，动态设置颜色，绘制的时候就是选择的颜色

画完图形后，某些图形缺少了可编辑点

图中，钳图，顶端两个可编辑点缺失。鼠标离开后，重新聚焦可编辑点能出来。

v1.0.0版本中，打包的ol-plot.esm.js导入到vue2

有文档吗

谢谢

如何用于已经封装好的Map组件里

大佬你好，如题；我用的vue2，然后用的别人封装好的ol相关的Map组件，ol已经打包在组件里，然后组件无法修改，有暴露出map对象；我一开始直接引入ol-plot，然后把组件提供的map对象传入，结果报错“传入的不是地图对象！”，这种情况咋处理。望大佬能提点一二【抱拳】

标绘时由于缺失跟随鼠标移动的圆圈，会导致点击绘制时触发底下图层的点击事件

如题

Openlayers地图往右或者左多拖拽几次，经度超过了180

Openlayers地图往右或者左多拖拽几次，经度超过了180了都，好像不会自动计算经纬度，然后导致绘制的经纬度都是180+的，

绘制的线无法拖动移动位置

npm 安装的话， 线可以整体移动位置， 但鼠标的poiniter curser不是move。
如果是直接引入的dist里的js， 线会无法整体移动。 我用的master分支最新打包的dist测试的。

请问 是否支持 ol5

请问 是否支持 ol5 ，或者什么时候能支持呢？

有leaflet版本扩展标绘吗

请问有leaflet版本扩展标绘吗，或者后续有计划吗

v4.1.9 矩形无效、气泡框绘制异常

版本：4.1.9
问题：
1.矩形无效
2.气泡框绘制完仍然可以继续绘制
3.气泡框绘制大小最后一步单击有时候无效，需要停顿后单击或者双击才有效

npm是否要更新下？

样列发现有些代码在npm中没有更新。如:
PlotTextBox类中
on(content, 'focus', this.handleFocus_.bind(this))
on(content, 'blur', this.handleBlur_.bind(this))
这些事件。

请问如何取消激活标绘工具？

如题，感谢

master版本没有src目录，无法编译

请问为何v3版本中已绘制的图形不能编辑，仅能拖动？

import { Point as $Point } from 'ol/geom' 是不是不应该这么写啊 报错啊 引入后

文本标绘问题

1、新绘制一个文本时，文本框无法正常失去焦点，导致标绘的其他图形不能被选中
2、再拖动文本框时，经常出现文本框随鼠标移动的情况，且无法取消
3、标绘的文本在地图导出为图片时不显示

版本：ol-v5.3.3 ol-plot-4.1.3

请问是否考虑增加单个标绘删除功能？

plotDraw.activate()能否将feature对象返回，用于删除，亦或是直接返回删除方法