[GlobeView] Bitmaplayer and TileLayer collision

[gy001302]

import { BitmapLayer } from '@deck.gl/layers';
import {
  _GlobeView as GlobeView,
  MapView,
  COORDINATE_SYSTEM
} from '@deck.gl/core';
import { TileLayer } from '@deck.gl/geo-layers';

import DeckGL from '@deck.gl/react';
import React, { useEffect, useState, useCallback } from 'react';

// DeckGL react component
export default function App() {

  const [url, setUrl] = useState(
    'https://t1.tianditu.gov.cn/vec_w/wmts?tk=44e41174c40e419bf291d5c7984f7453&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
  );

  const [view, setView] = useState(new MapView());

  useEffect(() => {
    const timeout = setTimeout(() => {
      setView(new GlobeView());
    }, 10000);

    return () => clearTimeout(timeout);
  }, []);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setUrl(
        'https://t0.tianditu.gov.cn/vec_w/wmts?tk=44e41174c40e419bf291d5c7984f7453&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
      );
    }, 3000);

    return () => clearTimeout(timeout);
  }, []);

  // Viewport settings
  const INITIAL_VIEW_STATE = {
    longitude: -122.41669,
    latitude: 37.7853,
    zoom: 3,
    pitch: 0,
    bearing: 0
  };
  const layer = new TileLayer({
    // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
    data: url,

    minZoom: 0,
    maxZoom: 19,
    tileSize: 256,
    // refinementStrategy: 'never',

    renderSubLayers: (props) => {
      const {
        bbox: {
          west, south, east, north
        }
      } = props.tile;

      console.log(props);
      return new BitmapLayer(props, {
        data: null,
        _imageCoordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
        image: props.data,
        bounds: [west, south, east, north]
      });
    }
  });

  const blayer = new BitmapLayer({
    id: 'bitmap-layer',
    bounds: [-12.5190, 7.7045, -122.355, 37.829],
    image: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-districts.png',
    _imageCoordinateSystem: COORDINATE_SYSTEM.CARTESIAN
  });
  const layers = [blayer, layer];

  return (
    <div>
      <DeckGL
        views={new GlobeView()}
        initialViewState={INITIAL_VIEW_STATE}
        controller
        layers={layers}
      />
    </div>

  );
}

[gy001302]

@cheeaun

[JanVanDerWall]

I've encountered the same Problem, is there a good solution by now?

[Pessimistress]

You can give the bitmap layer bounds a small z to lift it off the surface.

[JanVanDerWall]

Thanks for the answer! Fist of all, before it sounds to critical. I think deck.gl is a great library. And especially the globe view helps a lot with my visualizations. I did try your solution. I had to raise the z-value to 44000 for it to not collide. The problem with using the more complicated bounds instead of the simple 4 elements array is, that is prohibits me to explicitly set _imageCoordinateSystem: COORDINATE_SYSTEM.LNGLAT. Which is a problem for me. Also it feels a little hacky. If there would be a better solution in the future, I would be very happy.

[Sigmundom]

I had the same issue and found a simple fix. Try adding depthTest: false in the paramaters-prop in the DeckGL component. <DeckGL ... parameters={{ depthTest: false }} /> Also make sure you put the bitmap-layer last in the layers-array to render it on top.

[alexwing]

I had the same issue and found a simple fix. Try adding depthTest: false in the paramaters-prop in the DeckGL component. <DeckGL ... parameters={{ depthTest: false }} /> Also make sure you put the bitmap-layer last in the layers-array to render it on top.

My problem with that solution is that now I see the world from behind, for my vector layer.