1. Principle

The loading of the map layer is the layer after loading shows the layer above the layer loaded before, so this is also the index can change the layer display order. openlayers provides setZIndex to change the map layer.

Second, load dependent library files

import React, { Component } from 'react';
import Map from '../../component/map/map';
import style from './map.css'
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ.js';

Three, load the map components and page rendering

render() {
    return (
      <div className={style.mapBg} >
        <button onClick = {this.show.bind (this, "TiandiMap_vec")}> Vector illustration </ button>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
      </div>
    );
  }

Fourth, load different layers

 let {map} = this.refs.map
    let {mapkey} = window.config
    var TiandiMap_vec = new TileLayer({
                 name: "Sky Map Vector Layer",
        source: new XYZ({
                         url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + mapkey, // mapkey is the sky map key
            wrapX: false
        })
    });
    var TiandiMap_cva = new TileLayer({
                 name: "Sky Map Vector Annotation Layer",
        source: new XYZ({
                         url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + mapkey, // mapkey is the sky map key
            wrapX: false
        })
    });
    var TiandiMap_img = new TileLayer({
                 name: "Sky Map Image Layer",
        source: new XYZ({
                         url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + mapkey, // mapkey is the sky map key
            wrapX: false
        })
    });
    var TiandiMap_cia = new TileLayer({
                 name: "Sky Map Image Annotation Layer",
        source: new XYZ({
                         url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + mapkey, // mapkey is the sky map key
            wrapX: false
        })
    });

       // Download Data
    map.addLayer(TiandiMap_vec);
    map.addLayer(TiandiMap_cva);
    map.addLayer(TiandiMap_img);
    map.addLayer(TiandiMap_cia);
    this.setState({
        TiandiMap_vec,TiandiMap_cva,TiandiMap_img,TiandiMap_cia
    })

Five, change the display level of the layer

show=(type)=>{
         console.log ("Layer", type)
    console.log(this.state.TiandiMap_vec)
    this.state.TiandiMap_vec.setZIndex(10)
  }
  

Six, all codes

// Set the background color of the map
import React, { Component } from 'react';
import Map from '../../component/map/map';
import style from './map.css'
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ.js';

class LayerIndex extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
    }
  componentDidMount() {
    // console.log(bg)
    let {map} = this.refs.map
    let {mapkey} = window.config
    var TiandiMap_vec = new TileLayer({
                 name: "Sky Map Vector Layer",
        source: new XYZ({
                         url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + mapkey, // mapkey is the sky map key
            wrapX: false
        })
    });
    var TiandiMap_cva = new TileLayer({
                 name: "Sky Map Vector Annotation Layer",
        source: new XYZ({
                         url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + mapkey, // mapkey is the sky map key
            wrapX: false
        })
    });
    var TiandiMap_img = new TileLayer({
                 name: "Sky Map Image Layer",
        source: new XYZ({
                         url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + mapkey, // mapkey is the sky map key
            wrapX: false
        })
    });
    var TiandiMap_cia = new TileLayer({
                 name: "Sky Map Image Annotation Layer",
        source: new XYZ({
                         url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + mapkey, // mapkey is the sky map key
            wrapX: false
        })
    });

       // Download Data 
    map.addLayer(TiandiMap_vec);
    map.addLayer(TiandiMap_cva);
    map.addLayer(TiandiMap_img);
    map.addLayer(TiandiMap_cia);
    this.setState({
        TiandiMap_vec,TiandiMap_cva,TiandiMap_img,TiandiMap_cia
    })
  }

  show=(type)=>{
         console.log ("Layer", type)
    console.log(this.state.TiandiMap_vec)
    this.state.TiandiMap_vec.setZIndex(10)
  }
  
  render() {
    return (
      <div className={style.mapBg} >
                 <button onClick = {this.show.bind (this, "TiandiMap_vec")}> Vector illustration </ button>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
      </div>
    );
  }
}

export default LayerIndex;

Seven, renderings