Leafletで地図上に円、ポリラインやポリゴンを描画します。
使い方
L.circle
円を描画するには、L.circle を使用します。
L.circle(<LatLng> latlng, <Number> radius, <Circle options> options?)radius
| Option | Type | Default | Description |
|---|---|---|---|
radius | Number | | 半径（m）を指定します。 |
Options
| Option | Type | Default | Description |
|---|---|---|---|
| stroke | Boolean | true | 線を描画するかどうかを指定します。 |
| color | String | ‘#3388ff’ | 線色を指定します。 |
| weight | Number | 3 | 線幅を指定します。 |
| opacity | Number | 1.0 | 線の透過率を指定します。 |
| lineCap | String | ‘round’ | 線端形状を指定します。 |
| lineJoin | String | ‘round’ | 線接合形状を指定します。 |
| dashArray | String | null | 破線パターンを指定します。 |
| dashOffset | String | null | 破線開始位置を指定します。 |
| fill | Boolean | depends | 塗りつぶしをするかどうかを指定します。 |
| fillColor | String | * | 塗りつぶし色を指定します。 |
| fillOpacity | Number | 0.2 | 塗りつぶしの透過率を指定します。 |
| fillRule | String | ‘evenodd’ | 塗りつぶしルールを指定します。 |
| bubblingMouseEvents | Boolean | true | マウスイベントのトリガーとするかどうかを指定します。 |
| renderer | Renderer | 特定の描画エンジンを指定します。 | |
| classname | String | null | クラス名を指定します。 |
L.polyline
ポリラインを描画するには、L.polylineを使用します。
L.polyline(<LatLng[]> latlngs, <Polyline options> options?)LatLngs
| Option | Type | Default | Description |
|---|---|---|---|
latlngs | Number | | 座標の配列を指定します。 |
Options
| Option | Type | Default | Description |
|---|---|---|---|
| smoothFactor | number | 1.0 | 見た目の滑らかさを指定します。 |
| noClip | Boolean | false | クリッピングを指定します。 |
その他のオプションは、L.circleと同様です。
L.polygon
ポリゴンを描画するには、L.polygonを使用します。
L.polygon(<LatLng[]> latlngs, <Polyline options> options?)latlngs・オプションは、L.polylineと同様です。
全体コード
<html lang="ja">
<head>
<title>Leafletの図形の描画</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width:100%;height:100%"></div>
<script>
//表示位置を設定
var _map = L.map('map');
//初期表示時に中心座標とズームレベルを設定
_map.setView([35.6895, 139.69172], 13);
//初期表示時の表示地図を設定
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
}).addTo(_map);
//円の描画
L.circle([35.704662,139.698457], { radius: 1000, color: "#FF0000", fill: false, weight: 5 }).addTo(_map);
//ポリラインの描画
var points1 = [[35.680524,139.661893],[35.674662,139.679231],[35.665451,139.657945],[35.659867,139.679918],[35.648560,139.653482]];
L.polyline(points1, { color: "#008000", weight: 5 }).addTo(_map);
//ポリゴンの描画
var points2 = [[35.675918,139.705839],[35.664055,139.727811],[35.653586,139.711332],[35.663078,139.701719]];
L.polygon(points2, { color: "#0000FF", weight: 5, fill: true, fillColor: "#ff8000", opacity: 0.5 }).addTo(_map);
</script>
</body>
</html>
コメント