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 triangle = L.polygon([
          [35.7165, 139.8115],
          [35.7156, 139.8102],
          [35.7143, 139.8121],
      ]).addTo(mymap);

      var quadrangle = L.polygon([
            [35.7135, 139.8128],
            [35.7125, 139.811],
            [35.7112, 139.812],
            [35.7124, 139.8143]
          ],
          {
            color: 'green',
            fillColor: '#25dc25',
            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 triangle = L.polygon([

[35.7165, 139.8115],

[35.7156, 139.8102],

[35.7143, 139.8121],

]).addTo(mymap);

var quadrangle = L.polygon([

[35.7135, 139.8128],

[35.7125, 139.811],

[35.7112, 139.812],

[35.7124, 139.8143]

{

color: 'green',

fillColor: '#25dc25',

fillOpacity: 0.5,

}

).addTo(mymap);

</script>

</body>

</html>

２．解説

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

２−１．L.polygon

多角形を描画するには、L.polygon を使用します。

基本的には、以下のように各地点の緯度経度を配列で指定します。

var triangle = L.polygon([
    [35.7165, 139.8115],
    [35.7156, 139.8102],
    [35.7143, 139.8121],
 ]).addTo(mymap);

var triangle = L.polygon([

[35.7165, 139.8115],

[35.7156, 139.8102],

[35.7143, 139.8121],

]).addTo(mymap);

地点間の線は自動的に描画されます。

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

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

指定の仕方は、以下のように各地点の緯度経度の後に指定します。

var quadrangle = L.polygon([
      [35.7135, 139.8128],
      [35.7125, 139.811],
      [35.7112, 139.812],
      [35.7124, 139.8143]
    ],
    {
      color: 'green',
      fillColor: '#25dc25',
      fillOpacity: 0.5,
    }
).addTo(mymap);

var quadrangle = L.polygon([

[35.7135, 139.8128],

[35.7125, 139.811],

[35.7112, 139.812],

[35.7124, 139.8143]

{

color: 'green',

fillColor: '#25dc25',

fillOpacity: 0.5,

}

).addTo(mymap);

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

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

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

L.polygonを使うと、簡単に多角形を描画することができます。

次回は円を描画したいと思います。