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. vue 组件之间的传值

    父向子传值父组件 <v-footer :projectdat="dat"></v-footer> export default { data() { ret ...

  2. [雅礼NOIP2018集训 day4]

    感觉状态极差啊,今天居然爆零了 主要是以下原因: 1.又是T1看错题肝了两个小时,发现题意理解错误瞬间心态爆炸 2.T2交错了文件名 3.T3暴力子任务和正解(假的)混在一起,输出了两个答案 都想为自 ...

  3. C#调用webservice(一)

    最近一直在搞网络编程,这篇是关于webservice的,准备写两篇例子这篇是实现手机号码归宿地查询,下篇准备写实现机票查询. 这个网站(http://www.webxml.com.cn/zh_cn/i ...

  4. activity(工作流)初步学习记录

    1.概念 工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程自动进行,从而实现某个预期 ...

  5. POJ 3278 Catch That Cow【BFS】

    题意:给出n,k,其中n可以加1,可以减1,可以乘以2,问至少通过多少次变化使其变成k 可以先画出样例的部分状态空间树 可以知道搜索到的深度即为所需要的最小的变化次数 下面是学习的代码----@_@ ...

  6. 优动漫PAINT基础系列之图层模式

    在绘画软件优动漫PAINT中,笔刷工具属性中的消除锯齿变成灰色无法选择了?铅笔绘制没有压感?快来改改图层模式~ 优动漫PAINT下载:http://www.dongmansoft.com/xiazai ...

  7. 洛谷P3369 【模板】普通平衡树 01trie/骚操作

    Code: #include <cstdio> #include <algorithm> #include <cstring> #define setIO(s) f ...

  8. WebRTC | Failed to execute 'setLocalDescription' on 'RTCPeerConnection': Failed to parse SessionDescription. a=msid: Missing track ID in msid attribute.

    1.问题回放 使用如下代码获取局域网IP报错 (代码来源:https://github.com/diafygi/webrtc-ips 日期:2019-02-16) Uncaught (in promi ...

  9. 51nod 1526 分配笔名(Trie树+贪心)

    建出Trie树然后求出一个点子树中有多少笔名和真名.然后贪心匹配即可. #include<iostream> #include<cstring> #include<cst ...

  10. 纯净版linux (debian)挂载VirtualBox共享文件夹

    使用的虚拟机版本是:VirtualBox-5.2.8-121009 使用的linux版本是:Linux debian 4.9.0-7-amd64 tty 1. 开始配置 1.1:打开虚拟机设置,打开你 ...