z-ordering drawings (polygons) with billboards

[PetukhovArt]

some solution , to make billboards ( label on this screenshot) be over the polygon ?
now all billboards render under the polygon area , and it is impossible to click them

[zouyaoji]

https://github.com/zouyaoji/vue-cesium/blob/dev/packages/composables/use-drawing/use-drawing-action.ts#L152

[PetukhovArt]

thanks, now the image of billbord is above the polygon area
and onClick event working ! im happy :)

i apply this code for billboard collection

      <!--  pins -->
      <vc-collection-billboard
          v-if="viewerReadyFlag"
          :billboards="drawingStore.pinsCollection"
          @click="drawingStore.onPinClickShowContextMenu"
          @ready="drawingStore.onPinsCollectionReady"
      />
      
        onPinsCollectionReady(e: VcReadyObject) {
            try {
                const { cesiumObject: pinsBillboardCollection } = e as any
                const originalUpdate = pinsBillboardCollection.update

                pinsBillboardCollection.update = function (frameState: any) {
                    const originalLength = frameState.commandList.length
                    originalUpdate.call(this, frameState)
                    const endLength = frameState.commandList.length
                    for (let i = originalLength; i < endLength; ++i) {
                        frameState.commandList[i].pass = Cesium['Pass'].TRANSLUCENT
                        frameState.commandList[i].renderState = Cesium['RenderState'].fromCache({
                            depthTest: {
                                enabled: false
                            },
                            depthMask: false
                        })
                    }
                }
            } catch (e) {
                console.error(e)
            }
        },

[PetukhovArt]

https://github.com/zouyaoji/vue-cesium/blob/dev/packages/composables/use-drawing/use-drawing-action.ts#L152

@zouyaoji some suggestion for vc-datasource-custom ? ( i use it for manual clustering my html overlays)

[zouyaoji]

const topPrimitive = e => {
  const datasource = e.cesiumObject
  const primitive = datasource._primitives
  const originalUpdate = primitive.update
  primitive.update = function (frameState) {
    const originalLength = frameState.commandList.length
    originalUpdate.call(this, frameState)
    const endLength = frameState.commandList.length
    for (let i = originalLength; i < endLength; ++i) {
      frameState.commandList[i].pass = Cesium['Pass'].OVERLAY
      frameState.commandList[i].renderState = Cesium['RenderState'].fromCache({
        depthTest: {
          enabled: false
        },
        depthMask: false,
        blending: Cesium.BlendingState.ALPHA_BLEND
      })
    }
  }
}

<vc-datasource-custom @ready="topPrimitive " ...