Изменить цвет многоугольника при нажатии с Mapbox - PullRequest
Новая
       18

Изменить цвет многоугольника при нажатии с Mapbox

0 голосов
/ 06 февраля 2020

У меня есть серый слой для отображения нескольких полигонов на карте Mapbox. Я пытаюсь изменить цвет только одного из них, когда пользователь нажимает на него, чтобы отобразить «выбранный» многоугольник. Мне не нужно взаимодействие, поэтому я не использую библиотеку Draw, просто чтобы показать выбранный многоугольник.

enter image description here

Есть ли способ сделать это в один слой ?? Я попытался добавить свойство boolean с именем «selected» к каждому свойству многоугольника, но мне не удалось обновить слой. 

// 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????


    }
});

Заранее спасибо!

1 Ответ

0 голосов
/ 25 февраля 2020

Вы можете использовать событие щелчка и состояния объекта , чтобы изменить цвет многоугольника при выборе. Я собрал пример этого в CodePen здесь , который основан на этом примере из Mapbox. Код: 

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

...