It is because on line 73. ext1 and ext3 do not intersect numerically speaking. That is, before the call to union, here is the state of things:
ext1: (150, 50) -> (210, 80)
ext3: (-175, 55) -> (-120, 65)
As you can see, if you put this on a simple cartesian plane, they won't intersect. You can add some functionality to adjust the geometries one rotation around the world to the east or west to get what you're looking for like so:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Intro to graphics | Sample | ArcGIS Maps SDK for JavaScript 4.28
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.28/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.28/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/geometry/Polygon",
"esri/geometry/Extent",
"esri/geometry/geometryEngine"
], (Map, MapView, Graphic, Polygon, Extent, GeometryEngine) => {
const map = new Map({
basemap: "hybrid"
});
const view = new MapView({
center: [-180, 60],
container: "viewDiv",
map: map,
zoom: 3
});
var ext1 = new Extent({
xmin: 170.0,
ymin: 56.0,
xmax: -170.0 + 360,
ymax: 70.0
});
drawAThing(ext1);
//-----------------
var ext2 = new Extent({
xmin: 150.0,
ymin: 50.0,
xmax: -150.0 + 360,
ymax: 80.0
});
drawAThing(ext2);
var ext3 = new Extent({
xmin: -175.0,
ymin: 55.0,
xmax: -120.0,
ymax: 65.0
});
drawAThing(ext3);
var ext4 = new Extent({
xmin: 140.0,
ymin: 54.0,
xmax: 175,
ymax: 57.0
});
drawAThing(ext4);
view.on("click", function (evt) {
//-------------------
alert("union ready ?");
view.graphics.removeAll();
var geom = unionGeometries(ext1, ext2);
geom = unionGeometries(geom, ext3);
geom = unionGeometries(geom, ext4);
drawAThing(geom);
//-------------------
});
function drawAThing(geo) {
// Create a symbol for rendering the graphic
var 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
var graphic = new Graphic({
geometry: geo,
symbol: fillSymbol
});
view.graphics.addMany([graphic]);
}
function unionGeometries(geometry, extent) {
if (!extent.intersects(geometry)) {
var extent2 = extent.clone();
extent2.xmax += 360;
extent2.xmin += 360;
if (extent2.intersects(geometry))
return GeometryEngine.union([geometry, extent2]);
else {
extent2.xmin -= 720;
extent2.xmax -= 720;
if (extent2.intersects(geometry))
return GeometryEngine.union([geometry, extent2]);
}
}
return GeometryEngine.union([geometry, extent]);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Basically, the unionGeometries function was added, and the "extN" objects were created as full-on Extent objects to make this work. Note this only works if geometries are offset by no more than one rotation.
