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 ...
随机推荐
- mount ntfs 失败解决办法
在双系统中,ntfs可能会应为windows的缓存而挂载失败.可用下面命令修复. Use ntfsfix in the terminal, even if you can't access Windo ...
- 137.CPP自带异常
#include <iostream> #include <exception> using namespace std; //继承自带的异常 class sizeerror ...
- 132.try throw catch介绍
#include <iostream> using namespace std; //try尝试执行,抛出throw,throw之后语句不再执行 //catch处理throw的异常 voi ...
- 从零开始编写一个vue插件
title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...
- BOOL的getter方法
在代码中经常会看到这样的属性声明 @property (nonatomic,assign,getter = isRead)BOOL read; 这行代码的意思就是,声明一个BOOL类型的read,但是 ...
- POJ 3213 矩阵乘法(优化)
思路: 1.暴力出奇迹 n=1000 n^3矩阵乘法竟然能卡过...(Tips:不要乱写读入优化,这玩意儿加了超时,不加AC--) 2. 注意题目中的"最多只能有一个地方不一样,," ...
- SpringBoot(二) 主程序详解和配置文件如何配置
SpringBoot主程序详解 /** * @SpringBootApplication 来标注一个主程序类,说明这是一个Spring Boot应用 */ @SpringBootApplication ...
- Debian/Linux 下无线网卡驱动的安装
我的 PC 型号是 Acer V3-572G, 安装了 Debian 后, 发现只能通过有线网络上网, 无法识别无线网卡, 以下是解决的过程(不局限于此型号 PC): 在命令行键入 lspci , 得 ...
- RocketMQ学习笔记(2)----Broker的集群四种方式
RocketMQ推荐了几种Broker集群方式,这里的Slave不可写,但可读,类似于Mysql主备方式 1. 单个Master 这是一种风险比较大的集群方式,因为一旦Borker重启或宕机期间,将会 ...
- (2016北京集训十)【xsy1528】azelso - 概率期望dp
北京集训的题都是好题啊~~(于是我爆0了) 注意到一个重要的性质就是期望是线性的,也就是说每一段的期望步数可以直接加起来,那么dp求出每一段的期望就行了... 设$f_i$表示从$i$出发不回到$i$ ...