I have hardcoded the polygon and polyline and performed cut polygon using geometryEngine, the task can also be done dynamically. By clicking on cut button the operation will be performed.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Cut Polygone | Sample | ArcGIS API for JavaScript 4.25</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.25/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/views/draw/Draw",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/views/MapView",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/geometry/geometryEngine",
], (
Sketch,
Map,
Draw,
Graphic,
GraphicsLayer,
MapView,
Polyline,
Polygon,
geometryEngine
) => {
// const graphicPolyline = new GraphicsLayer();
const map = new Map({
basemap: "topo-vector",
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 10,
center: [75, 14],
});
const rings1 = [
[
[8323584.716104832, 1584076.9248102568],
[8344681.335911548, 1605173.5446169735],
[8360427.3637383, 1592484.9979216293],
[8356911.260437181, 1567413.652644082],
],
[
[8353089.409022921, 1549527.388025344],
[8371434.29581137, 1568789.5191532157],
[8386721.701468411, 1553807.8616093155],
[8364707.837322271, 1533016.9899157395],
],
];
const polygon1 = new Polygon({
rings: rings1,
hasZ: false,
hasM: false,
spatialReference: { wkid: 102100 },
});
let polygoneGraphic1 = new Graphic({
geometry: polygon1,
symbol: {
type: "simple-fill",
color: "gray",
style: "solid",
outline: {
color: "yellow",
width: 1,
},
},
});
view.graphics.add(polygoneGraphic1);
let paths1 = [
[
[8322514.597708838, 1596153.9752793193],
[8362873.348643427, 1574292.9851897506],
[8379995.242979313, 1537450.3375562814],
],
];
let line1 = new Polyline({
hasZ: false,
hasM: false,
paths: paths1,
spatialReference: { wkid: 102100 },
});
const graphicPolyline1 = new Graphic({
geometry: line1,
symbol: {
type: "simple-line",
color: [200, 70, 30],
width: 2,
},
});
view.graphics.add(graphicPolyline1);
function drawPolygon(event) {
const vertices = event.vertices;
let polygon = {
type: "polygon",
rings: vertices,
spatialReference: view.spatialReference,
};
console.log(polygon);
let polygoneGraphic = new Graphic({
geometry: polygon,
symbol: {
type: "simple-fill",
color: "gray",
style: "solid",
outline: {
color: "yellow",
width: 1,
},
},
});
view.graphics.add(polygoneGraphic);
}
function drawLine(event) {
const vertices = event.vertices;
let polyline = {
type: "polyline",
hasZ: false,
hasM: false,
paths: vertices,
spatialReference: view.spatialReference,
};
console.log(polyline);
const graphicPolyline = new Graphic({
geometry: polyline,
symbol: {
type: "simple-line",
color: [200, 70, 30],
width: 2,
},
});
view.graphics.add(graphicPolyline);
}
const draw = new Draw({
view: view,
});
document.getElementById("Polyline").onclick = () => {
const action = draw.create("polyline");
view.focus();
action.on("vertex-add", drawLine);
};
document.getElementById("Polygon").onclick = () => {
const action = draw.create("polygon");
view.focus();
action.on("vertex-add", drawPolygon);
};
view.ui.add(info, "top-right");
view.when(() => {
document.getElementById("handleClick").onclick = () => {
console.log("cut started..");
const geometries = geometryEngine.cut(polygon1, line1);
console.log("cut completed..");
console.log(geometries);
// just for my reference..
const rings2 = [
[
[8376763.972308426, 1544403.339624886],
[8367399.716694297, 1564553.211080289],
[8371434.29581137, 1568789.5191532157],
[8386721.701468411, 1553807.8616093155],
[8376763.972308426, 1544403.339624886],
],
];
const polygon2 = new Polygon({
rings: rings2,
hasZ: false,
hasM: false,
spatialReference: { wkid: 102100 },
});
let polygoneGraphic2 = new Graphic({
geometry: polygon2,
symbol: {
type: "simple-fill",
color: "blue",
style: "solid",
outline: {
color: "red",
width: 1,
},
},
});
view.graphics.add(polygoneGraphic2);
const rings3 = [
[
[8358228.865145299, 1576808.7470845701],
[8331042.491026713, 1591534.6997321376],
[8344681.335911548, 1605173.5446169735],
[8360427.3637383, 1592484.9979216293],
[8358228.865145299, 1576808.7470845701],
],
];
const polygon3 = new Polygon({
rings: rings3,
hasZ: false,
hasM: false,
spatialReference: { wkid: 102100 },
});
let polygoneGraphic3 = new Graphic({
geometry: polygon3,
symbol: {
type: "simple-fill",
color: "tomato",
style: "solid",
outline: {
color: "blue",
width: 1,
},
},
});
view.graphics.add(polygoneGraphic3);
const rings4 = [
[
[8356911.260437181, 1567413.652644082],
[8323584.716104832, 1584076.9248102568],
[8331042.491026713, 1591534.6997321376],
[8358228.865145299, 1576808.7470845701],
[8356911.260437181, 1567413.652644082],
],
];
const polygon4 = new Polygon({
rings: rings4,
hasZ: false,
hasM: false,
spatialReference: { wkid: 102100 },
});
let polygoneGraphic4 = new Graphic({
geometry: polygon4,
symbol: {
type: "simple-fill",
color: "green",
style: "solid",
outline: {
color: "blue",
width: 1,
},
},
});
view.graphics.add(polygoneGraphic4);
const rings5 = [
[
[8364707.837322271, 1533016.9899157395],
[8353089.409022921, 1549527.388025344],
[8367399.716694297, 1564553.211080289],
[8376763.972308426, 1544403.339624886],
[8364707.837322271, 1533016.9899157395],
],
];
const polygon5 = new Polygon({
rings: rings5,
hasZ: false,
hasM: false,
spatialReference: { wkid: 102100 },
});
let polygoneGraphic5 = new Graphic({
geometry: polygon5,
symbol: {
type: "simple-fill",
color: "violet",
style: "solid",
outline: {
color: "blue",
width: 1,
},
},
});
view.graphics.add(polygoneGraphic5);
};
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="info">
<button id="Polygon">Polygon</button>
<button id="Polyline">Polyline</button>
<button id="handleClick">Cut</button>
</div>
</body>
</html>
