leaflet 如何绘制圆

时间:2023-02-26 13:27:51

方法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&num; Graphic 绘制圆、三角形、椭圆、图片

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

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

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

  3. html5--5-8 绘制圆&sol;弧

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

  4. html5--5-7 绘制圆&sol;弧

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

  5. html5--5-6 绘制圆&sol;弧

    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&plus;js&plus;highcharts绘制圆饼图表的简单实例

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

随机推荐

  1. INF文件的安装&sol;卸载命令

    RunDll32 advpack.dll,LaunchINFSection C:\Windows\INF\Office~1.inf,Uninstall,5

  2. 深入理解PHP内核&lpar;四&rpar;概览-PHP脚本的执行

    本文链接:http://www.orlion.ml/236/ 下面以php命令行程序为例解释PHP脚本是怎么被执行的.例如如下脚本: <?php $str = 'hello world'; ec ...

  3. CF&num;345 &lpar;Div1&rpar;

    论蒟蒻如何被cf虐 以下是身败名裂后的题解菌=========== Div1 A.Watchmen 有n个点,每个点有一个坐标.求曼哈顿距离=欧几里得距离的点对数量. 只需要统计x或y一样的点对数量. ...

  4. Vue&period;js——webpack

    Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开 ...

  5. Qt之设置QWidget背景色(QStyleOption-&gt&semi;drawPrimitive&lpar;QStyle&colon;&colon;PE&lowbar;Widget&rpar;方法比较有趣)

    QWidget是所有用户界面对象的基类,这意味着可以用同样的方法为其它子类控件改变背景颜色. Qt中窗口背景的设置,下面介绍三种方法. 1.使用QPalette2.使用Style Sheet3.绘图事 ...

  6. Highest Rated Features

  7. View学习(一&rpar;-DecorView&comma;measureSpec与LayoutParams

    这段时间在学习android中view的工作原理与自定义View的相关内容,所以未来这这几篇博客都总结一下相关的知识吧. 首先我们要了解和熟悉两个概念,DecorView 与 MeasureSpec. ...

  8. 多个input连接在一起的时候如何实现输入一个数字跳入下一个

    这个是页面内容  ,我分了12格子,作为一个12位的会员卡号的输入;其实就是12个input我把他们放在了一个div里面  这样配上背景图,看着是一个大的输入框. <div id="A ...

  9. 简单Hash函数LongHash

    import java.security.SecureRandom; import java.util.Random; public class LongHash { private static l ...

  10. install django采坑

    1. install python 3 2. install pip 3.  install virtual enviroment : python -m venv myvenv 4. 切换到virt ...