reactjs - 使用 react-leaflet 时地图图像失真

Question

这是我的代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import fetch from 'node-fetch';
import PropTypes from 'prop-types';
import { Map, TileLayer } from 'react-leaflet';

export default class PageBackground extends Component{

    constructor(props) {
        super(props);
        this.getLocation=this.getLocation.bind(this);
        this.state={
            position:[2,2]
        };
        }


    componentWillMount() {
        this.getLocation();
    }
    getLocation () {

        fetch('http://freegeoip.net/json/')
         .then((res)=>res.json())
         .then((objec)=>{this.setState({position:[objec.latitude,objec.longitude]});console.log(this.state.position)})
         .catch((err)=>{console.log("didn't connect to App",err);this.setState({position:['10','8']});})
    }

    render(){
        return (
      <Map center={this.state.position} zoom={13} >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'/>

        </Map>
        );
        }
    }

我的目标是让地图的高度为 100 像素，宽度为 100 像素，所以我写了这个 CSS 样式：

.leaflet-container {
  height:100px;
  width:100px;
}

现在，问题是传单返回了一个扭曲的图像。我做错了什么？

Answer 1

添加import 'leaflet/dist/leaflet.css'到我的组件中使其正常工作。

Answer 2

检查您的图块大小，所有图块应为 256x256 像素，或者您可以使用尖锐（nodejs）制作图块并为原始图像文件添加一些边距，或者您可以禁用具有自动高度和宽度的 Leaflet CSS 内联样式（！重要）

http://sharp.dimens.io/en/stable/api-output/#tile

const leaftletsize = { width: 34000, height: 34000 };
const left = (leaftletsize.width - mymap.width) / 2;
const top = (leaftletsize.height - mymap.height) / 2;
extendto = ({ left, top, right: left, bottom: top });

const createTiles = (extendto) => {
    const outputtilesdir = path.join(outputpath, 'sharp');
    console.log(`Create tiles to ${outputtilesdir}`);
    const tilesconfig = { size: 256, layout: 'dz' };
    const extrabackground = {r: 0, g: 0, b: 0, alpha: 1};
    return sharp(originalmapfile)
        .limitInputPixels(false)
        .background(extrabackground)
        .extend(extendto)
        .png()
        .tile(tilesconfig)
        .toFile(outputtilesdir);
    };