Question

我正在尝试在react组件中实现一个简单的Leaflet映射。由于某些原因，地图的图块未按随机顺序加载或加载。其他人有没有经历过？

这是应用程序的CodeSandbox： https://codesandbox.io/s/3qmp8x4131

代码如下：

import React from "react";
import ReactDOM from "react-dom";
import * as L from "leaflet";

export default class Map extends React.Component {
  map = null;
  componentDidMount() {
    var map = (this.map = L.map(ReactDOM.findDOMNode(this), {
      minZoom: 2,
      maxZoom: 20,
      layers: [
        L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          attribution:
            '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        })
      ],
      attributionControl: false
    }));

    map.on("click", this.onMapClick);
    map.fitWorld();
  }

  componentWillUnmount() {
    if (!this.map) return;
    this.map.off("click", this.onMapClick);
    this.map = null;
  }

  onMapClick = () => {
    // Do some wonderful map things...
  };

  render() {
    return <div className="map" />;
  }
}

有什么想法吗？

Answer 1

您确实忘记了包含Leaflet CSS文件。
您错误地指定了.map容器的高度。

1。包括传单CSS

请注意您在评论中提到的工作示例如何导入Leaflet资产（在Map/leaflet.js文件中）：

import L from 'leaflet'; // Same as `import * as L from 'leaflet'` with webpack
import 'leaflet/dist/leaflet.css';

注意，它显式导入Leaflet CSS文件。如果丢失，您的图块将显示为乱码并散布在您的页面上。

Webpack具有style-loader和css-loader，可以在JS文件中引用这些CSS资产时正确地管理它们。

2。指定地图容器的高度

在失败的代码示例中，您使用CSS指定<div class="map">容器：

.map {
  height: 100%;
}

请注意，百分比值基于元素的父节点值，即在这种情况下为父节点高度的100％。

您的DOM层次结构是：

<html>
  <body>
    <div id="root">
      <div class="App">
        <div class="map">

但是您尚未为地图容器的任何祖先指定任何高度（即html，body，#root和.App）。由于他们唯一的孩子是.map，因此他们没有其他任何方法可以增加其大小，因此他们的身高为0。

您的.map的高度为0的100％，即0。

确保您还为每个祖先指定一个高度值：

html,
body,
#root,
.App {
  margin: 0;
  height: 100%;
}

或为地图容器使用明确的高度值，例如在px中。

更新的代码沙箱：https://codesandbox.io/s/zn89pkmn83

传单地图在React项目中部分加载

1 个答案: