Mapbox GL JS 核心表达式：`all` 多条件且判断完全教程

all 是 Mapbox GL JS 表达式系统中最核心的逻辑判断表达式之一，用于实现多条件"且"判断 ------只有所有输入的布尔表达式结果均为 true 时，all 才返回 true；且支持短路求值 （一旦某个条件为 false，立即停止后续条件计算），既能精准控制逻辑，又能优化性能。本文将从核心概念、语法、实战场景、进阶优化到常见误区，全面讲解 all 表达式的使用方法。

一、`all` 表达式核心概念

1.1 核心定义

all 表达式实现"逻辑与"（AND）功能：

接收 2 个及以上布尔类型表达式 作为输入；
只有所有输入表达式结果为 true 时，最终返回 true；
短路求值特性：按顺序评估输入条件，一旦某个条件返回 false，立即终止后续条件计算并返回 false（可大幅减少不必要的计算开销）。

1.2 语法格式

官方定义的语法简洁且灵活（支持任意数量布尔表达式）：

javascript 复制代码

// 基础版：2 个条件
["all", booleanExpr1, booleanExpr2]: boolean

// 进阶版：N 个条件（常用）
["all", booleanExpr1, booleanExpr2, ..., booleanExprN]: boolean

参数说明：

booleanExpr1/2/...：必须是返回布尔值的表达式 （如 ==/!=/</> 比较表达式、in 成员判断表达式等）；
非布尔值输入会触发解析错误（如直接传字符串、数字）。

1.3 与 `==` 的配合逻辑

all 本身不直接做值比较，而是组合多个比较表达式 实现复杂逻辑，最常用的搭配是 ==（相等判断）、</>（数值比较）、in（成员判断）等，例如：

javascript 复制代码

// 条件1：类型是餐厅，条件2：评分>4.5 → 两个条件都满足才返回true
["all", ["==", ["get", "type"], "restaurant"], [">", ["get", "score"], 4.5]]

二、前置准备

所有示例需先初始化 Mapbox 地图（替换为自己的 Access Token，从 Mapbox 官网获取）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Mapbox all 表达式示例</title>
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
    <style>
        body { margin: 0; padding: 0; }
        #map { width: 100vw; height: 100vh; }
        .controls { position: absolute; top: 20px; left: 20px; background: #fff; padding: 12px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
<div id="map"></div>
<div class="controls">
    <button id="filterGoodRestaurant">显示高分餐厅</button>
    <button id="resetFilter">重置筛选</button>
</div>
<script>
mapboxgl.accessToken = '你的 Mapbox Access Token'; // 替换为自己的 Token
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [116.4074, 39.9042], // 北京坐标
    zoom: 14
});
</script>
</body>
</html>

三、基础使用场景

3.1 场景1：多条件过滤图层要素

all 最常用的场景是图层过滤（filter）------仅显示同时满足多个条件的要素，精准缩小展示范围。

示例：筛选"类型为餐厅 + 评分>4.5 + 营业中"的 POI 要素：

javascript 复制代码

map.on('load', () => {
    // 模拟带多属性的 POI 数据
    const poiData = {
        type: 'FeatureCollection',
        features: [
            {
                type: 'Feature',
                geometry: { type: 'Point', coordinates: [116.4074, 39.9042] },
                properties: { type: 'restaurant', score: 4.8, isOpen: true, name: '北京饭店' }
            },
            {
                type: 'Feature',
                geometry: { type: 'Point', coordinates: [116.4084, 39.9052] },
                properties: { type: 'restaurant', score: 3.9, isOpen: true, name: '街边小馆' }
            },
            {
                type: 'Feature',
                geometry: { type: 'Point', coordinates: [116.4094, 39.9062] },
                properties: { type: 'coffee', score: 4.7, isOpen: true, name: '星巴克' }
            },
            {
                type: 'Feature',
                geometry: { type: 'Point', coordinates: [116.4104, 39.9072] },
                properties: { type: 'restaurant', score: 4.6, isOpen: false, name: '高端私房菜' }
            }
        ]
    };

    // 1. 添加数据源
    map.addSource('poi-source', {
        type: 'geojson',
        data: poiData
    });

    // 2. 添加图层：默认显示所有 POI（基础样式）
    map.addLayer({
        id: 'poi-all',
        type: 'circle',
        source: 'poi-source',
        paint: {
            'circle-radius': 8,
            'circle-color': '#999999' // 灰色默认样式
        },
        filter: ['all'] // 空 all 等价于无过滤（所有要素显示）
    });

    // 3. 按钮交互：筛选"餐厅 + 评分>4.5 + 营业中"的要素
    document.getElementById('filterGoodRestaurant').onclick = () => {
        map.setFilter('poi-all', [
            'all', // 多条件且判断
            ['==', ['get', 'type'], 'restaurant'], // 条件1：类型是餐厅
            ['>', ['get', 'score'], 4.5], // 条件2：评分>4.5
            ['==', ['get', 'isOpen'], true] // 条件3：营业中
        ]);
        // 同步更新样式：高亮符合条件的要素
        map.setPaintProperty('poi-all', 'circle-color', '#ff4500');
        map.setPaintProperty('poi-all', 'circle-radius', 12);
    };

    // 4. 重置筛选
    document.getElementById('resetFilter').onclick = () => {
        map.setFilter('poi-all', ['all']);
        map.setPaintProperty('poi-all', 'circle-color', '#999999');
        map.setPaintProperty('poi-all', 'circle-radius', 8);
    };
});

上述示例中，点击"显示高分餐厅"后，仅 北京饭店 会被显示（唯一满足"餐厅+评分>4.5+营业中"的要素），体现了 all 的"全条件满足"特性。

3.2 场景2：数据驱动样式（多条件样式控制）

结合 case 表达式与 all，可实现"多条件满足时应用特定样式"的效果，例如：仅对"公园 + 面积>1000㎡ + 有停车场"的要素使用绿色大圆圈样式。

示例：

javascript 复制代码

map.on('load', () => {
    // 模拟公园数据
    const parkData = {
        type: 'FeatureCollection',
        features: [
            {
                type: 'Feature',
                geometry: { type: 'Point', coordinates: [116.4074, 39.9042] },
                properties: { type: 'park', area: 2000, hasParking: true, name: '天安门广场' }
            },
            {
                type: 'Feature',
                geometry: { type: 'Point', coordinates: [116.4084, 39.9052] },
                properties: { type: 'park', area: 800, hasParking: true, name: '社区小公园' }
            },
            {
                type: 'Feature',
                geometry: { type: 'Point', coordinates: [116.4094, 39.9062] },
                properties: { type: 'park', area: 1500, hasParking: false, name: '城市绿地' }
            }
        ]
    };

    map.addSource('park-source', { type: 'geojson', data: parkData });

    // 添加图层：多条件样式控制
    map.addLayer({
        id: 'park-layer',
        type: 'circle',
        source: 'park-source',
        paint: {
            'circle-radius': [
                'case',
                // 条件：公园 + 面积>1000 + 有停车场 → 半径20
                ['all', 
                    ['==', ['get', 'type'], 'park'],
                    ['>', ['get', 'area'], 1000],
                    ['==', ['get', 'hasParking'], true]
                ],
                20,
                // 其他公园 → 半径10
                10
            ],
            'circle-color': [
                'case',
                ['all', 
                    ['==', ['get', 'type'], 'park'],
                    ['>', ['get', 'area'], 1000],
                    ['==', ['get', 'hasParking'], true]
                ],
                '#008000', // 绿色
                '#808080'  // 灰色
            ]
        }
    });
});

此示例中，仅 天安门广场 会显示为绿色大圆圈（满足所有条件），其余公园为灰色小圆圈。

四、进阶用法：短路求值的性能优化

all 的短路求值是核心优化点------将"计算成本低、大概率为 false"的条件放在前面，可避免不必要的复杂计算。

4.1 优化原理

例如，判断"某要素是餐厅 + 距离当前位置<1km"：

若先判断"距离<1km"（需计算地理距离，成本高），再判断"类型是餐厅"（简单属性读取），即使要素不是餐厅，也会先执行高成本的距离计算；
若先判断"类型是餐厅"（低成本），非餐厅要素会直接终止计算，跳过距离计算，大幅提升性能。

4.2 实战优化示例

javascript 复制代码

// 优化前：先计算距离（高成本），再判断类型
map.setFilter('poi-layer', [
    'all',
    ['<', ['distance', ['get', 'coordinates'], [116.4074, 39.9042]], 1000], // 高成本
    ['==', ['get', 'type'], 'restaurant'] // 低成本
]);

// 优化后：先判断类型（低成本），再计算距离（高成本）
map.setFilter('poi-layer', [
    'all',
    ['==', ['get', 'type'], 'restaurant'], // 低成本，先判断
    ['<', ['distance', ['get', 'coordinates'], [116.4074, 39.9042]], 1000] // 高成本，后判断
]);

五、常见误区与注意事项

5.1 混淆 `all` 与 `any`

all：所有条件必须满足（逻辑与）；
any：任意一个条件满足即可（逻辑或）；
若误将 all 当 any 使用，会导致符合条件的要素过少甚至无结果。

5.2 输入非布尔表达式

all 的输入必须是返回布尔值的表达式，以下写法会触发解析错误：

javascript 复制代码

// 错误：第二个参数是字符串（非布尔表达式）
["all", ["==", ["get", "type"], "restaurant"], "score>4.5"]

// 正确：第二个参数是数值比较表达式（返回布尔值）
["all", ["==", ["get", "type"], "restaurant"], [">", ["get", "score"], 4.5]]

5.3 条件顺序影响性能（未利用短路求值）

如前文所述，未将"低成本、高淘汰率"的条件放在前面，会浪费计算资源，尤其在海量要素场景下，性能差异会非常明显。

5.4 空 `all` 的特殊含义

["all"] 等价于"无过滤条件"，会返回 true，常用于重置过滤（如示例中的 resetFilter 按钮）。

六、完整实战示例：多条件筛选与交互

整合 all 的核心用法，实现"筛选北京高分营业餐厅 + 按距离排序 + 样式高亮"的完整功能：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Mapbox all 表达式完整实战</title>
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
    <style>
        body { margin: 0; padding: 0; }
        #map { width: 100vw; height: 100vh; }
        .controls { position: absolute; top: 20px; left: 20px; background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        button { margin: 5px; padding: 6px 12px; cursor: pointer; }
    </style>
</head>
<body>
<div id="map"></div>
<div class="controls">
    <h4>餐厅筛选</h4>
    <button id="filterGoodOpen">高分营业餐厅</button>
    <button id="filterNearby">近1km高分营业餐厅</button>
    <button id="reset">重置</button>
</div>
<script>
mapboxgl.accessToken = '你的 Mapbox Access Token';
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [116.4074, 39.9042],
    zoom: 14
});

// 定义中心点（北京天安门）
const center = [116.4074, 39.9042];

map.on('load', () => {
    // 1. 模拟餐厅数据（含评分、营业状态、坐标）
    const restaurantData = {
        type: 'FeatureCollection',
        features: [
            { type: 'Feature', geometry: { type: 'Point', coordinates: [116.4074, 39.9042] }, properties: { name: '北京饭店', score: 4.8, isOpen: true } },
            { type: 'Feature', geometry: { type: 'Point', coordinates: [116.4080, 39.9050] }, properties: { name: '全聚德', score: 4.6, isOpen: true } },
            { type: 'Feature', geometry: { type: 'Point', coordinates: [116.4100, 39.9080] }, properties: { name: '海底捞', score: 4.9, isOpen: false } },
            { type: 'Feature', geometry: { type: 'Point', coordinates: [116.4150, 39.9100] }, properties: { name: '小肥羊', score: 4.7, isOpen: true } }
        ]
    };

    // 2. 添加数据源
    map.addSource('restaurant-source', { type: 'geojson', data: restaurantData });

    // 3. 添加餐厅图层
    map.addLayer({
        id: 'restaurant-layer',
        type: 'circle',
        source: 'restaurant-source',
        paint: {
            'circle-radius': 10,
            'circle-color': '#999',
            'circle-stroke-width': 2,
            'circle-stroke-color': '#fff'
        },
        filter: ['all']
    });

    // 4. 按钮1：筛选"评分>4.5 + 营业中"的餐厅
    document.getElementById('filterGoodOpen').onclick = () => {
        map.setFilter('restaurant-layer', [
            'all',
            ['>', ['get', 'score'], 4.5],
            ['==', ['get', 'isOpen'], true]
        ]);
        map.setPaintProperty('restaurant-layer', 'circle-color', '#ff4500');
    };

    // 5. 按钮2：筛选"评分>4.5 + 营业中 + 距离<1km"的餐厅（利用短路优化）
    document.getElementById('filterNearby').onclick = () => {
        map.setFilter('restaurant-layer', [
            'all',
            ['>', ['get', 'score'], 4.5], // 低成本条件先判断
            ['==', ['get', 'isOpen'], true], // 低成本条件
            ['<', ['distance', ['geometry'], center], 1000] // 高成本距离计算后判断
        ]);
        map.setPaintProperty('restaurant-layer', 'circle-color', '#00ff00');
        map.setPaintProperty('restaurant-layer', 'circle-radius', 14);
    };

    // 6. 重置筛选
    document.getElementById('reset').onclick = () => {
        map.setFilter('restaurant-layer', ['all']);
        map.setPaintProperty('restaurant-layer', 'circle-color', '#999');
        map.setPaintProperty('restaurant-layer', 'circle-radius', 10);
    };
});
</script>
</body>
</html>

七、总结

all 表达式是 Mapbox 实现多条件精准控制的核心工具，其核心价值体现在：

逻辑精准性：确保只有所有条件满足时才触发过滤/样式变更；
性能优化：短路求值特性可减少不必要的计算，尤其适合海量要素场景；
灵活性 ：可与 ==/</in 等比较表达式、case 样式表达式自由组合。

使用时需注意：

所有输入必须是布尔表达式，避免非布尔值导致解析错误；
合理排序条件（低成本/高淘汰率在前），最大化利用短路求值；
区分 all（逻辑与）和 any（逻辑或），避免逻辑错误。

掌握 all 后，可进一步结合 any（逻辑或）、none（逻辑非）实现更复杂的地图逻辑，例如"满足 A 且 B，或满足 C 且 D"的复合条件过滤。

Mapbox GL JS 核心表达式：`all` 多条件且判断完全教程

一、all 表达式核心概念

1.1 核心定义

1.2 语法格式

1.3 与 == 的配合逻辑

二、前置准备

三、基础使用场景

3.1 场景1：多条件过滤图层要素

3.2 场景2：数据驱动样式（多条件样式控制）

四、进阶用法：短路求值的性能优化

4.1 优化原理

4.2 实战优化示例

五、常见误区与注意事项

5.1 混淆 all 与 any

5.2 输入非布尔表达式

5.3 条件顺序影响性能（未利用短路求值）

5.4 空 all 的特殊含义

六、完整实战示例：多条件筛选与交互

七、总结

一、`all` 表达式核心概念

1.3 与 `==` 的配合逻辑

5.1 混淆 `all` 与 `any`

5.4 空 `all` 的特殊含义