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;
}
}
function destination (latlng, heading, distance) {
heading = (heading + 360) % 360;
var rad = Math.PI / 180,
radInv = 180 / Math.PI,
R = 6378137,
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]);
}
<div id="map"></div>
* {
margin: 0;
padding: 0;
}
html, body, #map {
width: 100%;
height: 100%;
}