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. 如何解决bib的一些问题

    胡老师留的大作业要求综述,因而有很多文献引用.但是当使用bibtex的方法,特别是中文文献的引用会遇到一些问题. 网上相关的解答有: http://blog.sciencenet.cn/blog-10 ...

  2. RGB颜色值与十六进制颜色码转换工具

    RGB颜色值转换成十六进制颜色码:      十六进制颜色码转换成RGB颜色值:     颜色码对照表 颜色 英文代码 形象描述 十六进制 RGB LightPink 浅粉红 #FFB6C1 255, ...

  3. 一袭白衣一 IDEA的破解安装以及汉化

    DEA是一款比eclipse用起来更好用的一款代码编辑器,本人之前也是一直在用eclipse来写代码,后来发现了IDEA用起来会更顺手,所以又转用IDEA了,今天给大家分享一下IDEA的下载安装破解以 ...

  4. 关于注意力机制(《Attention is all you need》)

    深度学习做NLP的方法,基本上都是先将句子分词,然后每个词转化为对应的词向量序列.(https://kexue.fm/archives/4765) 第一个思路是RNN层,递归进行,但是RNN无法很好地 ...

  5. 为什么maven 创建web工程不自动生成Deployment Descriptor:工程名

    上面图切换成下面图: 点击eclipse右上角,如下图红圈,然后在选择javaEE这样就切换成javaEE视图了 如果还是不能解决,相信这个链接对你有所帮助:https://www.cnblogs.c ...

  6. NOIp2018模拟赛四十二

    今天看标题终于回到了“NOIP模拟赛”,十分高兴啊! 然后一打开题目: ********** 所以今天又是一场NOIPlus模拟赛(微笑) 成绩:0+70+0=70 A题想了个贪心被myh两分钟cha ...

  7. 学习参考《父与子的编程之旅python【第二版】》高清中文版PDF+高清英文版PDF+源代码

    对于初步接触编程语言的朋友,推荐看一看<父与子的编程之旅第2版>,对于完全编程零基础的很友好! 图文并茂,过多的文字堆垒很容易让人产生厌倦情绪,也更容易让人产生放弃的想法.使用了大量插图, ...

  8. python学习笔记:第四天

    day04: 一.计算求值 num += 1 等价于 num = num + 1num -= 1 等价于 num = num - 1num *= 2 等价于 num = num * 2num /= 2 ...

  9. 紫书 例题8-16 UVa 1608 (递归)

    题意: 判断所给序列是否满足任意连续子序列中至少有一个出现一次的元素. 思路:在整体中找到一个只出现一次的元素, 然后在递归两边.因为两边的序列中有这个数那就满足要求, 所以就看剩下的序列漫步满足要求 ...

  10. How to enable wire logging for a java HttpURLConnection traffic?

    https://stackoverflow.com/questions/1445919/how-to-enable-wire-logging-for-a-java-httpurlconnection- ...