this.map = L.map('map').setView([51.505, -0.09], 13);

drawPolygon = () => {
let points = []; const polygon = new L.Polygon(points);
this.map.addLayer(polygon); this.map.on('mousedown', e => {
points.push([e.latlng.lat, e.latlng.lng]); this.map.on('mousemove', event => {
polygon.setLatLngs([...points,[event.latlng.lat, event.latlng.lng]])
});
}); this.map.on('dblclick', () => {
if (points.length) {
this.map.off('mousemove');
points = [];
}
});
};

Leaflet绘制多边形的更多相关文章

  1. leaflet简单例子,绘制多边形

    var crs = L.CRS.EPSG900913; var map = L.map('map', { crs: crs, width: '100%', height: '100%', maxZoo ...

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

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

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

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

  4. canvas绘制多边形

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

  5. leaflet计算多边形面积

    上一篇介绍了使用leaflet绘制圆形,那如何计算圆形的面积呢? 1.使用数学公式计算,绘制好圆形后,获取中心点以及半径即可 2.使用第三方工具计算,如turf.js. 这里turf的area方法入参 ...

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

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

  7. 浅谈使用canvas绘制多边形

    本文主要使用坐标轴的使用来绘制多边形,点位则都是在y轴上寻找,这种方法能够更好的理解图形与修改. //id为html里canvas标签的属性id: //x,y为坐标轴的起始位置,因为canvas默认坐 ...

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

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

  9. [javascript svg fill stroke stroke-width points polygon属性讲解] svg fill stroke stroke-width points polygon绘制多边形属性并且演示polyline和polygon区别讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

随机推荐

  1. Python入门机器学习

    如何通过Python入门机器学习 我们都知道机器学习是一门综合性极强的研究课题,对数学知识要求很高.因此,对于非学术研究专业的程序员,如果希望能入门机器学习,最好的方向还是从实践触发. 我了解到Pyt ...

  2. Linux系统安装Redis数据库

    Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...

  3. Git 连接细节

    Git 连接细节 首先创建Git 账号 https://github.com/ 下载Git https://git-scm.com/downloads 新建远程仓库 SSH keys : 打开 Git ...

  4. spm总体说明

    目录 1.如何工作 2.何时使用 1.如何工作 sql plan baseline 是一个关联sql 语句的对象,设计会影响查询优化器生成执行计划,更具体的说,一个sql baseline包含其中的一 ...

  5. ASP.NET使用MergeInto做数据同步,同步SQLSERVER不同数据库的相同表结构的数据

    public string SynchronousData() { ReturnJson Rejson = new ReturnJson(); //将WebConfig中的数据库连接name中的值写进 ...

  6. HDU 1505 City Game【DP】

    题意:是二维的1506,即在1506的基础上,再加一个for循环,即从第一行到最后一行再扫一遍--- 自己写的时候,输入的方法不对---发现输不出结果,后来看了别人的----@_@发现是将字母和空格当 ...

  7. QT+OpenCV进行图像采集最小时延能够达到20ms

    得到“算法高性能”项目的支持,目前成功地在Win10上运行WB2,感觉目前的代码速度慢.响应慢.CPU占用比例高.这种情况下3399上能够运行,说明这个平台已经是很强的了.下一步,首先在Windows ...

  8. docker环境下mysql参数修改

    原文:docker环境下mysql参数修改 需要修改log_bin为on,看了好几个博客说都需要删掉容器重新生成,然而并非如此, 我们可以用docker cp 命令将docker的文件"下载 ...

  9. Java基础学习总结(8)——super关键字

    一.super关键字 在JAVA类中使用super来引用父类的成分,用this来引用当前对象,如果一个类从另外一个类继承,我们new这个子类的实例对象的时候,这个子类对象里面会有一个父类对象.怎么去引 ...

  10. TOJ 3517 The longest athletic track

    3517.   The longest athletic track Time Limit: 1.0 Seconds   Memory Limit: 65536KTotal Runs: 880   A ...