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 6087] [GDOI2019模拟2019.3.26] 获取名额 解题报告 (泰勒展开+RMQ+精度)
题目链接: https://jzoj.net/senior/#main/show/6087 题目: 题解: 只需要统计$\prod_{i=l}^r (1-\frac{a_i}{x})$ =$exp(\ ...
- 关于Tool接口--------hadoop接口:extends Configured implements Tool 和 ToolRunner.run
我们在写Hadoop--map/reduce程序时,遇到使用按文件url来分析文件----------多表连接的DistributedCache方式,看不懂使用extends Configured i ...
- (转载) Android开发mac /dev/kvm is not found
Android开发mac /dev/kvm is not found 标签: KVMAndroid开发KVM is not found芒果Android芒果iOS 2016-10-29 16:31 2 ...
- JavaScript学习——表格的隔行换色+高亮显示
1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...
- MySQL存储过程和自定义函数、Navicat for mysql、创建存储过程和函数、调用存储过程和函数的区别
1 MySQL存储过程和函数 过程和函数,它们被编译后保存在数据库中,称为持久性存储模块(Persistent Stored Module,PSM),可以反复调用,运行速度快. 1.1 存储过程 存储 ...
- LA3231 Fair Share 二分_网络流
Code: #include<cstdio> #include<vector> #include<queue> #include<cstring> #i ...
- ArrayList的使用方法
1.什么是ArrayList ArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处: 动态的增加和减少元素 实现了ICollection和I ...
- [ZJOI2015]幻想乡战略游戏(点分树)
题意自己看... 思路 没想到今(昨)天刷着刷着点分治的水题,就刷出来了一个点分树... 然后就疯狂地找题解,代码,最后终于把它给弄懂了. 点分树——动态点分治,对于此题来说,我们设u为当前的补给站位 ...
- 关于vue事件监听的一个问题
由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...
- POJ 3207 Ikki's Story IV - Panda's Trick(2-sat)
POJ 3207 Ikki's Story IV - Panda's Trick id=3207" target="_blank" style=""& ...