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);
});
最新文章
- hadoop分布式存储(2)-hadoop的安装(毕业设计)
- python高级之面向对象高级
- 24. Swap Nodes in Pairs
- 【转】【SEE】基于SSE指令集的程序设计简介
- 深入了解Windows句柄到底是什么
- Cyclic Nacklace
- ASP.NET MVC ActionResult的实现
- @font-face
- quick-cocos2d-x android返回键监听并实现原生退出对话框
- EasyUI特殊情况下的BUG整理
- The most orzed and orzing man
- subnetting and the subnet mask
- Python =>; ValueError: unsupported format character &#39;Y&#39; (0x59)
- VSTO中Word的查找方式
- Java 枚举(enum) 详解7种常见的用法
- 【Java】maven多项目资源共享
- ORA-01461的解决过程~~
- 如何取出word文档里的图片
- Numpy 基础知识
- 给定一个十进制的正整数,写下从1开始,到N的所有整数,然后数一下其中出现“1”的个数。