我有一个灰色层,可在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????
}
});
谢谢你!
选择时可以使用单击事件和feature states来更改多边形的颜色。我在基于Mapbox的here的CodePen 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工作