leaflet入門３｜地図に円を描画する

Leaflet（1.3）を使ってマップに図形（円）を描画します。

Demoはこちらです。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Quick Start - Leaflet</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
    <style type="text/css">
     <!--
      #mapid { height: 400px; width: 600px}
    -->
    </style>
  </head>
  <body>
    <div id="mapid"></div>

    <script>
    	var mymap = L.map('mapid').setView([35.7102, 139.8132], 15);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    		maxZoom: 18,
    		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
    	}).addTo(mymap);

      var circle = L.circle([35.7101, 139.8107], {
          radius: 500,
          color: 'blue',
          fillColor: '#399ade',
          fillOpacity: 0.5
      }).addTo(mymap);

    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Quick Start - Leaflet</title>

<!--

#mapid { height: 400px; width: 600px}

-->

</style>

</head>

<body>

var mymap = L.map('mapid').setView([35.7102, 139.8132], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

maxZoom: 18,

attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '

}).addTo(mymap);

var circle = L.circle([35.7101, 139.8107], {

radius: 500,

color: 'blue',

fillColor: '#399ade',

fillOpacity: 0.5

}).addTo(mymap);

</script>

</body>

</html>

２．解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

２−１．L.circle

円を描画するには、L.circle を使用します。

基本的には、以下のように円の中心座標と、radiusで半径（m）を指定します。

var circle = L.circle([35.7101, 139.8107], {
    radius: 500,
    color: 'blue',
    fillColor: '#399ade',
    fillOpacity: 0.5
}).addTo(mymap);

var circle = L.circle([35.7101, 139.8107], {

radius: 500,

color: 'blue',

fillColor: '#399ade',

fillOpacity: 0.5

}).addTo(mymap);

２−２．線、塗りつぶしの色を指定

多角形と同様に、描画する線や図形内を塗りつぶす色を指定することができます。

指定の仕方は、以下のプロパティを設定します。

color：描画する線の色を指定します。

fillColor：塗りつぶしの色を指定します。

fillOpacity：塗りつぶしの不透明度を指定します。（0になるほど透明になります）

L.circleを使うと、簡単に円を描画することができます。

次回は地図にマーカーを表示したいと思います。