[Bug] maplibre Interleaved layer coved by 3d building layer

longxiutmm commented 2 years ago

Description

I use MapboxLayer 、ArcLayer and maplibre 2.1.9, the 3d building layer always cover the arcLayer

Flavors

[ ] React
[ ] Python/Jupyter notebook
[X] MapboxLayer
[ ] GoogleMapsOverlay
[ ] CartoLayer
[ ] DeckLayer/DeckRenderer for ArcGIS

Expected Behavior

No response

Steps to Reproduce

blow is my code.


<html>
<head>
    <title>Interleaving deck.gl with Mapbox Layers</title>
    <script src="https://unpkg.com/deck.gl@^8.8.0/dist.min.js"></script>

    <script src='https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css' rel='stylesheet' />

</head>

<body style="margin:0">

</body>

<script type="text/javascript">

    const {MapboxLayer, ScatterplotLayer, ArcLayer} = deck;

    var map = new maplibregl.Map({
        container: document.body,
        style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL', // stylesheet location
        center: [-122.4, 37.79],
        zoom: 15,
        pitch: 60
    });

    map.on('load', () => {
        const firstLabelLayerId = map.getStyle().layers.find(layer => layer.type === 'symbol').id;

        map.setPaintProperty('building-3d','fill-extrusion-opacity',0.8);

        map.addLayer(new MapboxLayer({
            id: 'deckgl-circle',
            type: ScatterplotLayer,
            data: [
                {position: [-122.402, 37.79], color: [255, 0, 0], radius: 1000}
            ],
            getPosition: d => d.position,
            getFillColor: d => d.color,
            getRadius: d => d.radius,
            opacity: 0.3
        }), firstLabelLayerId);

        map.addLayer(new MapboxLayer({
            id: 'deckgl-arc',
            type: ArcLayer,
            data: [
                {source: [-122.3998664, 37.7883697], target: [ -122.41460563510304,  37.79512692863844]}
            ],
            getSourcePosition: d => d.source,
            getTargetPosition: d => d.target,
            getSourceColor: [255, 208, 0],
            getTargetColor: [0, 128, 255],
            getWidth: 20
        }))
    });

</script>
</html>

Environment

Framework version: deck.gl 8.8.0 、maplibre 2.1.9
Browser: chrome 103
OS:Window 10

Logs

No response

Pessimistress commented 2 years ago

This was working as expected in maplibre-gl up till v1.15.3. I suggest you make an inquiry in their repo on what breaking changes were made.