(4.26) Donut-shaped polygons are drawn with an extra line
97
0
08-20-2024 04:45 AM
by
Greetings all,
I am running into an unusual issue with the 4.26 JavaScript maps SDK. I am using the SDK to programmatically draw polygon shapes onto a web map. The vast majority of the polygons are drawn correctly, however there are two edge cases I have encountered where the polygon is not drawn correctly. In both cases, there is an additional line that is drawn that is not visible in ArcPro. This only seems to occur when drawing donut-shaped geometry. This is how the polygon looks in ArcPro:
In the web map, an additional line is drawn on the geometry.
I have also encountered this issue when drawing more complex polygons. Here is a more complex polygon in ArcPro.
Now in the web map, it is drawn with an extra line as before.
This is the code I am using to draw the polygon shape. The shape data is pulled from a web service as JSON and then is programmatically drawn on the map using the JavaScript maps SDK
data['Polygons'].forEach(polygon => {
const points = polygon.Polygon.Points.map(part => part.map(point => [point.X, point.Y]));
const clonedPolygonSymbol = JSON.parse(JSON.stringify(polygonCimSymbolData));
if (geometryData[polygon.Procedure.PROCEDURE_CATEGORY_CODE] != null) {
clonedPolygonSymbol.symbol.symbolLayers[2].markerGraphics[0].geometry.rings = geometryData[polygon.Procedure.PROCEDURE_CATEGORY_CODE]
} else {
clonedPolygonSymbol.symbol.symbolLayers[2].markerGraphics[0].geometry.rings = icons['question']
}
clonedPolygonSymbol.symbol.symbolLayers[1].color = [255, 0, 255, 255];
clonedPolygonSymbol.symbol.symbolLayers[3].color = [255, 0, 255, 128];
const polygonGraphic = new Graphic({
geometry: new Polygon({
hasZ: false,
hasM: false,
rings: points,
spatialReference: spatialReference
}),
popupTemplate: new PopupTemplate({
title: polygon.Procedure.PROCEDURE_ID,
content: createTableContent(polygon.Procedure)
}),
symbol: new CIMSymbol({ data: clonedPolygonSymbol })
});
if (!graphics.hasOwnProperty(polygon.Procedure.PROCEDURE_CATEGORY_CODE)) {
graphics[polygon.Procedure.PROCEDURE_CATEGORY_CODE] = new Collection();
}
graphics[polygon.Procedure.PROCEDURE_CATEGORY_CODE].add(polygonGraphic);
})
This is the JSON data for the complex polygon I am attempting to draw on the map:
Spoiler
{
"Points": [
[
{
"X": -4386.659900000319,
"Y": 5657508.6786
},
{
"X": -4386.735000000335,
"Y": 5657532.218
},
{
"X": -4547.322100000456,
"Y": 5657799.272700001
},
{
"X": -4559.772800000384,
"Y": 5657833.843599999
},
{
"X": -4621.685499999672,
"Y": 5657921.156199999
},
{
"X": -4761.38570000045,
"Y": 5658005.2939
},
{
"X": -4809.01080000028,
"Y": 5658049.744000001
},
{
"X": -4891.560999999754,
"Y": 5658097.369100001
},
{
"X": -4926.486100000329,
"Y": 5658157.6942
},
{
"X": -4980.461199999787,
"Y": 5658222.7818
},
{
"X": -5017.7718000002205,
"Y": 5658269.047
},
{
"X": -5019.587100000121,
"Y": 5658271.597100001
},
{
"X": -5023.911799999885,
"Y": 5658274.8167
},
{
"X": -5023.908999999985,
"Y": 5658284.422
},
{
"X": -5023.908699999563,
"Y": 5658285.5328
},
{
"X": -5023.906799999997,
"Y": 5658292.0428
},
{
"X": -5029.936099999584,
"Y": 5658296.0425
},
{
"X": -5054.240100000054,
"Y": 5658315.812899999
},
{
"X": -5078.645999999717,
"Y": 5658338.771500001
},
{
"X": -5090.390399999917,
"Y": 5658347.249
},
{
"X": -5102.566200000234,
"Y": 5658355.0943
},
{
"X": -5115.1392999999225,
"Y": 5658362.285499999
},
{
"X": -5128.074799999595,
"Y": 5658368.8026
},
{
"X": -5141.3364000003785,
"Y": 5658374.6274
},
{
"X": -5154.887099999934,
"Y": 5658379.7435
},
{
"X": -5168.689199999906,
"Y": 5658384.1368
},
{
"X": -5182.704099999741,
"Y": 5658387.795
},
{
"X": -5196.892599999905,
"Y": 5658390.707699999
},
{
"X": -5211.215099999681,
"Y": 5658392.867000001
},
{
"X": -5225.6317999996245,
"Y": 5658394.266799999
},
{
"X": -5240.102199999616,
"Y": 5658394.903100001
},
{
"X": -5254.586000000127,
"Y": 5658394.7742
},
{
"X": -5269.042799999937,
"Y": 5658393.8805
},
{
"X": -5283.4323000004515,
"Y": 5658392.224400001
},
{
"X": -5297.7141000004485,
"Y": 5658389.8105999995
},
{
"X": -5311.848600000143,
"Y": 5658386.6459
},
{
"X": -5325.7960999999195,
"Y": 5658382.7389
},
{
"X": -5339.517799999565,
"Y": 5658378.1007
},
{
"X": -5352.975399999879,
"Y": 5658372.7443
},
{
"X": -5366.1312999995425,
"Y": 5658366.6844
},
{
"X": -5378.948699999601,
"Y": 5658359.938200001
},
{
"X": -5412.3698000004515,
"Y": 5658345.0844
},
{
"X": -5415.922100000083,
"Y": 5658341.2794
},
{
"X": -5475.762299999595,
"Y": 5658208.4944
},
{
"X": -5504.337299999781,
"Y": 5658133.8817
},
{
"X": -5544.795300000347,
"Y": 5658099.308499999
},
{
"X": -5548.351800000295,
"Y": 5658096.269300001
},
{
"X": -5550.672299999744,
"Y": 5658094.2863
},
{
"X": -5550.947599999607,
"Y": 5658094.051100001
},
{
"X": -5550.995600000024,
"Y": 5658094.0101
},
{
"X": -5559.0180000001565,
"Y": 5658087.1546
},
{
"X": -5558.355100000277,
"Y": 5658086.4092
},
{
"X": -5557.542000000365,
"Y": 5658086.105
},
{
"X": -5553.55709999986,
"Y": 5658081.882999999
},
{
"X": -5551.996600000188,
"Y": 5658080.229699999
},
{
"X": -5549.241499999538,
"Y": 5658077.3105999995
},
{
"X": -5541.112499999814,
"Y": 5658068.697899999
},
{
"X": -5536.571800000034,
"Y": 5658064.0602
},
{
"X": -5535.571600000374,
"Y": 5658063.038699999
},
{
"X": -5534.972900000401,
"Y": 5658062.427200001
},
{
"X": -5536.32620000001,
"Y": 5658061.142899999
},
{
"X": -5537.475499999709,
"Y": 5658060.052200001
},
{
"X": -5550.660199999809,
"Y": 5658047.5394
},
{
"X": -5561.428899999708,
"Y": 5658037.319399999
},
{
"X": -5568.799499999732,
"Y": 5658030.3244
},
{
"X": -5573.835599999875,
"Y": 5658025.545
},
{
"X": -5581.945100000128,
"Y": 5658017.8487
},
{
"X": -5587.564100000076,
"Y": 5658012.516000001
},
{
"X": -5595.430399999954,
"Y": 5658005.0506
},
{
"X": -5597.01090000011,
"Y": 5658003.5506
},
{
"X": -5601.034500000067,
"Y": 5657999.732000001
},
{
"X": -5602.345399999991,
"Y": 5657998.4879
},
{
"X": -5609.626400000416,
"Y": 5657991.5779
},
{
"X": -5609.952800000086,
"Y": 5657991.268200001
},
{
"X": -5620.186300000176,
"Y": 5657981.5561999995
},
{
"X": -5621.6726999999955,
"Y": 5657980.145500001
},
{
"X": -5623.194199999794,
"Y": 5657978.7015
},
{
"X": -5623.778900000267,
"Y": 5657978.1467
},
{
"X": -5634.909500000067,
"Y": 5657967.5833
},
{
"X": -5653.107400000095,
"Y": 5657950.3127999995
},
{
"X": -5653.066399999894,
"Y": 5657950.266100001
},
{
"X": -5652.457600000314,
"Y": 5657949.573999999
},
{
"X": -5644.718500000425,
"Y": 5657940.7754999995
},
{
"X": -5641.408599999733,
"Y": 5657937.012499999
},
{
"X": -5641.179899999872,
"Y": 5657936.7524999995
},
{
"X": -5638.5218000002205,
"Y": 5657933.7305
},
{
"X": -5636.329599999823,
"Y": 5657931.2381
},
{
"X": -5629.5999999996275,
"Y": 5657923.587300001
},
{
"X": -5628.952100000344,
"Y": 5657922.8507
},
{
"X": -5619.354000000283,
"Y": 5657912.349199999
},
{
"X": -5615.778699999675,
"Y": 5657908.4374
},
{
"X": -5614.802099999972,
"Y": 5657907.4727
},
{
"X": -5612.420300000347,
"Y": 5657905.115800001
},
{
"X": -5608.018299999647,
"Y": 5657900.7761
},
{
"X": -5601.05989999976,
"Y": 5657893.8926
},
{
"X": -5593.877100000158,
"Y": 5657886.8094999995
},
{
"X": -5591.713399999775,
"Y": 5657884.666099999
},
{
"X": -5589.013899999671,
"Y": 5657881.991800001
},
{
"X": -5586.934100000188,
"Y": 5657879.931500001
},
{
"X": -5583.99990000017,
"Y": 5657877.0001
},
{
"X": -5583.271200000308,
"Y": 5657876.2722
},
{
"X": -5581.400100000203,
"Y": 5657874.3201
},
{
"X": -5578.815700000152,
"Y": 5657871.6182
},
{
"X": -5574.836500000209,
"Y": 5657867.4563
},
{
"X": -5571.110399999656,
"Y": 5657863.589500001
},
{
"X": -5566.161000000313,
"Y": 5657858.429300001
},
{
"X": -5561.113199999556,
"Y": 5657853.170499999
},
{
"X": -5557.120000000112,
"Y": 5657849.0086
},
{
"X": -5553.211099999957,
"Y": 5657844.945
},
{
"X": -5549.963100000285,
"Y": 5657841.556399999
},
{
"X": -5549.079900000244,
"Y": 5657840.634
},
{
"X": -5515.404000000097,
"Y": 5657805.463300001
},
{
"X": -5481.084599999711,
"Y": 5657769.513900001
},
{
"X": -5456.4916000002995,
"Y": 5657743.5514
},
{
"X": -5452.364699999802,
"Y": 5657738.545499999
},
{
"X": -5447.770999999717,
"Y": 5657734.1269000005
},
{
"X": -5438.939000000246,
"Y": 5657724.6854
},
{
"X": -5434.723199999891,
"Y": 5657728.677100001
},
{
"X": -5430.921900000423,
"Y": 5657732.2762
},
{
"X": -5392.05420000013,
"Y": 5657769.077500001
},
{
"X": -5336.7384000001475,
"Y": 5657821.4526
},
{
"X": -5324.292500000447,
"Y": 5657833.2368
},
{
"X": -5316.942099999636,
"Y": 5657839.930299999
},
{
"X": -5313.938500000164,
"Y": 5657842.6
},
{
"X": -5309.301900000311,
"Y": 5657845.9257
},
{
"X": -5309.092199999839,
"Y": 5657846.076099999
},
{
"X": -5305.583700000308,
"Y": 5657848.592599999
},
{
"X": -5293.917600000277,
"Y": 5657854.5821
},
{
"X": -5281.700799999759,
"Y": 5657860.2575
},
{
"X": -5270.253600000404,
"Y": 5657865.8366
},
{
"X": -5259.479700000025,
"Y": 5657870.8386
},
{
"X": -5247.455299999565,
"Y": 5657876.7064
},
{
"X": -5236.2966000000015,
"Y": 5657881.4198
},
{
"X": -5224.849399999715,
"Y": 5657885.748500001
},
{
"X": -5220.276100000367,
"Y": 5657887.1927000005
},
{
"X": -5213.33420000039,
"Y": 5657889.3848
},
{
"X": -5213.091699999757,
"Y": 5657901.305500001
},
{
"X": -5213.068400000222,
"Y": 5657902.452299999
},
{
"X": -5212.049100000411,
"Y": 5657952.5634
},
{
"X": -5163.233400000259,
"Y": 5657952.5634
},
{
"X": -5163.233400000259,
"Y": 5657958.9134
},
{
"X": -5132.215200000443,
"Y": 5657959.409700001
},
{
"X": -5113.623900000006,
"Y": 5657959.7072
},
{
"X": -5113.623900000006,
"Y": 5657966.4541
},
{
"X": -5064.250699999742,
"Y": 5657966.065300001
},
{
"X": -5063.555999999866,
"Y": 5657966.059800001
},
{
"X": -5063.562199999578,
"Y": 5657977.926200001
},
{
"X": -5063.563699999824,
"Y": 5657980.8048
},
{
"X": -5063.617600000463,
"Y": 5657983.1229
},
{
"X": -5063.564899999648,
"Y": 5657983.1272
},
{
"X": -5060.492999999784,
"Y": 5657983.3780000005
},
{
"X": -5023.282599999569,
"Y": 5657986.4165
},
{
"X": -5018.751299999654,
"Y": 5657986.786499999
},
{
"X": -5017.248200000264,
"Y": 5657986.9092
},
{
"X": -5013.218899999745,
"Y": 5657987.2382
},
{
"X": -5013.208700000308,
"Y": 5657990.556399999
},
{
"X": -5009.936700000428,
"Y": 5657990.250399999
},
{
"X": -5008.958700000308,
"Y": 5657990.1589
},
{
"X": -4963.621799999848,
"Y": 5657985.9189
},
{
"X": -4963.659599999897,
"Y": 5657992.0206
},
{
"X": -4964.158599999733,
"Y": 5658072.4998
},
{
"X": -4924.624699999578,
"Y": 5658071.0282000005
},
{
"X": -4904.8650000002235,
"Y": 5658068.4421
},
{
"X": -4877.651100000367,
"Y": 5658052.917199999
},
{
"X": -4855.161500000395,
"Y": 5658042.6645
},
{
"X": -4813.489500000142,
"Y": 5658020.174900001
},
{
"X": -4813.820199999958,
"Y": 5657980.8181
},
{
"X": -4814.8125,
"Y": 5657909.7107
},
{
"X": -4809.205400000326,
"Y": 5657909.1866999995
},
{
"X": -4801.096300000325,
"Y": 5657908.3542
},
{
"X": -4787.26350000035,
"Y": 5657906.9341
},
{
"X": -4770.1974999997765,
"Y": 5657905.0569
},
{
"X": -4755.757100000046,
"Y": 5657902.804300001
},
{
"X": -4742.816999999806,
"Y": 5657899.988500001
},
{
"X": -4728.843000000343,
"Y": 5657896.656199999
},
{
"X": -4717.778300000355,
"Y": 5657893.4649
},
{
"X": -4706.525999999605,
"Y": 5657889.5228
},
{
"X": -4693.023199999705,
"Y": 5657884.079
},
{
"X": -4679.895600000396,
"Y": 5657878.072000001
},
{
"X": -4668.455799999647,
"Y": 5657872.0649999995
},
{
"X": -4658.14120000042,
"Y": 5657866.2458
},
{
"X": -4649.326899999753,
"Y": 5657860.801899999
},
{
"X": -4640.700100000016,
"Y": 5657854.9826
},
{
"X": -4630.948099999689,
"Y": 5657847.661599999
},
{
"X": -4620.821100000292,
"Y": 5657839.402000001
},
{
"X": -4609.26900000032,
"Y": 5657828.982999999
},
{
"X": -4599.141900000162,
"Y": 5657819.4092999995
},
{
"X": -4590.327600000426,
"Y": 5657809.8357
},
{
"X": -4580.388100000098,
"Y": 5657798.009400001
},
{
"X": -4572.511500000022,
"Y": 5657787.684900001
},
{
"X": -4562.5719999996945,
"Y": 5657773.418299999
},
{
"X": -4552.444899999537,
"Y": 5657756.8991
},
{
"X": -4541.3801999995485,
"Y": 5657738.1272
},
{
"X": -4528.728000000119,
"Y": 5657717.4418
},
{
"X": -4517.850800000131,
"Y": 5657699.7962
},
{
"X": -4500.409699999727,
"Y": 5657671.075300001
},
{
"X": -4488.032200000249,
"Y": 5657651.177200001
},
{
"X": -4469.841000000015,
"Y": 5657622.080800001
},
{
"X": -4439.702700000256,
"Y": 5657573.574200001
},
{
"X": -4424.699599999934,
"Y": 5657548.983100001
},
{
"X": -4416.260400000028,
"Y": 5657535.842800001
},
{
"X": -4409.508999999613,
"Y": 5657527.771
},
{
"X": -4402.038900000043,
"Y": 5657520.7193
},
{
"X": -4392.099399999715,
"Y": 5657512.2719
},
{
"X": -4390.934200000018,
"Y": 5657511.5022
},
{
"X": -4386.659900000319,
"Y": 5657508.6786
},
{
"X": -5018.638299999759,
"Y": 5658124.7017
},
{
"X": -5062.559299999848,
"Y": 5658124.172499999
},
{
"X": -5162.172799999826,
"Y": 5658124.666200001
},
{
"X": -5162.042799999937,
"Y": 5658147.4559
},
{
"X": -5163.191700000316,
"Y": 5658267.826300001
},
{
"X": -5163.495699999854,
"Y": 5658310.5363
},
{
"X": -5126.4539000000805,
"Y": 5658310.5363
},
{
"X": -5120.569600000046,
"Y": 5658307.7031
},
{
"X": -5070.07330000028,
"Y": 5658283.389900001
},
{
"X": -5022.871700000018,
"Y": 5658240.589400001
},
{
"X": -5018.638299999759,
"Y": 5658124.7017
},
{
"X": -5322.023299999535,
"Y": 5658185.890799999
},
{
"X": -5322.063400000334,
"Y": 5658002.478399999
},
{
"X": -5389.887799999677,
"Y": 5657938.0843
},
{
"X": -5392.604899999686,
"Y": 5657940.9581
},
{
"X": -5414.978400000371,
"Y": 5657964.6219999995
},
{
"X": -5461.18499999959,
"Y": 5658013.569
},
{
"X": -5512.509800000116,
"Y": 5658067.786599999
},
{
"X": -5473.7869999995455,
"Y": 5658104.34
},
{
"X": -5401.873999999836,
"Y": 5658172.223999999
},
{
"X": -5357.620000000112,
"Y": 5658213.999
},
{
"X": -5321.920500000007,
"Y": 5658247.6982
},
{
"X": -5322.023299999535,
"Y": 5658185.890799999
}
]
]
}
