@SaiPeketi
There's a couple of ways you could do this, but one method you can do assuming the polygon is a quadrilateral - is effectively modify what you're doing by calculate the grid off each corner of the polygon instead.
You can calculate the new grid corners by calculating the steps between two corners pairs.
Note it can get a bit confusing as your matching up corner pairs.
I've just quickly modified your code to illustrate below, naming the corners to try and make it easier to understand.
Hope it helps.
<script>
require(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/Extent", "esri/widgets/Measurement"], (Map, MapView, Graphic, Extent, Measurement) => {
const map = new Map({
basemap: "hybrid"
});
const view = new MapView({
center: [-80, 35],
container: "viewDiv",
map: map,
zoom: 3
});
const extent = new Extent({
xmax:
-9170525.078269107,
xmin:
-9170540.704066336,
ymax: 4143155.358736824,
ymin: 4143141.82301231,
spatialReference: {
wkid: 102100
}
});
view.extent = extent;
/****************************
* Create a polygon graphic
****************************/
const polygon = {
type: "polygon", // autocasts as new Polygon()
rings: [
[-9170536.275099419, 4143155.358736824],
[-9170525.078269107, 4143150.3326033456],
[-9170529.208653882, 4143141.82301231],
[-9170540.704066336, 4143146.351508504],
[-9170536.275099419, 4143155.358736824]
],
spatialReference: {
wkid: 102100
}
};
const fillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [227, 139, 79, 0.8],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
};
// Add the geometry and symbol to a new graphic
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: fillSymbol
});
/****************************
* Create a grid polyline graphic
****************************/
const path = [];
steps = 10;
firstCorner = polygon.rings[0];
secondCorner = polygon.rings[1];
thirdCorner = polygon.rings[2];
fourthCorner = polygon.rings[3];
let pathVal = [];
for (let i = 0; i <= steps; i++) {
horizonalXStartingPoint = firstCorner[0] - (((firstCorner[0] - fourthCorner[0]) / steps) * i);
horizonalYStartingPoint = firstCorner[1] - (((firstCorner[1] - fourthCorner[1]) / steps) * i)
horizonalXEndPoint = secondCorner[0] - (((secondCorner[0] - thirdCorner[0]) / steps) * i);
horizonalYEndPoint = secondCorner[1] - (((secondCorner[1] - thirdCorner[1]) / steps) * i)
path.push([[horizonalXStartingPoint, horizonalYStartingPoint], [horizonalXEndPoint, horizonalYEndPoint]])
verticalXStartingPoint = firstCorner[0] - (((firstCorner[0] - secondCorner[0]) / steps) * i);
verticalYStartingPoint = firstCorner[1] - (((firstCorner[1] - secondCorner[1]) / steps) * i)
verticalXEndPoint = fourthCorner[0] - (((fourthCorner[0] - thirdCorner[0]) / steps) * i);
verticalYEndPoint = fourthCorner[1] - (((fourthCorner[1] - thirdCorner[1]) / steps) * i)
path.push([[verticalXStartingPoint, verticalYStartingPoint], [verticalXEndPoint, verticalYEndPoint]])
}
// First create a line geometry (this is the Keystone pipeline)
const polyline = {
type: "polyline", // autocasts as new Polyline()
paths: path,
spatialReference: {
wkid: 102100
}
};
// // // Create a symbol for drawing the line
const lineSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [226, 119, 40],
width: 4
};
const polylineGraphic = new Graphic({
geometry: polyline,
symbol: lineSymbol
});
// Add the graphics to the view's graphics layer
view.graphics.addMany([polylineGraphic, polygonGraphic]);
});
</script>
James from www.landkind.com