Select to view content in your preferred language

Issue with changing feature colors in 3D using UniqueValueRenderer in SceneView

172
0
09-24-2024 05:06 AM
pibanez_CSIC
New Contributor

Hello everyone,

I'm facing an issue while trying to apply a UniqueValueRenderer on a 3D FeatureLayer in a SceneView. My goal is to change the color of the features based on an alert field coming from a CSV file. I have managed to get it working perfectly in 2D (MapView), but when switching to 3D, all the features appear with the same color, instead of applying unique colors based on the alert values.

What I'm doing:

  1. Loading a CSV file containing alert data (values like "A5", "A4", etc.) linked to a comarca_sg field in the layer.
  2. Using a UniqueValueRenderer to change the color of the features based on the comarca_sg field and the alert value from the CSV.
  3. The function getColorBasedOnAlert assigns a color depending on the alert value ("A5" = dark red, "A4" = light red, etc.).

The problem:

  • In 2D, the colors change correctly for each feature.
  • In 3D (SceneView), all the features render with the same color, even though the same UniqueValueRenderer is applied.

Here’s the relevant code:

 

// Function to update the layer's symbology
function updateLayerSymbology(data) {
    const uniqueValues = data.map(function(element) {
        return {
            value: element.id,  // id from the CSV related to the layer
            symbol: {
                type: "polygon-3d",  // 3D symbol for polygons
                symbolLayers: [{
                    type: "fill",
                    material: {
                        color: getColorBasedOnAlert(element.alerta)  // Color based on the alert value
                    },
                    outline: { color: "black" }
                }]
            }
        };
    });

    const renderer = {
        type: "unique-value",
        field: "comarca_sg",  // Field in the layer corresponding to the id from the CSV
        uniqueValueInfos: uniqueValues,
        defaultSymbol: {  // Default symbol
            type: "polygon-3d",
            symbolLayers: [{
                type: "fill",
                material: { color: "gray" },
                outline: { color: "black" }
            }]
        }
    };

    featureLayer.renderer = renderer;
}

// Function to get the color based on the alert value
function getColorBasedOnAlert(alerta) {
    alerta = alerta.trim();
    if (alerta === "A5") return "#d73027";  // Dark red
    else if (alerta === "A4") return "#fc8d59";  // Light red
    else if (alerta === "A3") return "#fee08b";  // Yellow
    else if (alerta === "A2") return "#d9ef8b";  // Yellow-green
    else if (alerta === "A1") return "#91cf60";  // Light green
    else if (alerta === "A0" || alerta === "NO ALERTA") return "#1a9850";  // Dark green
    else return "#1a9850";  // Default green
}

 

What I’ve tried:

  • Verified that the alert values are passed correctly using console.log().
  • Tried removing the defaultSymbol to ensure it wasn’t overriding the renderer.
  • Ensured that the comarca_sg field is correctly aligned between the CSV and the layer.

Questions:

  1. Is there anything different I should consider when applying a UniqueValueRenderer in a SceneView compared to a MapView?
  2. Could there be a limitation or difference in how renderers are applied in 3D?

I would appreciate any advice or suggestions on how to solve this problem. Thanks in advance!

0 Kudos
0 Replies