XYZ形式の地図を重畳する

実行結果

次の例では、WMSを重畳した日本語通常地図を表示します。

重畳レイヤーの不透明度

ソースコードと解説

画像レイヤーを表示するには、ZDC.ImageLayerクラスと、ZDC.MapクラスのaddWidget(widget)を利用します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ローダーのURLをscriptでロードする -->
<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
<script type="text/javascript">
  // オブジェクト
  var map, imageLayer;

  // 中心点の緯度経度（東京駅）
  const lat = 35.681406, lng = 139.767132;

  // ZMALoader
  ZMALoader.setOnLoad(function (mapOptions, error) {
    if (error) {
      console.error(error)
      return
    }

    // マップオプションをデフォルト値から変更する
    mapOptions.center = new ZDC.LatLng(lat, lng); // 中心点の緯度経度を設定

    // 地図を生成
    map = new ZDC.Map(
      document.getElementById('ZMap'),
      mapOptions,
      function() {
        // Success callback
        /* ★ImageLayerを作成 */
        imageLayer = new ZDC.ImageLayer(
          'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
          {
            opacity:0.5,
            propagation:true
          }
        );
        /* ImageLayerをMapに追加 */
        map.addWidget(imageLayer);
      },
      function() {
        // Failure callback
      }
    );
  });

  /* 透明度の変更 */
  function changeAlphaRange(val) {
    var alpha = Number(val.value) / 100.0;
    var alphaTextForm = document.getElementById('alpha-value');
    alphaTextForm.setAttribute('value', val.value);
    imageLayer.setOptions({opacity: alpha});
  }
  function changeAlphaValue(val) {
    var alpha = Number(val.value) / 100.0;
    imageLayer.setOptions({opacity: alpha});
  }
</script>
</head>
<body>
  <div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;"></div>
  <div class="mb-2" id="IBox">
    重畳レイヤーの不透明度
    <input type="range" value="50" id="alpha-range" onchange="changeAlphaRange(this)">
    <input type="text" value="50" style="width: 30px;" id="alpha-value" onchange="changeAlphaValue(this)">
  </div>
</body>
</html>

出典：国土地理院