方法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 如何绘制圆的更多相关文章

  1. C# Graphic 绘制圆、三角形、椭圆、图片

    在form和panel上可以绘制图形,线段,圆,文字,图形等等. 绘制代码必须放在OnPaint()函数里面,因为窗体刷新的时候,都会调用该函数,重新刷新所绘的图. 示例代码在Panel上绘制图形来简 ...

  2. canvas二:绘制圆和其他曲线

    1.绘制圆 绘制圆是canvas里面不可缺少的功课,而且绘制圆在canvas中的用处很多,好嘞,开扯 绘制圆需要用到arc这个方法: arc(X坐标,Y坐标,半径,起始弧度,结束弧度,旋转方向): 弧 ...

  3. html5--5-8 绘制圆/弧

    html5--5-8 绘制圆/弧 学习要点 掌握绘制圆弧的方法 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充) fil ...

  4. html5--5-7 绘制圆/弧

    html5--5-7 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y ...

  5. html5--5-6 绘制圆/弧

    html5--5-6 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y ...

  6. CAD交互绘制圆(网页版)

    CAD绘制图像的过程中,画圆的情况是非常常见的,用户可以在控件视区点取任意一点做为圆心,再动态点取半径绘制圆. 主要用到函数说明: _DMxDrawX::DrawCircle 绘制一个圆.详细说明如下 ...

  7. CAD交互绘制圆(com接口)

    CAD绘制图像的过程中,画圆的情况是非常常见的,用户可以在控件视区点取任意一点做为圆心,再动态点取半径绘制圆. 主要用到函数说明: _DMxDrawX::DrawCircle 绘制一个圆.详细说明如下 ...

  8. OpenGL(一)绘制圆、五角星、正弦曲线

    OpenGL入门之"顶点":OpenGL规定,一个多边形必须是一个"凸多边形",即连接多边形上任意两点,其连线都在多边形内部.多边形可以由其边上的端点(这里可称 ...

  9. html+js+highcharts绘制圆饼图表的简单实例

    下面我就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例.我觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随我过来看看吧 实例如下: 1 2 3 4 5 6 7 8 ...

随机推荐

  1. Oracle和Mysql语法异同整理笔记

    目录 (1) 模糊匹配 (2) 删除数据 (3) 时间函数 (4) 关键字问题 (5) 递归查询 (6) 排序问题 (7) 空值返回0 (8) 取最大值 (9) 列转换函数 (10) 类型转行函数 @ ...

  2. Mac-Navicat Premium For Mac 12 破解 - [数据库可视化工具,亲测完美破解]

    一.下面的公钥和私钥暂时存到文本编辑器中 公钥: -----BEGIN PUBLIC KEY-----MIIBITANBgkqhkiG9w0BAQEFAAOCAQ4AMIIBCQKCAQB8vXG0I ...

  3. 运维笔记--docker高效查看后台日志

    场景描述: 应用程序运行在 Docker环境中,经常使用的查看后台日志的命令是:docker attach 容器名该命令优点:实时输出:不足之处:日志大量输出的时候,屏幕一闪而过,不便于调试,并且有一 ...

  4. 【jQuery】(2)---Jquery过滤选择器

                         1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...

  5. json_decode与json_encode容易被忽视的点

    一.json_decode的使用,json_decode共有4个参数 json_decode ( string $json [, bool $assoc=FALSE [, int $depth= 51 ...

  6. 关于 Spring Security OAuth2 中 CORS 跨域问题

    CORS 是一个 W3C 标准,全称是”跨域资源共享”(Cross-origin resource sharing).它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了 AJA ...

  7. mysql 开发进阶篇系列 4 SQL 优化(各种优化方法点)

    1 通过handler_read 查看索引使用情况 如果索引经常被用到 那么handler_read_key的值将很高,这个值代表了一个行被索引值读的次数, 很低的值表明增加索引得到的性能改善不高,索 ...

  8. Android--Service之AIDL传递系统基本类型数据

    前言 前面讲解了Service的一些基本内容.但是对于绑定服务传递数据,只局限于本地服务,无法使用服务进行跨进程间的交互.如果需要用到跨进程交互的话,需要用到一个新的技术-AIDL,这篇博客就针对AI ...

  9. Jenkins问题记录:android构建时提示Unzipping /home/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3-all.zip to /home/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9 Except

    -------------- -------------- 问题:今日job构建报出如下错误: Unzipping /home/.gradle/wrapper/dists/gradle-3.3-all ...

  10. 小程序this.setData

    data: { isChecked: [ { key: true },{ key: true },{ key: true} ]} 如上,如果我想动态修改isChecked里面指定某个下标的值怎么办? ...