扭曲的地圖圖像

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); 
    };