Leaflet绘制多边形
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绘制多边形的更多相关文章
- leaflet简单例子,绘制多边形
var crs = L.CRS.EPSG900913; var map = L.map('map', { crs: crs, width: '100%', height: '100%', maxZoo ...
- 用线框模式绘制多边形 glPolygonMode
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); glBegin(GL_TRIANGLES);//开始以g_ViewMode模式绘制 glColor3ub(182. ...
- [WebGL入门]十四,绘制多边形
注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...
- canvas绘制多边形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- leaflet计算多边形面积
上一篇介绍了使用leaflet绘制圆形,那如何计算圆形的面积呢? 1.使用数学公式计算,绘制好圆形后,获取中心点以及半径即可 2.使用第三方工具计算,如turf.js. 这里turf的area方法入参 ...
- 【Silverlight】Bing Maps学习系列(五):绘制多边形(Polygon)图形(转)
[Silverlight]Bing Maps学习系列(五):绘制多边形(Polygon)图形 Bing Maps Silverlight Control支持用户自定义绘制多边形(Polygon)图形, ...
- 浅谈使用canvas绘制多边形
本文主要使用坐标轴的使用来绘制多边形,点位则都是在y轴上寻找,这种方法能够更好的理解图形与修改. //id为html里canvas标签的属性id: //x,y为坐标轴的起始位置,因为canvas默认坐 ...
- JS实现鼠标点击爱心&绘制多边形&每日一言功能
本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...
- [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 ...
随机推荐
- 搞定ubuntu下环境变量的配置
Ubuntu Linux系统环境变量配置文件: /etc/profile : 在登录时,操作系统定制用户环境时使用的第一个文件 ,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. ...
- (二)Ribbon(负载均衡的客户端)+Rest
前面讲了服务的注册与发现,微服务项目会把项目的各个业务需求划分成几个模块来单独提供服务,各服务间的调用都是采用Http Restful来实现,但是在SpringClound中服务间的调用有两种方式:一 ...
- 机器学习(十一) 支持向量机 SVM(下)
支持向量机通过某非线性变换 φ( x) ,将输入空间映射到高维特征空间.特征空间的维数可能非常高.如果支持向量机的求解只用到内积运算,而在低维输入空间又存在某个函数 K(x, x′) ,它恰好等于在高 ...
- 手工清理win7系统C盘的技巧
在我们日常使用电脑的过程中,随着使用的时候越久,大家就会发现电脑的运行速度变的越慢了,大家都知道很多系统东西一般都会安装在C盘,系统在运行的时候就会不断的产生垃圾文件以及其他我们根本用不到的文件,这样 ...
- javascript 精确加减乘除
最近一个项目中要使用 JS 实现自动计算的功能,本以为只是实现简单的加.减.乘.除就可以了,于是三下五除二做完了. 正当我窃喜的时候,发现问题了... 进行一些浮点数运算时,计算结果都是让我大跌眼镜啊 ...
- hdu 6082 - 完全背包,打表。
2017-08-06 15:02:50 Accepted 1003 187 MS 2168 K G++ redips 对背包有了进一步的认识 ----------------------------- ...
- HDU 3015 Disharmony Trees 【 树状数组 】
题意:给出n棵树,给出横坐标x,还有它们的高度h,先按照横坐标排序,则它们的横坐标记为xx, 再按照它们的高度排序,记为hh 两颗树的差异度为 abs(xx[i] - xx[j]) * min(hh[ ...
- 路飞学城-Python开发-第一章
# 基础需求: # 让用户输入用户名密码 # 认证成功后显示欢迎信息 # 输错三次后退出程序 username = 'pandaboy' password = ' def Login(username ...
- (2016北京集训十)【xsy1530】小Q与内存
一道很有意思的神题~ 暴力平衡树的复杂度很对(并不),但是$2^{30}$的空间一脸屎 这题的正解是一个类似线段树的数据结构,我觉得很有创新性Orz 首先可以想到一种暴力就是用一个点代表一个区间,然后 ...
- 15条JavaScript最佳实践【转】
本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深). ...