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

Question

这是我的代码：

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

我的目标是让地图延伸到100px的高度和100px的宽度，所以我写了这个css风格：

def toSchema(str: String) = {
  val structFields = str.split(",").map{ s =>
    val split = s.split("\\|")
    val name: String = split.head
    val typeStr = split.tail.head

    val varCharPattern = "varchar[0-9]+".r
    val datePattern = "date".r
    val numPattern = "number".r

    val t = typeStr.toLowerCase match{
      case varCharPattern() => StringType
      case datePattern() => TimestampType
      case numPattern() => IntegerType
      case _ => throw new Exception("unknown type string")
    }
    StructField(name, t)
  }
  StructType(structFields)
}

现在，问题是传单正在返回一个扭曲的图像。我做错了什么？

Answer 1

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

Answer 2

检查您的瓷砖尺寸，所有瓷砖应为256x256像素 要么 您可以使用sharp（nodejs）制作图块并为原始图像文件添加一些边距 要么 您可以禁用Leaflet CSS内联样式，其高度和宽度为auto（！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);
    };