I have a polygon and it has circles on it. I drew lines from the intersections of the circles. Actually I want to split this big polygon by lines. I have numbered the polygons to be divided in the figure. I'll be happy if you can help me
I have uploaded all the codes both in the jsfiddle environment and here.
I have a polygon in my codes and there are two circles on it. I created lines from the intersections of the circles. I want to split the polygon according to these lines as shown in the figure
JsFiddle Link: https://jsfiddle.net/hrnbydgn/et2635hq/2
var map = L.map('map').setView([41.2819587,28.4810230], 18);
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var cor3 = [
[41.2819587,28.4810230],
[41.2831258,28.4795746],
[41.2834906,28.4823748],
[41.2820716,28.4816051],
[41.2819587,28.4810230]
];
var p3 = L.polyline(cor3, {
polygon: true,
fill: true,
color:'yellow'
});
var ObsCenter = new Array();
var bboxObs = new Array();
var center = [28.480423339203874,41.28301959608716];
ObsCenter.push(center);
var radius = 6;
var options = {steps: 10, units: 'meters'};
var circle = turf.circle(center, radius, options);
var t1 = L.geoJSON(circle).addTo(map);
let bbox = turf.bbox(circle);
bboxObs.push(turf.bboxPolygon(bbox));
var center = [28.480823339215884,41.28261979629536];
ObsCenter.push(center);
var radius = 7;
var options = {steps: 10, units: 'meters'};
var circle = turf.circle(center, radius, options);
var t1 = L.geoJSON(circle).addTo(map);
bbox = turf.bbox(circle);
bboxObs.push(turf.bboxPolygon(bbox));
var polygon = turf.lineToPolygon(p3.toGeoJSON());
L.geoJSON(polygon).addTo(map);
let bbox2 = turf.bbox(polygon);
let bboxPoly = turf.bboxPolygon(bbox2);
var splice = new Array();
for(var sp = 0; sp<bboxObs.length; sp++){
splice.push([
[bboxPoly["bbox"][1],bboxObs[sp]["bbox"][0]],
[bboxPoly["bbox"][3],bboxObs[sp]["bbox"][0]]
]);
splice.push([
[bboxPoly["bbox"][1],bboxObs[sp]["bbox"][2]],
[bboxPoly["bbox"][3],bboxObs[sp]["bbox"][2]]
]);
splice.push([
[bboxObs[sp]["bbox"][1],bboxPoly["bbox"][0]],
[bboxObs[sp]["bbox"][1],bboxPoly["bbox"][2]]
]);
splice.push([
[bboxObs[sp]["bbox"][3],bboxPoly["bbox"][0]],
[bboxObs[sp]["bbox"][3],bboxPoly["bbox"][2]]
]);
}
var spliced = new L.Polyline(splice, {
color: 'red',
weight: 2,
opacity: 0.5,
smoothFactor: 1
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script><script src='https://unpkg.com/@turf/turf@6.5.0/turf.min.js'></script>
<div id="map" style="width: 1908px; height: 1080px;"></div>
