扭曲的地图图像

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

检查瓷砖的大小，所有的砖应为256×256像素 或 您可以用尖锐（的NodeJS），使瓷砖和添加一些余量，以你的原始图像文件 或 你可以用高度禁用单张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); 
    };