champs-libres/biommap
4
0
Fork 0
Code Issues 5 Pull Requests Projects Releases Wiki Activity

POC of polygon drawing with Leaflet

Browse Source
This commit is contained in:
nobohan 2021-09-01 15:14:04 +02:00
parent 07e76fa6a8
commit a1c589f7a1
1 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
sandbox/lines-polygons/index.html
View File

@ -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;
}
});