使用 react-leaflet 时地图图像失真答案

【问题标题】：distorted map image when using react-leaflet使用 react-leaflet 时地图图像失真
【发布时间】：2017-10-30 21:08:31
【问题描述】：

这是我的代码：

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

现在，问题是传单返回的图像失真。我做错了什么？

【问题讨论】：

标签： reactjs react-leaflet

【解决方案1】：

将import 'leaflet/dist/leaflet.css' 添加到我的组件中就可以正常工作了。

【讨论】：

【解决方案2】：

检查您的图块大小，所有图块应为 256x256 像素或者您可以使用Sharp（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);
    };

【讨论】：