React项目中Leaflet地图部分加载

Question

React项目中Leaflet地图部分加载

3

我正在尝试在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" />;
  }
}

任何想法？

- SomethingsGottaGive

1

你可能不了解ReactJS，但这似乎是一个CSS问题。你确定已经正确地引入了.css文件吗？ - treecon

我添加了一个样式来设置高度和宽度，但问题仍然存在。这里有一个工作的React示例：https://codesandbox.io/s/d9pkyg3mq - SomethingsGottaGive

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ghybs · Accepted Answer

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

1. 包含Leaflet 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为单位。

更新后的 CodeSandbox：https://codesandbox.io/s/zn89pkmn83