Open aemonm opened 8 months ago
When zooming in on some features in a MVT Layer, color aberrations and artifacts sometime appear on features.
Notice fill blue color:
How it should look:
This is the code we are using to render the MVTLayer:
const slicksLayer = new MVTLayer({ id: BASE_LAYER_IDS.SLICK, maxRequests: -1, data: slickTilesQuery, pickable: true, updateTriggers: { getLineWidth: [zoom], getFillColor: [ selectedSlickId, showSlickOutline, showOtherSlicks, hoveredSlickId, selectedSlickOpacity ], getLineColor: [ selectedSlickId, showSlickOutline, showOtherSlicks, hoveredSlickId, selectedSlickOpacity ] }, getLineWidth: () => { if (zoom < 3) { return 7; } else if (zoom < 5) { return 5; } else if (zoom < 10) { return 2; } else { return 1.5; } }, lineWidthMinPixels: 1, lineWidthUnits: 'pixels', lineWidthMaxPixels: 20, tileSize: 256, minZoom: 0, maxZoom: 23, onClick: handleSlickClick, onHover: ({ object }) => { if (!object) { handleHover(null); } else { handleHover(object.properties.id); } }, getFillColor: ({ properties }: SlickFeature) => { if ( !showOtherSlicks && properties.id !== selectedSlickId && selectedSlickId ) { return [255, 255, 255, 0]; } if (hoveredSlickId === properties.id) { return INTERACTIVE_LAYER_COLORS.SLICK.FILL_SELECTED; } if (selectedSlickId) { return selectedSlickId === properties.id ? [ ...INTERACTIVE_LAYER_COLORS.SLICK.FILL_SELECTED, selectedSlickOpacity * 255 ] : INTERACTIVE_LAYER_COLORS.SLICK.FILL_NOT_SELECTED; } return INTERACTIVE_LAYER_COLORS.SLICK.FILL; }, getLineColor: ({ properties }: SlickFeature) => { if (!showOtherSlicks && properties.id !== selectedSlickId) { return [255, 255, 255, 0]; } if (hoveredSlickId === properties.id) { if (showSlickOutline) { return INTERACTIVE_LAYER_COLORS.SLICK.LINE_SELECTED; } else { return [255, 255, 255, 0]; } } if (selectedSlickId) { if (selectedSlickId === properties.id) { if (showSlickOutline) { const [r, g, b] = INTERACTIVE_LAYER_COLORS.SLICK.LINE_SELECTED; return [r, g, b, selectedSlickOpacity * 255]; } else { return [0, 0, 0, 0]; } } else { return INTERACTIVE_LAYER_COLORS.SLICK.LINE_NOT_SELECTED; } } return INTERACTIVE_LAYER_COLORS.SLICK.LINE; } });
The MVT features should render without any aberrations, artifacts or anomalies.
No response
Maybe related? https://github.com/visgl/deck.gl/issues/8870
Description
When zooming in on some features in a MVT Layer, color aberrations and artifacts sometime appear on features.
Notice fill blue color:
How it should look:
This is the code we are using to render the MVTLayer:
Flavors
Expected Behavior
The MVT features should render without any aberrations, artifacts or anomalies.
Steps to Reproduce
Environment
Logs
No response