在图层内过滤

使用过滤器表达式在现有图层内过滤数据;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>在图层内过滤</title>
    <meta property="og:description" content="使用过滤器表达式在现有图层内过滤数据" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<style>
    .map-overlay {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #fff;
        margin-right: 20px;
        font-family: Arial, sans-serif;
        overflow: auto;
        border-radius: 3px;
    }

    #features {
        top: 0;
        height: 100px;
        margin-top: 20px;
        width: 250px;
    }

    #legend {
        padding: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        line-height: 18px;
        margin-bottom: 20px;
        max-height: 300px;
        overflow: hidden;
        width: 250px;
    }

    .legend-key {
        display: inline-block;
        border-radius: 20%;
        width: 10px;
        height: 10px;
        margin-right: 5px;
    }

    .check-container {
        display: flex;
        flex-direction: column;
        line-height: 25px;
        margin-bottom: 10px;
    }

    input {
        margin-right: 5px;
    }
</style>

<div id="map"></div>
<div class="map-overlay" id="legend"></div>

<script>
    const map = new maplibregl.Map({
        container: 'map',
        style:
            'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
        center: [-0.1591891, 50.8386682],
        zoom: 13
    });

    function createLayerControl(title, layerIds) {
        const container = document.createElement('div');
        container.className = 'check-container';
        const label = document.createElement('label');
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.checked = true;

        const text = document.createTextNode(title);
        label.appendChild(checkbox);
        label.appendChild(text);
        container.appendChild(label);

        checkbox.addEventListener('change', function (e) {
            const active = e.target.checked;
            const visibility = active ? 'visible' : 'none';
            // 循环切换每个图层的可见性
            layerIds.forEach(function (layerId) {
                map.setLayoutProperty(layerId, 'visibility', visibility);
            });
        });

        return container;
    }

    function createLegend() {
        // 从自定义图例HTML内容创建图例
        // 该图例描述了可以通过复选框过滤的要素类型
        const legend = document.getElementById('legend');
        legend.innerHTML =
            '<h2 style="margin-top:0">布莱顿市中心的POI类型</h2>' +
            '<div style="margin-bottom:5px"><div class="legend-key" style="background:#8B4000"></div>教育设施</div>' +
            '<div style="margin-bottom:5px"><div class="legend-key" style="background:#008000"></div>公园</div>';

        legend.appendChild(
            createLayerControl('显示教育设施', ['brighton-parks-education'])
        );
        legend.appendChild(
            createLayerControl('显示公园', ['brighton-parks-parks'])
        );
    }

    map.on('load', () => {
        map.addSource('brighton-parks', {
            type: 'vector',
            url: 'https://api.maptiler.com/data/9c66e2db-7a1f-4aa2-91d9-fd4e32887a2c/metadata.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
        });

        map.addLayer({
            id: 'brighton-parks-parks',
            type: 'fill',
            source: 'brighton-parks',
            'source-layer': 'parks',
            filter: ['==', ['get', 'TYPE'], 'Park'],
            paint: {
                'fill-color': '#008000',
                'fill-opacity': 0.5,
                'fill-outline-color': 'black'
            }
        });

        map.addLayer({
            id: 'brighton-parks-education',
            type: 'fill',
            source: 'brighton-parks',
            'source-layer': 'parks',
            filter: ['==', ['get', 'TYPE'], 'Education'],
            paint: {
                'fill-color': '#8B4000',
                'fill-opacity': 0.5,
                'fill-outline-color': 'black'
            }
        });

        createLegend();
    });
</script>
</body>
</html>