|
|
|
@ -26,11 +26,15 @@
|
|
|
|
|
|
|
|
|
|
const hash = L.hash(map);
|
|
|
|
|
|
|
|
|
|
let geometryType = 'LINESTRING'; //'POINT' | 'LINESTRING' | 'POLYGON'
|
|
|
|
|
let geometryType = 'POLYGON'; //'POINT' | 'LINESTRING' | 'POLYGON'
|
|
|
|
|
let myMarker = null;
|
|
|
|
|
let polyline = null;
|
|
|
|
|
let previousPolyline = null;
|
|
|
|
|
let previousLayerPoint = null;
|
|
|
|
|
|
|
|
|
|
let polygon = null;
|
|
|
|
|
let firstPolygonPoint = null;
|
|
|
|
|
|
|
|
|
|
const lineDraw = L.polyline([], {color: '#11aa9e', dashArray: '6', lineCap: 'butt'}).addTo(map);
|
|
|
|
|
|
|
|
|
|
const pointDistance = (pointA, pointB) => {
|
|
|
|
@ -51,6 +55,15 @@
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
case 'POLYGON':
|
|
|
|
|
map.on('mousemove', (e) => {
|
|
|
|
|
if(polygon){
|
|
|
|
|
let lastDrawPoint = polygon.getLatLngs()[0][polygon.getLatLngs()[0].length - 1];
|
|
|
|
|
let firstDrawPoint = polygon.getLatLngs()[0][0];
|
|
|
|
|
lineDraw.setLatLngs([firstDrawPoint, e.latlng, lastDrawPoint]);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
map.on('click', (e) => {
|
|
|
|
@ -63,6 +76,7 @@
|
|
|
|
|
map.removeLayer(myMarker);
|
|
|
|
|
}
|
|
|
|
|
myMarker = L.marker(e.latlng).addTo(map);
|
|
|
|
|
break;
|
|
|
|
|
case 'LINESTRING':
|
|
|
|
|
lineDraw.setLatLngs([]);
|
|
|
|
|
if (polyline === null){
|
|
|
|
@ -82,6 +96,23 @@
|
|
|
|
|
previousLayerPoint = e.layerPoint;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
case 'POLYGON':
|
|
|
|
|
lineDraw.setLatLngs([]);
|
|
|
|
|
if (polygon === null){
|
|
|
|
|
polygon = L.polygon([e.latlng], {color: '#11aa9e'}).addTo(map);
|
|
|
|
|
firstPolygonPoint = e.layerPoint;
|
|
|
|
|
} else {
|
|
|
|
|
if (arePointsSnapped(firstPolygonPoint, e.layerPoint)) {
|
|
|
|
|
console.log('close the polygon')
|
|
|
|
|
polygon.setStyle({color: '#60b15c'});
|
|
|
|
|
polygon = null;
|
|
|
|
|
} else {
|
|
|
|
|
polygon.addLatLng(e.latlng);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|