leaflet 如何绘制圆
方法1(根据指定的半径和中心点去绘制圆)
var polygon1 = new L.Circle([34, 108], 120000, {
color: 'red', //颜色
fillColor: '#f03',
fillOpacity: 0.4, //透明度
});
方法2(根据半径和中心点去构造polygon类型的圆)
var radius = 2;
//点集
var parts = [];
//计算圆的边缘所有点
for (var i = 0; i < 360; i++) {
var radians = (i + 1) * Math.PI / 180;
var circlePoint = [Math.cos(radians) * radius + 34, Math.sin(radians) * radius + 108];
parts[i] = circlePoint;
}
var polygon1 = L.polygon(parts, {
color: 'green'
});
方法3,(地图上绘制一点拖动鼠标动态绘制圆形)
function DrawCircle() {
var r = 0
var i = null
var tempCircle = new L.circle()
map.dragging.disable(); //将mousemove事件移动地图禁用
map.on('mousedown', onmouseDown);
map.on('mouseup', onmouseUp);
map.on('mousemove', onMove)
function onmouseDown(e) {
i = e.latlng
//确定圆心
}
function onMove(e) {
if (i) {
r = L.latLng(e.latlng).distanceTo(i)
tempCircle.setLatLng(i)
tempCircle.setRadius(r)
tempCircle.setStyle({
color: '#ff0000',
fillColor: '#ff0000',
fillOpacity: 1
})
map.addLayer(tempCircle)
}
}
function onmouseUp(e) {
r = L.latLng(e.latlng).distanceTo(i) //计算半径
L.circle(i, {
radius: r,
color: '#ff0000',
fillColor: '#ff0000',
fillOpacity: 1
}).addTo(map)
alert('圆心坐标为:' + i + ';半径为:' + r);
i = null
r = 0
map.dragging.enable();
}
}
方法4,(使用draw插件绘制圆)
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
var drawControl = new L.Control.Draw({
position: 'topleft',
draw: {
polyline: false,
polygon: false,
circle: {},
rectangle: false,
marker: false,
remove: true
},
edit: {
featureGroup: editableLayers,
remove: true
}
});
map.addControl(drawControl);
handleMapEvent(drawControl._container, map);
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
editableLayers.addLayer(layer);
});
leaflet 如何绘制圆的更多相关文章
- C# Graphic 绘制圆、三角形、椭圆、图片
在form和panel上可以绘制图形,线段,圆,文字,图形等等. 绘制代码必须放在OnPaint()函数里面,因为窗体刷新的时候,都会调用该函数,重新刷新所绘的图. 示例代码在Panel上绘制图形来简 ...
- canvas二:绘制圆和其他曲线
1.绘制圆 绘制圆是canvas里面不可缺少的功课,而且绘制圆在canvas中的用处很多,好嘞,开扯 绘制圆需要用到arc这个方法: arc(X坐标,Y坐标,半径,起始弧度,结束弧度,旋转方向): 弧 ...
- html5--5-8 绘制圆/弧
html5--5-8 绘制圆/弧 学习要点 掌握绘制圆弧的方法 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充) fil ...
- html5--5-7 绘制圆/弧
html5--5-7 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y ...
- html5--5-6 绘制圆/弧
html5--5-6 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y ...
- CAD交互绘制圆(网页版)
CAD绘制图像的过程中,画圆的情况是非常常见的,用户可以在控件视区点取任意一点做为圆心,再动态点取半径绘制圆. 主要用到函数说明: _DMxDrawX::DrawCircle 绘制一个圆.详细说明如下 ...
- CAD交互绘制圆(com接口)
CAD绘制图像的过程中,画圆的情况是非常常见的,用户可以在控件视区点取任意一点做为圆心,再动态点取半径绘制圆. 主要用到函数说明: _DMxDrawX::DrawCircle 绘制一个圆.详细说明如下 ...
- OpenGL(一)绘制圆、五角星、正弦曲线
OpenGL入门之"顶点":OpenGL规定,一个多边形必须是一个"凸多边形",即连接多边形上任意两点,其连线都在多边形内部.多边形可以由其边上的端点(这里可称 ...
- html+js+highcharts绘制圆饼图表的简单实例
下面我就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例.我觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随我过来看看吧 实例如下: 1 2 3 4 5 6 7 8 ...
随机推荐
- 空手套白狼,硬阅java字节码class文件
如下,是一些java字节码也就是原始的class文件,当应用部署到线上之后,我们能够看到的也就是这样的字样了.那么怎样解呢?就让我们一起,来解读解读字节码吧! Offset A B C D E F C ...
- java基础-2
java基础-2 面向对象 定义 面向对象是一种思维方式,相对于面向过程面向过程注重流程中的每一步,清楚流程中的每一个细节面向对象注重的是对象,有了对象就有对象的一届自己动手做--面向过程,找其 ...
- Django 数据聚合函数 annotate
统计各个分类下的文章数 2 周,3 日前 字数 3818 阅读 546 评论 21 在我们的博客侧边栏有分类列表,显示博客已有的全部文章分类.现在想在分类名后显示该分类下有多少篇文章,该怎么做呢?最优 ...
- 必须要会的 50 个 React 面试题
翻译:疯狂的技术宅 原文:www.edureka.co/blog/interv… 如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你.本文是你学习和面试 React 所需知识的完美指南. ...
- Django ListView实现分页
效果: url.py main-urls from django.urls import path,include urlpatterns = [ path('admin/', admin.site. ...
- tensorflow 1.0 学习:模型的保存与恢复(Saver)
将训练好的模型参数保存起来,以便以后进行验证或测试,这是我们经常要做的事情.tf里面提供模型保存的是tf.train.Saver()模块. 模型保存,先要创建一个Saver对象:如 saver=tf. ...
- Java单元测试(Junit+Mock+代码覆盖率)
微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...
- python的dir()和__dict__属性的区别
只要是有属性的数据对象(不一定是面向对象的对象实例,而是指具有数据类型的数据对象),都可以通过__dict__和dir()来显示数据对象的相关属性. __dict__可以看作是数据对象的名称空间,所以 ...
- Ansible剧本介绍及使用演示(week5_day2)--技术流ken
Ansible剧本编写说明 一. 缩进 yaml 的缩进要求比较严格.一定不能使用tab键 注意:编写yaml文件,就忘掉shell的tab吧. 二. 冒号 每个冒号后面一定要有一个空格 注意:1. ...
- Guid的生成和数据修整(去除空格和小写字符)
SqlServer实现 SELECT LOWER(LTRIM(RTRIM(REPLACE(NEWID(),'-','')))) NEWID()函数产生随机数,例如:F874153F-D99B-40A9 ...