왜곡 된지도 이미지는 여기

Question

내 코드입니다 :

100 픽셀의 높이가 100 픽셀 폭 이상지도 스트레치를 만들기 위해 내 목표는 그래서 난이 CSS 스타일 썼다

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

:

을

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

이제 문제는 전단지가 왜곡 된 이미지를 반환한다는 것입니다. 내가 뭘 잘못하고있는 걸까요? 내 구성 요소에 import 'leaflet/dist/leaflet.css' 추가

Answer 1

작동을 얻었다.

Answer 2

하여 타일의 크기를 확인, 모든 타일 당신은 높이 리플릿 CSS 인라인 스타일을 해제 할 수 있습니다 256 * 256 픽셀 에 있거나 당신은 타일을 날카로운 (nodejs)를 사용하여 원본 이미지 파일 에 약간의 마진을 추가하거나한다 자동 너비 (! 중요)

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