react + leaflet + 天地图瓦片

1：在pulblic文件夹index.html中引入全局leaflet css文件<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css">2：安装leafletcnpm install leaflet --save3：组件Map.js中添加天地图瓦片import

炉火纯青-旺

2973人浏览 · 2020-05-25 10:12:26

炉火纯青-旺 · 2020-05-25 10:12:26 发布

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 id="map" className={style.map}></div>
        );
    }
    
}

export default (Map);