javascript - 将 LeafletJS 与 ReactJS 一起使用时，图 block 排序不正确-6ren

javascript - 将 LeafletJS 与 ReactJS 一起使用时，图 block 排序不正确

转载作者：行者123 更新时间：2023-11-30 00:10:59

26

4

我正在使用 LeafletJS 插件在 ReactJS 单页应用程序中显示整页 map 。我按照说明 here .但是，磁贴未按正确顺序显示。它们是随机排序的(？)。我发现了类似的问题here但在那种情况下，顺序是固定在页面刷新上的。这对我来说不是真的。我的代码是(不包括样板文件):

index.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="stylesheets/atlas.css">
  </head>
  <body>
    <div id="app">
      Loading...
    </div>
    <script src="javascripts/atlas.js"></script>
  </body>
</html>

index.js

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
)

App.jsx

import LiveMap from './LiveMap';
// App component
const App = () => (
    <LiveMap />
)
export default App;

LiveMap.jsx

class LiveMap extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div id='map'></div>
        );
    }

    componentDidMount() {
        let _map = this.map = L.map(ReactDOM.findDOMNode(this)).setView([-41.2858, 174.78682], 14);
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> Contributors',
            maxZoom: 18,
            }).addTo(_map);    
    }

    componentWillUnmount() {...}

    shouldComponentUpdate() {return false;}
};
export default LiveMap;

最佳答案

我很确定你的问题是当你的代码执行时元素还没有完全呈现，或者正如@ghybs 提到的那样，没有加载 Leaflet stylesheet .参见 this question ，尤其是第二个答案，它解决了这个问题:

One drawback of using componentDidUpdate, or componentDidMount is that they are actually executed before the dom elements are done being drawn, but after they've been passed from React to the browser's DOM.

解决方案

为了解决这个问题，您必须将 map 创建代码包装在 setTimeout 中，如下所示:

componentDidMount() {
    let element = ReactDOM.findDOMNode(this)

    setTimeout(() => {
      this.map = new L.map(element, {
          center: new L.LatLng(41.019829, 28.989864),
          zoom: 14,
          maxZoom: 18,
          layers: new L.TileLayer('...')
      }, 100)
    })
  }

我整理了一个 pen它说明了 React 组件内传单 map 的工作示例。还要确保您包含传单的样式表:

...
<head>
  <link rel="stylesheet" href="stylesheets/atlas.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
</head>
...

我还建议使用我更新了 pen 的 ref使用。您可以阅读更多引用文献 here .

相关问题

Good way to combine React and Leaflet

React after render

关于javascript - 将 LeafletJS 与 ReactJS 一起使用时，图 block 排序不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36515631/

26

4

0

文章推荐： javascript - 如何在外部文件中存储谷歌地图选项

文章推荐： javascript - 删除带有位置分隔符的重复行

排序
我正在尝试对每个条目有多个值的关联数组进行排序。例如 [0] => stdClass Object ( [type] => node [sid] => 158 [score] => 0.059600
mysql - 排序 - 按日期 ASC 排序
我在 mysql 中有“日期”列以这种格式保存日期 2014 年 9 月 17 日(日-月-年) 我需要对它们进行升序排序，所以我使用了这个命令: SELECT * FROM table ORDER
MySQL 排序，限制为 MS SQL 排序
我目前正在将 MySQL 存储过程重写为 MS SQL 存储过程，但遇到了问题。在 MySQL 存储过程中，有一个游标，它根据最近的日期 (effdate) 选择一个值并将其放入变量 (thestt
java - 通过从 mysql 中选择(排序)排序
我想要 gwt r.QuestionId- 排序。但是我得到未排序的 QuestionId 尽管我提到了 QuestionId ASC 的顺序。 SELECT r.QuestionId,
Python scandir() 排序\POSIX readdir 排序
我有一个关于在 scandir 函数中排序的基本问题。到目前为止，我阅读了 POSIX readdir 的手册页，但没有找到有关订购保证的具体信息。但是当我遍历大目录(无法更改，只读)时，我在多个系
sql - 排序、排序、筛选 SQL Server 的复杂组合
基本上我必须从 SQL 数据库中构建项目列表，但是用户可以选择对 7 个过滤器的任意组合进行过滤，也可以选择要排序的列以及按方向排序。正如您可以想象的那样，这会以大量不同的组合进行编码，并且数据集非
mysql - 按日期 ASC 排序，但组内按 DESC 排序
我有两张 table 。想象第一个是一个目录，包含很多文件(第二个表)。第二个表(文件)包含修改日期。现在，我想选择所有目录并按修改日期 ASC 对它们进行排序(因此，最新的修改最上面)。我不想显
mysql - 首先按(条件)排序，然后按(条件)排序
我想先根据用户的状态然后根据用户名来排序我的 sql 请求。该状态由 user_type 列设置: 1=活跃，2=不活跃，3=创始人。我会使用此请求来执行此操作，但它不起作用，因为我想在“活跃”成员
c++ - sort a, b, c是否等同于sort c；排序 b;排序？
在 C++ 中，我必须实现一个“类似 Excel/Access”(引用)的查询生成器，以允许对数据集进行自定义排序。如果您在 Excel 中使用查询构建器或 SQL 中的“ORDER BY a, b,
MongoDB 按字段 A 排序，如果字段 B != null 否则按字段 C 排序
我面临这样的挑战: 检索按字段 A 排序的文档如果字段 B 存在/不为空 . 否则按字段排序 C. 在 SQL 世界中，我会做两个查询并创建一个 UNION SELECT，但我不知道如何从 Mon
dart - 在 Dart 中，如何仅使用级联或链式调用来干净地映射/排序/折叠/排序/扩展？
我想对源列表执行以下操作: map 列表排序折叠排序展开列表其中一些方法(例如map和toList)是可链接的，因为它们返回非空对象。但是，sort 方法返回 void，因为它对 List
linux - 有人可以解释重新格式化 awk () | 输出的最佳方法吗？排序 | uniq-c |排序-rg？
我制作了一个用于分析 Windows 日志消息编号的脚本。 uniq -c 数字的输出很难预测，因为根据数字的大小会有不同的空白。此时，我手动删除了空白。这是对消息进行排序和计数的命令: cat n
python - 在 Python 字典中按值(降序)排序，然后按键(升序)排序
我有以下词典: mydict1 = {1: 11, 2: 4, 5: 1, 6: 1} mydict2 = {1: 1, 5: 1} 对于它们中的每一个，我想首先按值(降序)排序，然后按键(升序)排序
delphi - 如何使用多个比较器在 TObjectList<> 中进行类似于 Excel 的按 A 排序，然后按 B 排序
我刚刚开始使用泛型，目前在对多个字段进行排序时遇到问题。案例: 我有一个 PeopleList 作为 TObjectList我希望能够通过一次选择一个排序字段，但尽可能保留以前的排序来制作类似 Ex
sql - 如果 Column1 不为空，则按 Column1 排序，否则按 Column2 排序
有没有办法在 sql 中组合 ORDER BY 和 IS NULL 以便我可以在列不为空时按列排序，但如果它为null，按另一列排序？最佳答案类似于: ORDER BY CASE WHEN
mysql - 排序 mysql 结果。按 col1 排序，按 col2 分组
我有一个包含 2 列“id”和“name”的表。 id 是常规的自动增量索引，name 只是 varchar。 id name 1 john 2 mary 3 pop 4 mary 5 j
node.js - API 分页、过滤、排序 VS CLIENT 分页、过滤、排序
场景网站页面有一个带有分页、过滤、排序功能的表格 View 。表中的数据是从REST API服务器获取的，数据包含数百万条记录。数据库 REST API 服务器 Web 服务器浏览器问
objective-c - 获取 NSDictionary 键的 NSArray，按 Value 排序，然后按 Key 排序
假设我有一本字典，其中的键(单词)和值(分数)如下: GOD 8 DONG 16 DOG 8 XI 21 我想创建一个字典键(单词)的 NSArray，首先按分数排序，然后按字
mysql - sphinx 搜索查询前 20 个按标题 WEIGHT 排序，后 20 个按标题 ASC 排序，无重复输出
如何在 sphinx 上通过 sql 命令选择前 20 行按标题 WEIGHT 排序，接下来 20 行按标题 ASC 排序(总共 40 个结果)，但不要给出重复的标题输出。我尝试了这个 sql 命令
SQLite - 排序
我有一个奇怪的问题，当从 SQLite 数据库中选择信息并根据日期排序时，返回的结果无效。我的SQL语句是这样的: Select pk from usersDates order by dateti

首页

博学

6Ren·AI

商城