const polygonVertices = item.shape.points[0].map(point =>
webMercatorUtils.lngLatToXY(point[0], point[1])
);
// Calculate the center point of the polygon
const centerX = polygonVertices.reduce((sum, point) => sum + point[0], 0) / polygonVertices.length;
const centerY = polygonVertices.reduce((sum, point) => sum + point[1], 0) / polygonVertices.length;
// Create a center point graphic
const centerPointGraphic = new Graphic({
geometry: new Point({
x: centerX,
y: centerY,
spatialReference: {
latestWkid: 3857,
wkid: 102100
}
}),
symbol: {
type: 'simple-marker',
style: 'circle',
color: [255, 0, 0], // Red color for the center point
size: 10 // Adjust the size of the center point as needed
}
});
// Create the polygon graphic
const polygonGraphic = new Graphic({
geometry: new Polygon({
rings: polygonVertices,
spatialReference: {
latestWkid: 3857,
wkid: 102100,
},
}),
symbol: {
type: 'simple-fill',
style: 'solid',
color: [105, 105, 105, 0.5],
outline: {
color: [255, 255, 255],
width: 2,
},
},
});
// Add both the polygon and center point graphics to the map
graphicsLayer.addMany([polygonGraphic, centerPointGraphic]);
Comments