react-leafletで特定の座標から現在位置に移動するにはleaflet.locatecontrolを
使う必要があります。
インストール方法は以下の通り。
npm install leaflet.locatecontrol –save
簡単なコンポーネントから作っていきます。
子コンポーネント
</pre>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>import React, { Component } from "react";<br />import { withLeaflet } from "react-leaflet";<br />import Locate from "leaflet.locatecontrol";</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>class Locate extends Component {<br />componentDidMount() {<br />const { options } = this.props;<br />const { map } = this.props.leaflet;</p>
<!-- /wp:paragraph -->
<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">const lc = new Locate(options);
lc.addTo(map);
lc.start();</pre>
<!-- /wp:syntaxhighlighter/code -->
<!-- wp:paragraph -->
<p>}</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>render() {<br />return null;<br />}<br />}</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>export default withLeaflet(Locate);</p>
<pre>
親コンポーネント
</pre>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>render() {<br />const baseLocateOptions = {<br />position: 'topright',<br />strings: {<br />title: 'タイトルを表示します!'<br />},<br />onActivate: () =&gt; {}<br />}</p>
<!-- /wp:paragraph -->
<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">return (
&lt;Map center={this.props.center} zoom={this.props.zoom}&gt;
&lt;TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
/&gt;
&lt;LocateControl options={baseLocateOptions} startDirectly/&gt;
&lt;/Map&gt;
);</pre>
<!-- /wp:syntaxhighlighter/code -->
<!-- wp:paragraph -->
<p>}</p>
<pre>
とりあえず現在地を出すだけのシンプルなボタンの場合はこれでOK。
