React-mapbox-gl

import React, { Component } from "react";
import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';

const Map = ReactMapboxGl({
    accessToken:'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A'
});

class MapGl extends Component {
    render () {
        const newStyle = {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "type": "raster",
                    "tiles": ['http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=0b018552994f71a9467d24461a8f8238'],
                    "tileSize": 256,
                }
            },
            "layers": [{
                "id": "tdt-img-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }]
        }
        return (
            <Map
                style= { newStyle }
                containerStyle={{
                    height: '100vh',
                    width: '100vw'
                }}
                center = {[116.40,39.40]}
            >
                <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}>
                    <Feature coordinates={[-0.481747846041145, 51.3233379650232]} />
                </Layer>
            </Map>
        )
    }
}

export default MapGl;

效果展示：