【React】「react-leaflet-draw」ライブラリで描画する直線の色を変更する

今回は、React で Leaflet の地図に矩形や円、マーカー等を描画できるライブラリ「react-leaflet-draw」で、描画する線の色や透明度等を変更する方法についてです。
実はライブラリを見れば書いてあるのですが…記事にしておけば今後私が楽かなと思いまとめます。

GitHub のページはこちら。

GitHub – alex3165/react-leaflet-draw: React component for leaflet-draw on top of react-leaflet
https://github.com/alex3165/react-leaflet-draw

サンプルコードは下記のとおりです。
描画部分のみ抜粋しています。

<MapContainer
  id='map'
  center={this.state.latlng}
  zoom={this.state.zoom}>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <FeatureGroup>
    <EditControl
      position="topleft"
      draw={{
        polyline: {
          shapeOptions: {
            color: '#3AABD2',
            opacity: 1.0,
          }
        }
      }} />
  </FeatureGroup>
</MapContainer>

今回重要なのは 12～19 行目の draw で、こちらに polyline > shapeOptions を追加し、直線の色・透明度を指定しています。
今回は、色を明るい水色、透明度は 100% にしました。
デフォルトだと、色は青色で、透明度は 50% です。
なおこちらの値は、直線だけでなく矩形にも反映されますので、その点だけご注意ください。

変更する項目は以上です。
個人的には、透明度は 100% 近くあった方が描画した線が見やすくなると思いますので、透明度の値だけでも変更することをおすすめします。

以上、Leaflet の地図に図形を描画できるライブラリ「react-leaflet-draw」で描画する直線の色と透明度を変更する方法についてでした。
ご参考になれば幸いです。