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 ...
随机推荐
- [jzoj 4668] [NOIP2016提高A组模拟7.19] 腐败 解题报告(质数分类+慢速乘)
题目链接: http://172.16.0.132/senior/#main/show/4668 题目: 题解: 考虑把A数组里的每个元素分解质因数,对于每个质因数开一个vector存一下包含这个质因 ...
- VC6.0 设置动态链接库工程生成dll以及lib文件的位置
在"Projet"->"Settings..."的"Link"选项卡中 "Output file name"中设置 ...
- 在CentOS下安装tomcat并配置环境变量(改默认端口8080为8081)
不多说,直接上干货! 第一步:下载tomcat压缩包 http://archive.apache.org/dist/tomcat/tomcat-7/v7.0.73/bin/ 第二步:上传tomcat压 ...
- 3ds Max实例教程-顽皮的小孩
本教程介绍使用3ds Max制作设计一个顽皮的小孩,这个作品的灵感来源于作者的亲身经历,也是以真实人物为原型做出来这么一个小人. 作者: Claudius Vesting 使用软件:3ds Max,P ...
- scrapy框架学习
一.初窥Scrapy Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 其最初是为了 页面抓取 (更确切来说, 网 ...
- matlab Time-domain analysis 渐进式或者实时获取仿真值
首先准备一个传递函数sys, 然后使用lsim(sys,u,t,x0)函数(通用的时序分析的函数) u: The input u is an array having as many rows as ...
- centos 7.1安装frees witch
http://blog.sina.com.cn/s/blog_539d6e0c0102zgvm.html
- 通过nodeSelector配置项实现pod部署至指定node
Node节点添加标签 [root@node1 work]# kubectl label nodes node1 node=master --overwrite node/node1 labeled [ ...
- WPF 获取应用的所有窗口
原文:WPF 获取应用的所有窗口 本文告诉大家如何获取应用内的所有窗口,无论这些窗口有没显示 在 WPF 可以通过 Application.Current.Windows 列举应用的所有窗口 fore ...
- 题解 P3413 【SAC#1 - 萌数】
这道题刚开始正向思维,然后处理重复的时候咕咕了. 参考了@巨型方块 大佬的题解后AC了,在这里就说几个我觉得比较重要或是容易被忽略的点,然后补充一些跳过的证明. 这道题的状态可以设为$dp[i][j] ...