虽使用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获取绘制多边形的顶点坐标的更多相关文章

  1. 不规则形状的Ifc构件顶点坐标获取

    不规则形状的Ifc构件顶点坐标获取 今天有人问我,ifc构件的顶点坐标怎么获取,自己前年的时候写过类似的程序,但有点记不清了,最近一直用C++解析ifc,慎重起见,还是重新再写一次,java版本的获取 ...

  2. [WebGL入门]十四,绘制多边形

    注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...

  3. 【Silverlight】Bing Maps学习系列(五):绘制多边形(Polygon)图形(转)

    [Silverlight]Bing Maps学习系列(五):绘制多边形(Polygon)图形 Bing Maps Silverlight Control支持用户自定义绘制多边形(Polygon)图形, ...

  4. JS实现鼠标点击爱心&绘制多边形&每日一言功能

    本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...

  5. canvas绘制多边形

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Unity3D之Mesh(四)绘制多边形

    来自https://www.cnblogs.com/JLZT1223/p/6086191.html 1. 总的来说绘制平面的思想十分简单,就是将需要的平面拆分成几个三角形然后进行绘制就可以啦,主要的思 ...

  7. Unity动态构建mesh绘制多边形算法流程分析和实践

    前言 先说一下,写这篇博文的动机,原文的博主代码写的十分潇洒,以至于代码说明和注释都没有,最近恰逢看到,所以以此博文来分析其中的算法和流程 参考博文:https://blog.csdn.net/lin ...

  8. Canvas:绘制多边形

    前言 CanvasRenderingContext2D 没有提供绘制多边形的函数,所以只能由我们自己来实现绘制多边形的函数.以六边形为基础,需要用到三角函数:sin 和 cos. 点 A 坐标 (一) ...

  9. osg::NodeVisitor中计算一个节点对应的世界变换矩阵、法向量、顶点坐标

    class MyNodeVisitor:public osg::NodeVisitor { pulic: MyNodeVisitor():osg::NodeVisitor(osg::NodeVisit ...

  10. 用线框模式绘制多边形 glPolygonMode

    glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); glBegin(GL_TRIANGLES);//开始以g_ViewMode模式绘制 glColor3ub(182. ...

随机推荐

  1. [网鼎杯 2018]Fakebook

    1.解题过程 1.sql注入 访问web页面有一个login和join ![1](https://raw.githubusercontent.com/lanchuangdexingjian/Blog- ...

  2. RTE2021 回顾丨HDR 技术产品实践与探索

    本文整理自 OPPO HDR 研发负责人熊磊,在 RTE2021 实时互联网大会上的演讲.他通过介绍 HDR 视频标准与生态.关键技术.发展方向三部分,分享了在移动端 HDR 视频的落地情况以及技术细 ...

  3. SpringBoot 整合Quartz 定时任务框架

    更多内容,前往 IT-BLOG 一.Scheduled 定时任务 [1]添加 Scheduled相关依赖,它是 Spring自带的一个 jar包因此引入 Spring的依赖: 1 <depend ...

  4. wx相关

    1.vue图片预览放大 https://www.jianshu.com/p/e3350aa1b0d0 2.js图片文件格式的转换 https://www.jianshu.com/p/ea757f90b ...

  5. 在Vue中发起axios请求成功,却被catch捕捉返回Network Error

    前端发起请求成功,后台接收处理返回,却被axios的catch捕获,没有走then函数. 最后添加了headers配置成功解决,如上,附上axios接口配置中文文档:axios中文文档|axios中文 ...

  6. [软件体系结构/架构]零拷贝技术(Zero-copy)[转发]

    0 前言 近期遇到难题:1个大数据集的查询导出API,因从数据库查询后占用内存极大,每次调用将消耗近100MB的JVM内存资源.故现需考虑研究和应用零拷贝技术. 如下全文摘自: 看一遍就理解:零拷贝原 ...

  7. [Windows/Linux]Linux下的正斜杠"/"和"\"的区别 [转载]

    执行某一条Linux命令时,遇到了此问题,甚为不解.[文由] 本篇属于全文转载自: Linux下的正斜杠"/"和""的区别 - 博客园 >>> ...

  8. odoo 开发入门教程系列-添加修饰

    添加修饰 我们的房地产模块现在从商业角度来看是有意义的.我们创建了特定的视图,添加了几个操作按钮和约束.然而,我们的用户界面仍然有点粗糙.我们希望为列表视图添加一些颜色,并使一些字段和按钮有条件地消失 ...

  9. 粘包,自定义协议,struct模块,粘包解决终极大招

    粘包: 1.粘包问题出现的原因: (udp不会出现粘包问题) 1.1.tcp是流式协议,数据像水流一样黏在一起,没有任何边界区分 1.2.收数据没收干净,有残留,就会下一次结果混淆在一起去(客户端接受 ...

  10. Yii初学者必看-yii 表单验证规则

    对yii深入了解总结出:希望对初学者有些帮助 Active Record (AR) 是一个流行的 对象-关系映射 (ORM) 技术. 每个 AR 类代表一个数据表(或视图),数据表(或视图)的列在 A ...