用嵌套表达式确定圆圈颜色

Question

我使用 GeoJSON 作为我的来源，其中每个实体都有一个状态。我想为每个实体绘制圆圈，圆圈颜色基于状态，以及圆圈是否被点击。

确定“点击状态”是通过 setFeatureState() 完成的，其中一个特征在被点击时接收到“点击”状态。

我尝试先检查点击状态并根据点击与否匹配状态：

    "circle-color": [
        'case',
        ['boolean',
            ['feature-state', 'click'],
            false,
        ],
        ['match',          //Feature clicked = true
            ['get', 'state'],
            'SOME_FEATURE_STATE_STRING',
            '#57E757',  // possible match
            'SOME_OTHER_FEATURE_STATE_STRING',
            '#123456',  // possible match

            '#123456' //fallback
        ],
        '#001ebe'           //Feature clicked = false
    ]

“未点击”的圆圈颜色正确。但是，当我单击圆圈时，圆圈颜色变为黑色，而不是我的“匹配”颜色。

非常感谢任何建议！

Answer 1

我认为你的 case 表达不正确 :

['boolean', 
  ['feature-state', 'click'],
  false,
],

您使用了 boolean types expression, which is a type 表达式（它断言输入值为布尔值）。

在您的情况下，您想使用 decision 表达式。

使用 == 运算符，如果输入值相等，则可以 return true，否则 false。

您的 case 表达式将变为：

"circle-color": [
 'case',
 ['==', ['feature-state', 'click'], true],
 ['match',     // Feature clicked = true
   ['get', 'state'],
   'SOME_FEATURE_STATE_STRING',
   '#57E757',  // Possible match
   
   'SOME_OTHER_FEATURE_STATE_STRING',
   '#123456',  // Possible match
   
   '#123456'   // Fallback
 ],
 '#001ebe'     // Feature clicked = false
]

用嵌套表达式确定圆圈颜色

determining circle-color with nested expressions

javascript

mapbox

mapbox-gl-js