es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Estilo de mapbox-gl-draw data driven en LineString.

Utilizo Mapbox GL Draw y quiero personalizar el color de relleno de mi objeto LineString utilizando data driven.

Tengo una propiedad userProperties: true y tengo una propiedad con el prefijo user_ .

Aquí está mi configuración de estilo:


{
id: "gl-draw-linestring-fill-inactive",
type: "fill",
filter: ["all", ["==", "active", "false"], ["==", "$type", "LineString"],["!=", "mode", "static"],],
paint: {
"fill-color": [
"case",
["==", ["get", "user_type"], "meetingRoom"],
"#00ff00",
["==", ["get", "user_type"], "notUsed"],
"#00ff00",
"#ff0000",
],
"fill-outline-color": "#3bb2d0",
"fill-opacity": 0.4,
},
}

Y mi objeto:


{
"type": "Feature",
"id": "ROOM-floor-1-1",
"properties": {
"parentId": "floor-1",
"user_type": "notUsed"
},
"geometry": {
"coordinates": [
[2.334699793548168, 48.85506145052912],
[2.3334337908935083, 48.85340956808176],
[2.3360301692199243, 48.85314130852265],
[2.3368884761040363, 48.85547088304844],
[2.3368884761040363, 48.85547088304844],
[2.334699793548168, 48.85506145052912]
],
"type": "LineString"
}
}

El objeto siempre se pinta con el valor predeterminado (#ff0000). Debería ser #00ff00 en este ejemplo.
En la misma aplicación utilizo la misma propiedad (user_type) para establecer el color de línea en un polígono y funciona bien.

¿Alguna idea?

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para personalizar el color de relleno de una característica de tipo LineString utilizando datos impulsados por Mapbox GL Draw, puedes intentar modificar la configuración de estilo agregando una función impulsada por datos para la propiedad fill-color.

    En este caso, dado que la bandera userProperties está establecida en true y la propiedad user_type está precedida por user_, puedes utilizar la función get para acceder al valor de la propiedad user_type en la función impulsada por datos. Aquí tienes un ejemplo de cómo modificar la configuración de estilo:

    {
      id: "gl-draw-linestring-fill-inactive",
      type: "fill",
      filter: ["all", ["==", "active", "false"], ["==", "$type", "LineString"], ["!=", "mode", "static"]],
      paint: {
        "fill-color": [
          "case",
          ["==", ["get", "user_type"], "meetingRoom"],
          "#00ff00",
          ["==", ["get", "user_type"], "notUsed"],
          "#00ff00",
          "#ff0000"
        ],
        "fill-outline-color": "#3bb2d0",
        "fill-opacity": 0.4,
      },
    }
    

    Esto establecerá el color de relleno de la característica de tipo LineString en #00ff00 si el valor de la propiedad user_type es “meetingRoom” o “notUsed”. Si el valor es cualquier otra cosa, se utilizará el color predeterminado #ff0000.

Comments are closed.