将React和Leaflet结合起来的好方法

Good way to combine React and Leaflet

本文关键字：方法 起来 结合 React Leaflet      更新时间：2023-09-26

我正在进行一个将React和Leaflet结合在一起的项目，但我必须说，我在语义方面遇到了一些困难。

由于大部分内容都是由传单直接管理的，我不知道在React组件中添加传单映射实例作为状态是否有意义。

当使用传单创建标记时也会遇到同样的问题，因为它不会返回任何内容，所以我实际上没有任何内容要渲染。在我看来，逻辑本身似乎很模糊

这是我开始做的。它很有效，但我觉得我写的代码不好，错过了这个概念。

/** @jsx React.DOM */
/* DOING ALL THE REQUIRE */
var Utils = require('../core/utils.js');
var Livemap = React.createClass({
    uid: function() {
        var uid = 0;
        return function(){
            return uid++;
        };
    },
    getInitialState: function() {
        return {
            uid: this.uid()
        }
    },
    componentDidMount: function() {
        var map = L.map('map-' + this.state.uid, {
            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.fitWorld();
        return this.setState({
            map: map
        });
    },
    render: function() {
        return (
            <div className='map' id={'map-'+this.state.uid}></div>
        );
    }
});
(function(){
    Utils.documentReady(function(){
        React.render(
            <Livemap />,
            document.body
        )
    });
})();

所以我的问题是：

  • 这个样品看起来合法吗
  • 您将如何处理添加标记和管理其事件的逻辑
  • 您不需要自己管理唯一性，即"UID"。相反，您可以使用getDOMNode来访问组件的实际节点。传单的API支持字符串选择器或HTMLElement实例
  • 传单正在管理渲染，因此map不应驻留在state上。仅将影响React对DOM元素的呈现的数据存储在state中

除此之外，请正常使用传单API，并根据需要将React组件的回调绑定到传单映射。React在这一点上只是一个包装器。

import React from 'react';
import ReactDOM from 'react-dom';
class Livemap extends React.Component {
    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() {
        this.map.off('click', this.onMapClick);
        this.map = null;
    }
    onMapClick = () => {
        // Do some wonderful map things...
    }
    render() {
        return (
            <div className='map'></div>
        );
    }
}

作为一个不太详细的额外答案，PaulLeCam的react传单组件似乎很受欢迎。尚未使用，但看起来很有前景：

https://github.com/PaulLeCam/react-leaflet

更新：它很稳定。我还没有使用很多功能，但代码库写得很好，易于遵循和扩展，而且我使用的功能开箱即用。

相关文章：