# When we add a label to Polygon with extrudedHeight set, the label's style will be affected

**URL:** <https://community.cesium.com/t/when-we-add-a-label-to-polygon-with-extrudedheight-set-the-labels-style-will-be-affected/26868>\
**Category:** CesiumJS\
**Created:** [September 20, 2023, 5:44am UTC](https://community.cesium.com/t/when-we-add-a-label-to-polygon-with-extrudedheight-set-the-labels-style-will-be-affected/26868 "2023-09-20T05:44:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![OliverWang](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/oliverwang/32/14037_2.png) [@OliverWang](https://community.cesium.com/u/OliverWang)\
**Post date:** [September 20, 2023, 5:44am UTC](https://community.cesium.com/t/when-we-add-a-label-to-polygon-with-extrudedheight-set-the-labels-style-will-be-affected/26868/1 "2023-09-20T05:44:48Z")

</div>

When we add a label to Polygon with extrudedHeight set, the label’s style will be affected.

**Here’s my code**

```auto
var viewer = new Cesium.Viewer("cesiumContainer");

var redPolygon = viewer.entities.add({
  name: "Red polygon on surface",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([-115.0,37.0,-115.0,32.0,-107.0,33.0,-102.0,31.0,-102.0,35.0,]),
    material: new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString('#1b2876').withAlpha(0.6)),
  },
});
var polyPositions = redPolygon.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;//中心点
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
redPolygon.position = polyCenter;
redPolygon.polygon.extrudedHeight = new Cesium.ConstantProperty(10000.0);
redPolygon.label={
    // position:
    text:'Red polygon on surface',
    color : Cesium.Color.fromCssColorString('#fff'),
    font:'normal 32px MicroSoft YaHei',
    scale : 0.5,
  
    horizontalOrigin : Cesium.HorizontalOrigin.LEFT_CLICK,
    heightReference:Cesium.HeightReference.RELATIVE_TO_GROUND,
    verticalOrigin : Cesium.VerticalOrigin.BASELINE,
    disableDepthTestDistance : 10000.0,
    //distanceDisplayCondition:new Cesium.DistanceDisplayCondition(10.0, 20000.0)
};

viewer.zoomTo(viewer.entities);

```

**This is the effect**

 ![Snipaste_2023-09-20_13-41-50](https://global.discourse-cdn.com/cesium/original/3X/9/f/9f72ad30569f60fee5620f9c54a1f77f07a8032b.jpeg)

> The text should be white, but it is affected by polygon’s texture

[sandcastle](https://sandcastle.cesium.com/index.html#c=hVTdbtowFH4Vi10QJGagrD9KabUWWNuN/qiwTtOYKpOcEGvGjmwHSqfebM+z++1qL7Npr7HjJLRAOw2hxDk+3/n5vmNPmSZTDjPQZI9ImJE2GJ5O6FVm84alIPtuK2kZl6CHpcruUA7lFHEawgsl5mMlEZsHoSAttxwMZWHofR5KQiSbgE+GpUsISVK449+kOmIBDEtV51Rs+CSDEBJz0EwH8dxfFNRm2uKKySaNtJp0YKwBzIHWbO59eN5obNJ6tbmNj8V6I1vXnanZzNfO1GwsrZ0j+Vip5kknzILmTPjLRLSVUPq02LnQKgFt597yZlZP25jso281l2Ov/Kwx2tjZ3ipX6Izb+EAkMfPqdKuS57rD550j0tHoer9QBmlT0iCTD7TSghZ6Twcdg71iIoVFBa9TgZx0sD4q1cyrVBBThFoK30ZZMoUL1KFKZYh19pMYNGQNXCgurfFWiqnQIAPu1mq/vn/7/fPrny8/hvKpgF0heGIUD+m7o/7OC2oCJmCgjkCFYHnQz8X2HqCu+ZVG85QY8cFn3SV/w43VaQjhMfBxbFenFsfUWCbtvU6NOv5ofS2bYCMQe8Wo1Wpkkd3PLRZT+OWn57VczErgxCY++f8gRFFUXkxYhMfIL0ulJ0yQ5kZyQ055oFVfRZa8Z9jRInzGH4av083MUpwKpfmtO4niXPMxlw/5j9d2aK/7anDd7p203xQR44yuS4hQcBmAvwCumullt3cwOLnqXg/Or48uz9+edQr8FPnkwePMVyt2enjQ7/ZOzroFKuSGjQR0ILHxAIztcKdP4ForpKkuVAiLLXRJBJujlGEuypK+nX/4oM7uJG8UauPhyi+p/E66VWoyUN7aDeVmolQttYydC9jPqyDkJZ8kSluSauFRWrMwwUR48dRGafAJLA1MBnSurdoytBXyKeHh3hM3JgkEMwZ3olSIPr/FS2+/hf1OH0GFYu5YniPZ2J5zixv7vdxIKW3V8PNppFVKjJhei/wX)

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [September 22, 2023, 6:11pm UTC](https://community.cesium.com/t/when-we-add-a-label-to-polygon-with-extrudedheight-set-the-labels-style-will-be-affected/26868/2 "2023-09-22T18:11:37Z")

</div>

Hi there,

This looks similar to [Translucency issues with label on top of billboard · Issue #9681 · CesiumGS/cesium · GitHub](https://github.com/CesiumGS/cesium/issues/9681). I wonder if the issue is not restricted to billboards, but rather translucent object rendering in general.

I’ll add your report to that issue as well.

---

<div class="post-metadata">

**Author:** ![OliverWang](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/oliverwang/32/14037_2.png) [@OliverWang](https://community.cesium.com/u/OliverWang)\
**Post date:** [September 25, 2023, 5:51am UTC](https://community.cesium.com/t/when-we-add-a-label-to-polygon-with-extrudedheight-set-the-labels-style-will-be-affected/26868/3 "2023-09-25T05:51:16Z")

</div>

Thank you for your response, however, I believe this issue is of a different nature. If the polygon.extrudedHeight property is not set, the desired effect remains unaffected.

 ![Snipaste_2023-09-25_13-49-54](https://global.discourse-cdn.com/cesium/original/3X/9/e/9e7dde580f3f131ccea4cec8da49ebe8d6749fa2.jpeg)

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [September 25, 2023, 7:50pm UTC](https://community.cesium.com/t/when-we-add-a-label-to-polygon-with-extrudedheight-set-the-labels-style-will-be-affected/26868/4 "2023-09-25T19:50:06Z")

</div>

I think the bug is occurring for similar reasons which are described more in-depth in [Separate pass for billboards · Issue #8810 · CesiumGS/cesium · GitHub](https://github.com/CesiumGS/cesium/issues/8810).

As a workaround, you can set ` orderIndependentTranslucency` to `false` and then specify an `eyeOffset` for the label.

```auto
var viewer = new Cesium.Viewer("cesiumContainer", {
 orderIndependentTranslucency: false,
});

```

```auto
redPolygon.label = {
    ...
    eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -800000.0)
};

```

[Sandcastle](https://sandcastle.cesium.com/index.html#c=hVRfb9owEP8qFnsgSNRAWf8opdVaYG03WqrCOk1jqkxyIdaMHdkOLZ36sn2evW9P+zKb9jV2TkILtNIiZOzz3f3ufnfnGdNkxuEGNNknEm5IGwxPp/Qqk3mjUpCd20paxiXoUalKvowkUToEfSpDSAAXaYeaSSPSAGQw90nEhIHqSN5X9kZyJGcIoiG8UGI+URKBckSKdtxyMJSFoee8Esmm4JNR6RJCkhTq+DOpjlgACO6Uigs/CwS/mINmOogRuIi+zbTFHZNNGmk17cBEA5hDrdnc+7jRaGzRerW5g8tiv5nt607UbOZ7J2o2lvZOkXyqVHPQKbOgORP+MmttJZQ+K24utEpA27m3fJnF0zYmOwys5nLilV80xpu7O9vlCr3hNj4UScy8Ot2u5Fj3CyIdjS73C2WQNiUNMvlIKy1ooQ900AnYKyZSWETwJhXISQfjo1LdeJUK2hSulty3sSxZOxRWRyqVIcY5SGLQkCVwobi0xlsJpkKDzHCvVvv94/ufX9/+fv05ks857ArBE6N4SN8fD3ZfUhMwAUN1DCoEy4NBXmzv0dQlv5JoDokeH3XWVfJ/uLU6DSE8AT6J7WqLY08by6R9qFOjjh+tr6EJNgaxX7RarUYW6H4usQjhl5/v13LRK4ErNvHJ/xshiqLyosMinDm/LJWeMkGam8ktOeOBVgMVWfKBYUYL9xl/6L5OtzJJMRVK8zs3tqKv+YTLR/yTtRva674eXrd7p+23hcc4o+sSIiy4DMBfGK6K6WW3dzg8vepeD/vXx5f9d+edwn6GfPLgKfLVipweHQ66vdPzbnVBbsgNGwvoQGLjIRjb4a5CgUuuKE6hCnPoR5EBuzp+D2PvOVWSLRu79aKuOEb5c5S/PndKTYfKW3uLXPVL1VLL2LmAgxyNkFd8mihtSaqFR2nNwjQROEamNk6Dz2BpYDJDp9qqLZu2Qj4jPNx/5iElgWDG4E2UCjHgd/i8HbSQgtkTU6GYG8A+0irY3KnFjYNeLqSUtmp4fN7SKiXGTK95/gc)