使用 Mapbox 单击更改多边形颜色

Question

我有一个灰色层来在 Mapbox 地图上显示多个多边形。当用户单击它以显示“选定”多边形时，我试图仅更改其中一个的颜色。我不想要交互，这就是为什么我不使用 Draw 库，只是为了显示选定的多边形。

有没有办法只在一层中做到这一点？我尝试为每个多边形属性添加一个名为“selected”的boolean 属性，但我没有实现更新图层。

// Define polygons with properties
var features = [];
areas.forEach(area => features.push(turf.polygon(area.polygon, { id_area: area.id_area, name: area.name, selected: 'false' })));
features = turf.featureCollection(features);

map.on('load', function () {
    // Add polygons to map
    map.addSource('areas', {
        'type': 'geojson',
        'data': features
    });
    // Layer settings
    map.addLayer({
        'id': 'polygons',
        'type': 'fill',
        'source': 'areas',
        'paint': {
            'fill-color': [
                'match',
                ['get', 'selected'],
                'true', '#64bdbb', // if selected true, paint in blue
                '#888888' // else paint in gray
            ],
            'fill-opacity': 0.4
        },
        'filter': ['==', '$type', 'Polygon']]
    });
}); 
// Click on polygon
map.on('click', 'polygons', function (e) {
    if(e.features.length) {
        var feature = e.features[0];
        if (feature.properties.id_area == id) {
            feature.properties.selected = 'true';
        } else {
            feature.properties.selected = 'false';
        }


        // How can I update the layer here to repaint polygons????


    }
});

提前谢谢你！

Answer 1

您可以使用点击事件和feature states 在选中时更改多边形的颜色。我在 CodePen here 中整理了一个示例，它基于 Mapbox 中的 example。代码：

mapboxgl.accessToken = 'pk.eyJ1IjoicGxtYXBib3giLCJhIjoiY2s3MHkzZ3VnMDFlbDNmbzNiajN5dm9lOCJ9.nbbtDF54HIXo0mCiekVxng';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-100.486052, 37.830348],
    zoom: 2
});
var clickedStateId = null;

map.on('load', function() {
    map.addSource('states', {
        'type': 'geojson',
        'data':
            'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
    });

    // The feature-state dependent fill-color expression will render the click effect
    // when a feature's click state is set to true.
    map.addLayer({
        'id': 'state-fills',
        'type': 'fill',
        'source': 'states',
        'layout': {},
        'paint': {
            'fill-color': [
                'case',
                ['boolean', ['feature-state', 'click'], false],
                '#64bdbb',
                '#888888'
            ]
        }
    });

    map.addLayer({
        'id': 'state-borders',
        'type': 'line',
        'source': 'states',
        'layout': {},
        'paint': {
            'line-color': '#627BC1',
            'line-width': 1
        }
    });

    // When the user clicks we'll update the
    // feature state for the feature under the mouse.
    map.on('click', 'state-fills', function(e) {
        if (e.features.length > 0) {
            if (clickedStateId) {
                map.setFeatureState(
                    { source: 'states', id: clickedStateId },
                    { click: false }
                );
            }
            clickedStateId = e.features[0].id;
            map.setFeatureState(
                { source: 'states', id: clickedStateId },
                { click: true }
            );
        }
    });
});

免责声明：我在 Mapbox 工作