leaflet上绘制圆形

最新推荐文章于 2026-03-04 00:31:02 发布

原创最新推荐文章于 2026-03-04 00:31:02 发布 · 3.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

地图之leaflet 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Leaflet地图上通过点击按钮来绘制圆形的方法，帮助用户理解并实现这一功能。

点击绘制圆形的button 按钮绘制圆形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
        crossorigin="" />
    <title>leaflet</title>
    <style>
        .demo {
            width: 1000px;
            height: 600px;
        }

        button {
            width: 100px;
            height: 50px;
            border-radius: 10px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <button>绘制圆形</button>
    <div id='map' class="demo"></div>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
        crossorigin=""></script>
    <script>
        var mymap = L.map('map').setView([2.8, -187.3], 2);
        var oBtn = document.getElementsByTagName('button')[0];
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: '<your mapbox token>'
        }).addTo(mymap);

        oBtn.addEventListener('click', function () {
            mymap.on('mousedown', function (e) {
                var lastLatlng = e.latlng;
                var nowLatlng, circle;
                mymap.dragging.disable();
                mymap.on('mousemove', function (e) {
                    if (circle) {
                        mymap.removeLayer(circle);
                    }
                    var nowLatlng = e.latlng;
                    var radius = mymap.distance(nowLatlng, lastLatlng);
                    // 计算半径
                    circle = L.circle(lastLatlng, {
                        color: 'red',
                        fillColor: '#f03',
                        fillOpacity: 0.50,
                        radius: radius
                    });
                    mymap.addLayer(circle);
                    // 通过添加图层的方式绘制圆形
                });
                mymap.on('mouseup', function () {
                    mymap.off();
                    mymap.dragging.enable();
                })
            });
        }, false);
    </script>
    <script src="data.js"></script>
</body>

</html>