1:在pulblic文件夹index.html中引入全局leaflet css文件
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css">
2:安装leaflet
cnpm install leaflet --save
3:组件Map.js中添加天地图瓦片
import React from 'react';
import L from "leaflet";
import style from './Map.module.scss'
import config from '../../config'const { uploadMap:{url,center,zoom}} = config;
class Map extends React.Component{constructor(){super();this.map = null;}componentWillMount() {}componentDidMount() {this.map = L.map("map", { crs: L.CRS.EPSG4326 }).setView(center,zoom);L.tileLayer(url + "vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=0b018552994f71a9467d24461a8f8238",{maxZoom: 20,tileSize: 256,zoomOffset: 1,}).addTo(this.map);L.tileLayer(url + "cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=0b018552994f71a9467d24461a8f8238",{maxZoom: 20,tileSize: 256,zoomOffset: 1,}).addTo(this.map);}render() {return (<div className={style.Map} id="map" className={style.map}></div>);}}export default (Map);
4:效果展示