I am having trouble trying to understand why my polygons do not merge. I've tried to following posts:
https://community.esri.com/t5/arcgis-api-for-javascript-questions/how-can-i-split-a-polygon-and-how-...
https://community.esri.com/t5/arcgis-api-for-javascript-questions/merge-polygons-in-javascript-api-4...
https://community.esri.com/t5/arcgis-api-for-javascript-questions/merge-several-polygon-in-javascrip...
I click on the Quick Add button and then overlap the 2 polygons. Then I click on the Merge button - hoping that the two overlapped polygons will join.
Sometimes I am left with one. Sometimes all Polygons are removed.
The coordinates that comeback from the GeometryEngine are spurious (line 121):
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArcGIS - Art of the Possible Demo</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css">
</head>
<body>
<div id="control-toolbar">
<button type="button" id="quick-add">Quick Add</button>
<button type="button" id="merge">Merge</button>
</div>
<div id="viewDiv"></div>
<script src="https://js.arcgis.com/4.24/"></script>
<script src="index.js"></script>
</body>
</html>
CSS
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-view .esri-ui-corner .esri-component.esri-widget--panel-height-only {
width: 250px;
max-height: calc(100% - 45px) !important;
position: fixed;
}
Javascript
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/widgets/Sketch/SketchViewModel",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/geometryEngine",
"esri/geometry/Polygon"
], (
esriConfig,
Map,
MapView,
SketchViewModel,
GraphicsLayer,
Graphic,
geometryEngine,
Polygon
) => {
const graphicsLayer = new GraphicsLayer();
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
}
};
const map = new Map({
basemap: {
portalItem: {
id: "8d91bd39e873417ea21673e0fee87604" // nova basemap
}
},
layers: [graphicsLayer]
});
const view = new MapView({
map: map,
center: [-1.9, 53.9], //Longitude, latitude
zoom: 5,
container: "viewDiv",
constraints: {
snapToZoom: false,
},
});
// try and get the polygon back out of ui
const sketchVM = new SketchViewModel({
view: view,
layer: graphicsLayer
});
sketchVM.on("update", (event) => {
currentGraphic = event.graphics[0]; // set the currentGraphic to the graphic being updated
currentSymbol = currentGraphic.symbol; // set the current symbol based on the graphic's symbol
if (event.state == "start") {
// configureProperties(currentSymbol); // update the UI based on the current symbol
}
if (event.state == "complete") {
currentGraphic = null; // set the current graphic to null once update is complete
}
});
sketchVM.on("create", (event) => {
currentGraphic = event.graphic; // set the currentGraphic to the graphic being created
if (event.state == "complete" || event.state == "cancel") {
currentGraphic = null; // set graphic to null once create is complete or cancelled
}
});
document.getElementById("quick-add").addEventListener("click", function (event) {
const polygons = [
{
type: "polygon", // autocasts as new Polygon()
rings: [
[-2.778906249999767, 54.16455520570663],
[2.296777343748883, 54.650508751294815],
[1.7694335937490233, 52.69855676850477],
[-3.064550781249691, 52.73848533714189],
[-3.7896484374994994, 53.18845854138924],
[-2.778906249999767, 54.16455520570663]
]
},
{
type: "polygon",
rings: [
[1.4837890624990875, 54.91028142199062],
[2.274804687498878, 55.424835143449705],
[4.362207031248323, 54.87237008287549],
[3.3954101562485794, 53.92588439579337],
[2.692285156248766, 54.82176611083718],
[1.4837890624990875, 54.91028142199062]
]
}
];
polygons.forEach(polygon => {
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: clone(fillSymbol)
});
graphicsLayer.add(polygonGraphic);
});
});
function clone(obj) {
return JSON.parse(JSON.stringify(obj))
}
document.getElementById("merge").addEventListener('click', function () {
debugger;
var updatedGeometry = new Array();
graphicsLayer.graphics.map(function (gra) {
updatedGeometry.push(new Polygon(gra.geometry));
});
var joinedPolygons = geometryEngine.union(updatedGeometry);
graphicsLayer.removeAll();
joinedPolygons.rings.forEach(function (ring) {
let resultpolygon = new Polygon();
resultpolygon.rings = [ring];
resultpolygon.spatialReference.wkid = 4326;
let resultgraphic = new Graphic({
geometry: resultpolygon,
symbol: clone(fillSymbol)
});
graphicsLayer.add(resultgraphic);
});
});
});