面積を計算する

実行結果

次の例では、面積を計算します。
ソースコードと解説

面積を計算するにはZDC.areaCalメソッドを利用します。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,shape.js,control.js,userwidget.js&enc=UTF8"></script>
  <script src="area-1.0.js"></script>
  <!-- 取得したarea.jsを別途インクルードする -->
  <script type="text/javascript">
      var map;
      function loadMap() {
          map = new ZDC.Map(
              document.getElementById('ZMap'),
              {
                  zoom: 4,
                  mapType: ZDC.MAPTYPE_HIGHRES_LV18
              }
          );

          map.addWidget(new ZDC.ScaleBar());
          map.addWidget(new ZDC.Control());

          var polygon_area = polygonAreaCal();
          var output = 'polygon area:   ' + Math.floor(polygon_area) + 'm²';

          showOutput(output);
      }

      function polygonAreaCal () {
          var lls = [
              new ZDC.LatLon(35.6863167, 139.0950472),
              new ZDC.LatLon(35.4863167, 139.0050472),
              new ZDC.LatLon(35.2863167, 139.5950472),
              new ZDC.LatLon(35.7863167, 139.5950472),
              new ZDC.LatLon(35.6863167, 139.0950472)
          ];

          lls.forEach(function (latlon) {
              map.addWidget(new ZDC.Marker(latlon, { color: ZDC.MARKER_COLOR_ID_GRAY_S  }));
          });
          map.addWidget(new ZDC.Polyline(lls, { fillColor: '#000', fillOpacity: 0.4 }));
          return ZDC.areaCal(lls);
      }

      function showOutput(content) {
          var widgetLabel =
              {
                  html: '<div style="background-color: #fff; padding: 5px;" >' + content + '</div>',
                  size: new ZDC.WH(350, 50)
              };
          var widget = new ZDC.StaticUserWidget({ top: 10,right: 10 }, widgetLabel);
          map.addWidget(widget);
          widget.open();
      }

  </script>
</head>

<body onload="loadMap();">
<div id="ZMap" style="border:1px solid #777777; width:750px; height:500px; top:0px; left:20px; position:absolute;"></div>
</body>
</html>