zoukankan      html  css  js  c++  java
  • 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);

    });

  • 相关阅读:
    项目
    关于我
    【转载】罗胖精选|什么样的自控方法才有效?
    知识管理——得到CEO脱不花女士的一次分享
    注意由双大括号匿名类引起的serialVersionUID编译告警
    持续集成、持续交付和持续部署
    Google Cayley图数据库使用方法
    任务的属性
    团队博客地址
    个人总结
  • 原文地址:https://www.cnblogs.com/yaohuimo/p/9515463.html
Copyright © 2011-2022 走看看