web-dev-qa-db-ja.com

ReactとLeafletを組み合わせる良い方法

私はReactとLeafletを組み合わせるプロジェクトに取り組んでいますが、セマンティクスに苦労していると言わなければなりません。

ほとんどのものはLeafletによって直接管理されるため、Reactコンポーネントの状態としてLeafletマップインスタンスを追加するのが意味があるかどうかはわかりません。

Leafletでマーカーを作成する場合も同じ問題が発生します。何も返されないため、レンダリングするものがまったくありません。ロジック自体は私にはぼやけているようです。

これが私が作り始めたものです。それは機能していますが、私は悪いコードを書いていて、概念が欠けているように感じます。

/** @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
        )
    });
})();

だから私の質問は：

  • このサンプルは合法的なように見えますか？
  • マーカーを追加してイベントを管理するロジックにどのようにアプローチしますか？
javascriptleafletreactjs
32
soueuls
  • 一意性、つまり「UID」を自分で管理する必要はありません。代わりに、 getDOMNode を使用して、コンポーネントの実ノードにアクセスできます。 LeafletのAPIは、文字列セレクターまたはHTMLElementインスタンスのいずれかをサポートします。
  • リーフレットはレンダリングを管理しているので、mapはstateに置かないでください。 ReactのDOM要素のレンダリングに影響するstateにのみデータを保存します。

これらの2つのポイントを超えて、通常はLeaflet APIを使用し、必要に応じてReactコンポーネントからLeafletマップにコールバックを結び付けます。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>
        );
    }

}
41
Ross Allen

追加の、あまり詳細ではない回答として、PaulLeCamの反応リーフレットコンポーネントが人気があるようです。まだ使用していませんが、有望に見えます：

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

UPDATE：しっかりしています。まだ多くの機能を使用していませんが、コードベースはきちんと書かれており、簡単にフォローおよび拡張できます。

21
ericsoco