结合React和Leaflet的好方法

本文介绍了结合React和Leaflet的好方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在研究一个将React和Leaflet结合在一起的项目，但是我必须说我在语义上有些困难.

I am working on a project to combine React and Leaflet, but I must say I am having some hard time with the semantics.

由于大多数内容都是由Leaflet直接管理的，所以我不知道是否将Leaflet映射实例添加为React组件中的状态是否有意义.

As most of the stuff is managed by Leaflet directly, I don't know if it would make sense to add the Leaflet map instance as state in the React Component or not.

使用Leaflet创建标记时存在相同的问题，因为它不返回任何内容，因此我实际上没有任何要渲染的内容.在我看来，逻辑本身是模糊的.

Same problem when it comes to creating markers with Leaflet, as it does not return anything, I don't have anything to render really. The logic itself seems blurry to me.

这就是我开始做的.它正在工作，但是我感觉我在编写错误的代码并错过了这个概念.

Here is what I started to make. It's working but I feel like I'm writing bad code and missing the concept.

/** @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 来访问组件的实际节点. Leaflet的API支持字符串选择器或HTMLElement实例.
传单正在管理渲染，因此map不应存在于state上.仅将数据存储在state中，这会影响React对DOM元素的呈现.

You don't need to manage uniqueness, i.e. "UID", yourself. Instead, you can use getDOMNode to access the component's real node. Leaflet's API supports either a string selector or an HTMLElement instance.
Leaflet is managing rendering, so the map should not live on state. Only store data in state that affects React's rendering of the DOM element.

除了这两点，请正常使用Leaflet API，并根据需要将React组件中的回调与Leaflet映射联系起来.此时，React只是一个包装器.

Beyond those two points, use the Leaflet API normally and tie callbacks from your React component to the Leaflet map as you like. React is simply a wrapper at this point.

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>
        );
    }

}

这篇关于结合React和Leaflet的好方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

leaflet