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>

  );
}



    ```