今回は、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
サンプルコードは下記のとおりです。
描画部分のみ抜粋しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <MapContainer id='map' center={this.state.latlng} zoom={this.state.zoom}> <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' /> <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」で描画する直線の色と透明度を変更する方法についてでした。
ご参考になれば幸いです。
