Mapbox GL JS实现点击建筑修改颜色或边框的技术问询

Got it, let's figure out how to make those buildings change style when clicked using Mapbox GL JS—since you’re already using Mapbox, we don’t need any extra plugins; its native tools are perfect for this. Here's a complete, working solution tailored to your needs:

Overview #

We’ll build on your existing Mapbox setup to add click-triggered color/border changes for buildings. This works with both 3D (your current pitch setting) and flat maps, and we’ll handle toggling styles when clicking the same building again.

Full Working Code #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Clickable Buildings</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
    <style>
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'; // Replace with your actual token
        var map = new mapboxgl.Map({
            style: 'mapbox://styles/mapbox/light-v9',
            center: [7.3337859, 50.8403206],
            zoom: 19.8,
            pitch: 60, // Set to 0 if you don't want 3D tilt
            bearing: -70,
            hash: true,
            container: 'map'
        });

        // Track which building is currently selected
        let selectedBuildingId = null;

        map.on('load', () => {
            // Make sure the building layer exists in the style
            if (map.getLayer('building')) {
                // Add click handler for buildings
                map.on('click', 'building', (e) => {
                    const clickedBuildingId = e.features[0].id;

                    if (selectedBuildingId === clickedBuildingId) {
                        // Clicking the same building? Reset its style
                        map.setPaintProperty('building', 'fill-color', '#aaa'); // Match light-v9's default
                        map.setPaintProperty('building', 'fill-outline-color', '#fff');
                        selectedBuildingId = null;
                    } else {
                        // Reset the previously selected building first
                        if (selectedBuildingId) {
                            map.setPaintProperty('building', 'fill-color', '#aaa');
                            map.setPaintProperty('building', 'fill-outline-color', '#fff');
                        }

                        // Style the newly clicked building
                        map.setPaintProperty('building', 'fill-color', '#ff6b6b'); // Bright highlight color
                        map.setPaintProperty('building', 'fill-outline-color', '#000'); // Bold border
                        selectedBuildingId = clickedBuildingId;
                    }
                });

                // Optional: Change cursor to pointer when hovering over buildings
                map.on('mouseenter', 'building', () => {
                    map.getCanvas().style.cursor = 'pointer';
                });
                map.on('mouseleave', 'building', () => {
                    map.getCanvas().style.cursor = '';
                });
            } else {
                console.error('Oops, the "building" layer wasn’t found in your map style!');
            }
        });
    </script>
</body>
</html>

Key Bits Explained #

• Tracking Selection: We use selectedBuildingId to keep tabs on which building is highlighted. This lets us reset styles when clicking a new building or re-clicking the same one.
• Style Modification: map.setPaintProperty() is Mapbox’s way to update layer styles on the fly. You can swap out the hex colors for any shade you want (RGB, HSL, and named colors work too).
• No 3D? No Problem: Just set pitch: 0 in your map initialization to remove the tilted 3D effect.
• Layer Safety Check: We verify the 'building' layer exists first to avoid errors if the style gets updated later.

Alternative: Separate Highlight Layer #

If you want to keep the original building style intact and only overlay a highlight, use a dedicated layer instead of modifying the base layer:

map.on('load', () => {
    // Add a new layer just for highlighted buildings
    map.addLayer({
        id: 'building-highlight',
        type: 'fill-extrusion', // Use 'fill' for flat maps
        source: 'composite',
        'source-layer': 'building',
        filter: ['==', 'id', ''], // Start with no buildings highlighted
        paint: {
            'fill-extrusion-color': '#ff6b6b',
            'fill-extrusion-outline-color': '#000',
            'fill-extrusion-opacity': 0.8
        }
    });

    map.on('click', 'building', (e) => {
        // Update the filter to only show the clicked building in the highlight layer
        map.setFilter('building-highlight', ['==', 'id', e.features[0].id]);
    });
});

This keeps your base building layer untouched and is cleaner for complex styling.

内容的提问来源于stack exchange，提问作者Niklas