2023-10-05
浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL：053-543-9889
営業時間：9：00～18：00（月〜金）
住所：静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F
住所：静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F
【react】react-leafletのズームボタンをコンポーネント化する
react-leafletで拡張性の面を考慮してコンポーネントからズームボタンを作りたいと思い
カスタマイズして作ってみました。
作り方は特に通常のコンポーネント作成作業と変わらないかも。react-leaafletでマップが表示されれば
もう自由に作れます。一つずつ説明しようと思いましたが必須コードのみ網羅したほうが楽だと思ったので参考に
したい方はどうぞ。
まず、zoomControlをfalseにします。これがtrueまたは未設定だとZoomControl以外のデフォルトのズームボタンが表示されて
ズームボタンが二つに増えてしまうので忘れずにチェックをば。
</pre>
<div>
<div>import { withRouter } from 'react-router';</div>
<div>import L from 'leaflet';</div>
<div>import 'leaflet/dist/leaflet.css';</div>
<div>import { Map, Marker, Popup, TileLayer } from 'react-leaflet';</div>
<div>import ZoomControl from '../components/ZoomControl';</div>
<div>const zoomOptions = {</div>
<div> position: 'topright',</div>
<div> }</div>
<div><Map center={this.state.position} style={{height: '200px'}} zoom={15} zoomControl={false} id='map'></div>
<div> <ZoomControl className="zoom" options={zoomOptions}/></div>
<div> <TileLayer</div>
<div> url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"</div>
<div> attribution="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors" /></div>
<div></Map></div>
<div></div>
</div>
<pre>[javascript]
</pre>
<div>
<div>今回追加したZoomControlコンポーネント。propsでオプションとマップを受取りL.Controlでmapに機能追加</div>
<div>をしています。普通のコンポーネントとは異なりwithLeafletを使ってmapComponentとやりとりしています。</div>
<div>//ZoomControl</div>
<div></div>
</div>
<pre>[javascript]</pre>
<pre></pre>
<div>import React, { Component } from "react";</div>
<div>import { withLeaflet } from "react-leaflet";</div>
<div>import L from 'leaflet';</div>
<pre></pre>
<div>class ZoomControl extends Component {</div>
<div> componentDidMount() {</div>
<div> const { options } = this.props;</div>
<div> const { map } = this.props.leaflet;</div>
<pre></pre>
<div> L.control.zoom({options}).addTo(map);</div>
<div> }</div>
<div> render() {</div>
<div> return null;</div>
<div> }</div>
<div>}</div>
<div><span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 1rem;">export default withLeaflet(ZoomControl);</span></div>
<pre>
render部分は不要。(addToで追加するだけなので)
