I am trying to add ‘fill-extrusion’ with different colors to the map multiple times. First, I attempted to add a layer each time:
Vue.prototype.drawPolygonTest = function (map, data, color = '')
{
color = color || Vue.prototype.getRandomColor();
console.log('color:', color)
const layerId = Vue.prototype.getRandomLayer();
const paint = {
'fill-extrusion-color': color,
'fill-extrusion-height': ['get', 'Height'],
'fill-extrusion-opacity': 0.9
}
const layer = Vue.prototype.getSLayer(layerId, 'fill-extrusion', data, paint)
map.addLayer(layer);
};
The first color was ‘#99D9A9’ and the second color was ‘#922245’, but the building colors that appeared were all the first color ‘#99D9A9’. I printed the layer and found that before executing map.addLayer(layer);
, my layer had the paint property. However, after executing map.addLayer(layer);
and printing map.getStyle().layers
, I found that only the first added layer had the paint property, and the subsequent added layers did not have the paint property.
The following are some encapsulated functions used in the above code:
Vue.prototype.getRandomLayer = function () {
return `markerlayer-${Date.now()}-${Math.random().toString(36).substr(2, 3)}`;
};
Vue.prototype.getRandomColor = function () {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
Vue.prototype.getSLayer = function (layerId, type, data, paint, layout = {})
{
return {'id': layerId, 'type': type, 'source': Vue.prototype.getSSource(data), 'paint': paint, 'layout': layout}
};
I also tried to directly add the paint
property to the layer
in map.getStyle().layers
, but it didn’t work.
Then I tried to directly modify the source data:
Vue.prototype.drawPolygonTest2 = function (map, data, color = '')
{
color = color || Vue.prototype.getRandomColor();
data.features.forEach(feature =>
{
feature.properties.fillColor = color;
});
const layers = map.getStyle().layers;
let targetSourceId;
for (const layer of layers)
{
if (layer.type === 'fill-extrusion')
{
targetSourceId = layer.source;
break;
}
}
if (targetSourceId)
{
const source = map.getSource(targetSourceId)
source.setData(source._data.features.concat(data.features))
}
else
{
const layerId = Vue.prototype.getRandomLayer();
const paint = {
'fill-extrusion-color': color,
'fill-extrusion-height': ['get', 'Height'],
'fill-extrusion-opacity': 0.9
}
const layer = Vue.prototype.getSLayer(layerId, 'fill-extrusion', data, paint)
map.addLayer(layer);
}
};
This still didn’t work.
I have been stuck on this problem for many days and I don’t know why I can’t add buildings with different colors multiple times.
enen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.