SOURCE

console 命令行工具 X clear

                    
>
console
var map = L.map('map').setView([44.635, 22.653], 11);
        var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

        var circle = L.circle([44.63, 22.65], 5000).addTo(map);

        // 根据点 偏移 距离 获取新的点
        let icon = L.icon({
            iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABSElEQVQ4T62TPUsDQRRFzxvSKVhIsJOACoKKldpahN3VTkEQFMTfoL34S6y0EeyEZEmRVlOJ2vgBYiFIsBC0C+/JrJtlo0TC4oNZmHlzL3Nnzgo/ysJwErMpnBvFbCxpi7yi+obIvdTrD3mJ5CcWReuozv007Zk7dy212ll3LTOwIDjIbZxBpAKMAAq8Y/YCXGXCOD5MDuc/FgRLQJQ2vXijzymamDXTXk3i+EKsWh3Hud006zLgR/8yOwVukw2qR2JRtIrqAjCPyNqf4m6za+JcyxvsoFpBZAXwUQapFmbnOPckFgT7wBAim8D0IGrgDrMT4FMsDPcwGy5kIPLhI2yjOlEwwqOP4LMvFrpEuPQRPLpbhZ5R5PgbpF6EBwMpRfp/UM746EW634smCP/6mTITj3apNAuUUS0n6861gTadzo00Gs955y8+zI7sWedwzQAAAABJRU5ErkJggg==',
            iconSize: [16, 16],
        });
        let circleMaker = L.marker(destination(circle.getLatLng(), 90, 5 * 1000), {icon: icon}).addTo(map);

        // 圆点击拖拽
        circle.on({
            mousedown: function () {
                map.dragging.disable();

                map.on('mousemove', function (e) {
                    circle.setLatLng(e.latlng);
                    circleMaker.setLatLng(L.latLng(destination(circle.getLatLng(), 90, circle.getRadius())))   
                });
            }
        });
        
        // 圆点点击拖拽
        circleMaker.on({
            mousedown: function() {
                map.dragging.disable();

                map.on('mousemove', function (e) {
                    circleMaker.setLatLng(e.latlng);
                    let distance = circle.getLatLng().distanceTo(circleMaker.getLatLng());
                    circle.setRadius(distance);
                });
            }
        })

        map.on('mouseup', function (e) {
            map.removeEventListener('mousemove');
            map.dragging.enable();
        });

				var points = [], geometry = []
        var lines = new L.polyline([])

        map.on('click', function(e) {
            let closed = false;
            // 判断闭合 至少三个点
            if (points.length >= 3) {
                let firstLatlng = L.latLng(points[0]);
                let firstPoint = map.latLngToContainerPoint(firstLatlng);
                let lastPoint = map.latLngToContainerPoint(e.latlng);

                if (Math.abs(firstPoint.x - lastPoint.x) < 5 && Math.abs(firstPoint.y - lastPoint.y) < 5) {
                    closed = true;
                }
            }

            points.push([e.latlng.lat, e.latlng.lng])
            lines.addLatLng(e.latlng)
            map.addLayer(lines)
            const node=L.circle(e.latlng, { color: '#ff0000', fillColor: 'ff0000', fillOpacity: 1 })
            map.addLayer(node)
            geometry.push(node)

            if (closed) {
                var polygon = L.polygon(points,{
                    color: 'green',
                    fillColor: '#f03',
                    fillOpacity: 0.5
                }).addTo(map);

                console.log(isInPolygon([circleMaker._latlng.lat, circleMaker._latlng.lng], points))
            }
        });

        map.on('mousemove', function(e) {
            if (points.length > 0) {
                ls = [points[points.length - 1], [e.latlng.lat, e.latlng.lng], points[0]]
                tempLines.setLatLngs(ls)
            }
        });

        // 计算点是否在多边形里
        function isInPolygon(checkPoint, polygonPoints) {
            var counter = 0;
            var i;
            var xinters;
            var p1, p2;
            var pointCount = polygonPoints.length;
            p1 = polygonPoints[0];
        
            for (i = 1; i <= pointCount; i++) {
                p2 = polygonPoints[i % pointCount];
                if (
                    checkPoint[0] > Math.min(p1[0], p2[0]) &&
                    checkPoint[0] <= Math.max(p1[0], p2[0])
                ) {
                    if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
                        if (p1[0] != p2[0]) {
                            xinters =
                                (checkPoint[0] - p1[0]) *
                                    (p2[1] - p1[1]) /
                                    (p2[0] - p1[0]) +
                                p1[1];
                            if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
                                counter++;
                            }
                        }
                    }
                }
                p1 = p2;
            }
            if (counter % 2 == 0) {
                return false;
            } else {
                return true;
            }
        }

        /**
         *  获取偏移点
         *  latlng    初始点
         *  heading   偏移量
         *  distance  距离
         */
        function destination (latlng, heading, distance) {
            heading = (heading + 360) % 360;
            var rad = Math.PI / 180,
                radInv = 180 / Math.PI,
                R = 6378137, // approximation of Earth's radius
                lon1 = latlng.lng * rad,
                lat1 = latlng.lat * rad,
                rheading = heading * rad,
                sinLat1 = Math.sin(lat1),
                cosLat1 = Math.cos(lat1),
                cosDistR = Math.cos(distance / R),
                sinDistR = Math.sin(distance / R),
                lat2 = Math.asin(sinLat1 * cosDistR + cosLat1 *
                    sinDistR * Math.cos(rheading)),
                lon2 = lon1 + Math.atan2(Math.sin(rheading) * sinDistR *
                    cosLat1, cosDistR - sinLat1 * Math.sin(lat2));
            lon2 = lon2 * radInv;
            lon2 = lon2 > 180 ? lon2 - 360 : lon2 < -180 ? lon2 + 360 : lon2;
            return L.latLng([lat2 * radInv, lon2]);
        }

// https://github.com/Leaflet/Leaflet.draw 这个插件也有很多绘图 画框功能
<div id="map"></div>
* {
    margin: 0;
    padding: 0;
}
html, body, #map {
    width: 100%;
    height: 100%;
}

本项目引用的自定义外部资源