openlayers获取绘制多边形的顶点坐标
虽使用Interaction无数次,进行图形绘制与用户交互等,但当需要获取绘制图形的顶点坐标时还是不晓得咋弄?
都知道在绘制完成后回调中能获取到当前的event对象draw.on('drawend', function(e) {})
而这个对象中就能拿到feature,根据这个就可以找到如下feature api , 踏又可以通过getGeometry得到对应的polygon
根据上面获得了polygon, so再找到polygon api ,他就有一个getCoordinates的方法
根据上面顺藤摸瓜就可以得出如下操作—>
具体操作方法是这样的
1、画笔初始化方法
/**
* 画笔初始化
*/
drawPrepare() {
const source = new VectorSource()
const vector = new VectorLayer({
source: source,
style: new Style({
fill: new Fill({
color: 'rgba(255,218,185, 0.4)'
}),
stroke: new Stroke({
color: '#ffcc33',
width: 2
}),
image: new Circle({
radius: 7,
fill: new Fill({
color: '#ffcc33'
})
})
})
})
this.map.addLayer(vector) var modify = new Modify({
source: source
})
this.map.addInteraction(modify)
this.sourceOfPolygon = source
},
2、执行绘制方法
/**
* 执行绘制
*/
drawPattern() {
const _self = this
const source = this.sourceOfPolygon
const draw = new Draw({
source: source,
type: 'Polygon'
}) // 添加 interaction
this.map.addInteraction(draw)
const snap = new Snap({
source: source
}) // 添加 snap
this.map.addInteraction(snap) draw.on('drawend', function(e) {
const geometry = e.feature.getGeometry()
const corrdinates = geometry.getCoordinates()
console.log(corrdinates)
// 清除画笔
_self.map.removeInteraction(draw)
_self.map.removeInteraction(snap)
})
}
}
ok 顶点坐标获取到了接下来就是业务逻辑了…
openlayers获取绘制多边形的顶点坐标的更多相关文章
- 不规则形状的Ifc构件顶点坐标获取
不规则形状的Ifc构件顶点坐标获取 今天有人问我,ifc构件的顶点坐标怎么获取,自己前年的时候写过类似的程序,但有点记不清了,最近一直用C++解析ifc,慎重起见,还是重新再写一次,java版本的获取 ...
- [WebGL入门]十四,绘制多边形
注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...
- 【Silverlight】Bing Maps学习系列(五):绘制多边形(Polygon)图形(转)
[Silverlight]Bing Maps学习系列(五):绘制多边形(Polygon)图形 Bing Maps Silverlight Control支持用户自定义绘制多边形(Polygon)图形, ...
- JS实现鼠标点击爱心&绘制多边形&每日一言功能
本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...
- canvas绘制多边形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Unity3D之Mesh(四)绘制多边形
来自https://www.cnblogs.com/JLZT1223/p/6086191.html 1. 总的来说绘制平面的思想十分简单,就是将需要的平面拆分成几个三角形然后进行绘制就可以啦,主要的思 ...
- Unity动态构建mesh绘制多边形算法流程分析和实践
前言 先说一下,写这篇博文的动机,原文的博主代码写的十分潇洒,以至于代码说明和注释都没有,最近恰逢看到,所以以此博文来分析其中的算法和流程 参考博文:https://blog.csdn.net/lin ...
- Canvas:绘制多边形
前言 CanvasRenderingContext2D 没有提供绘制多边形的函数,所以只能由我们自己来实现绘制多边形的函数.以六边形为基础,需要用到三角函数:sin 和 cos. 点 A 坐标 (一) ...
- osg::NodeVisitor中计算一个节点对应的世界变换矩阵、法向量、顶点坐标
class MyNodeVisitor:public osg::NodeVisitor { pulic: MyNodeVisitor():osg::NodeVisitor(osg::NodeVisit ...
- 用线框模式绘制多边形 glPolygonMode
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); glBegin(GL_TRIANGLES);//开始以g_ViewMode模式绘制 glColor3ub(182. ...
随机推荐
- NET 8 预览版 2 亮点是Blazor
.NET 团队在2023年3月14日发布了.NET 8预览版2,博客文章地址:https://devblogs.microsoft.com/dotnet/announcing-dotnet-8-pre ...
- 相同基准点的多个rvt BIM模型数据配准后位置有错位偏差问题处理
场景:提供的bim模型数据包含多个rvt格式数据,这些数据具有相同的基准点,如: 在使用ArcGIS Pro处理了其中两份rvt格式数据(建筑和给排水),发布后在前端展示发现数据错位: 红色管线的给排 ...
- [JavaScript]JS屏蔽浏览器右键菜单/粘贴/复制/剪切/选中 [转载]
前两天在解决一个项目缺陷时,突发感兴趣,了解一下~ 1 JS事件 document.oncontextmenu // 右键菜单 document.onpaste //粘贴 document.oncop ...
- [Maven]探究settings.xml
1 settings.xml的配置模块 1-1 localRepository The path to the local repository maven will use to store art ...
- SMT贴片加工钢网工艺制作方法
smt贴片加工过程中,首先要进行锡膏印刷,而锡膏印刷的工作原理就是用机器刮刀将锡膏推送到钢网的孔洞中,使锡膏与pcb板的电子元器件接触,为下一步焊接做准备.钢网的作用就是与pcb板焊盘位置固定,使锡膏 ...
- CRC(Cyclic Redundancy Check)
CRC(循环冗余校验) [参考资料] https://en.wikipedia.org/wiki/Cyclic_redundancy_check https://wiki.segger.com/CRC ...
- 注解:@RequiredArgsConstructor、 @Validated、 @Valid、 @Lazy
1. lombok注解:@RequiredArgsConstructor Spring 依赖注入方式 1.通过 @Autowire.@Resource 等注解注入, 2.通过构造器的方式进行依赖注入. ...
- 使用扩展函数方式,在Winform界面中快捷的绑定树形列表TreeList控件和TreeListLookUpEdit控件
在一些字典绑定中,往往为了方便展示详细数据,需要把一些结构树展现在树列表TreeList控件中或者下拉列表的树形控件TreeListLookUpEdit控件中,为了快速的处理数据的绑定操作,比较每次使 ...
- AspNetCore 成长杂记(一):JWT授权鉴权之生成JWT(其二)
引子 前面说了用第三方类库生成JWT的故事,给我带来了很大的方便,并且我也承诺要写一篇用常规方法生成JWT的文章(一般都是用微软官方的类库),因此才有了这篇文章. 另外,在前面的文章中,我要纠正一下一 ...
- 笔记:C++学习之旅---关联容器
笔记:C++学习之旅---关联容器 关联容器和顺序容器有着根本的不同:关联容器中的元素是按关键字来保存和访问的.与之相对,顺序容器中的元素是按它们在容器中的位置来顺序保存和访问的. ...