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

我的目标是使地图拉伸超过 100px 的高度和 100px 的宽度，所以我写了这个 css 样式：

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

现在，问题是传单返回的是扭曲的 image.what 我做错了吗？

Answer 1

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

Answer 2

检查您的瓷砖尺寸，所有瓷砖应为 256x256 像素要么您可以使用 sharp (nodejs) 制作图块并为原始图像文件添加一些边距要么您可以禁用带有高度和宽度的 Leaflet CSS 内联样式到自动 (!important)

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

使用 react-leaflet 时扭曲的地图图像

distorted map image when using react-leaflet

reactjs

react-leaflet