ホ−ム » 基本サンプル » WMS形式の地図を重畳する

WMS形式の地図を重畳する

実行結果

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

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to ./apisample/wms/WMSOverlay.html

ソースコードと解説

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        path {
            pointer-events: none;
        }
    </style>
    <script src="//api.its-mo.com/v3/loader?key=JSZ9ea6d26ac8a7|VbFeP&enc=UTF8&force=1&api=zdcmap.js,control.js,imglayer.js,wms.js" type="text/javascript"></script>
    <script>
        var map, imageLayer;

        function load() {
            var dom = document.getElementById('map');
            map = new ZDC.Map(
                    dom, {
                        zoom: 10,
                        mapType: ZDC.MAPTYPE_FLAT_COLOR
                    }
            );
            map.addWidget(imageLayer);
            map.addWidget(new ZDC.Control());
            changeAlphaRange({value: 60});
            changeAlphaValue({value: 60});
        }
        //タイルパラメータ
        var params =
              {
                service: 'WMS',
                request: 'GetMap',
                layers: 'Kanto_Rapid',
                version: '1.3',
                format: 'image/png',
                crs: 'crs:84'
              };

        //イメージレイヤーの生成
        var imageLayer = new ZDC.ImageLayer(
              {
                hosts: ['www.finds.jp'],
                path: 'ws/wms.php'
              },
                params
        );

        //透過度の調整
        function changeAlphaRange(val) {
          var alpha = Number(val.value) / 100.0;
          var alphaTextForm = document.getElementById('alpha-value');
             alphaTextForm.setAttribute('value', val.value);
             imageLayer.setOpacity(alpha);
          }

        function changeAlphaValue(val) {
          var alpha = Number(val.value) / 100.0;
              imageLayer.setOpacity(alpha);
        }
    </script>

</head>
<body onload="load()"style="">
  <div id="map" style="position:absolute; width: 750px; height: 500px; left: 20px; top: 0px; " ></div>
  <div id="ber" style="top: 530px; left: 20px; position:absolute;">
  重畳レイヤーの不透明度
  <input type="range" value="50" id="alpha-range" onchange="changeAlphaRange(this)">
  <input type="text" value="0" style="width: 30px;" id="alpha-value" onchange="changeAlphaValue(this)">
</div>
<div id="map" style="position: relative; height: 100%; left: 0px; top: 0px; width: 100%;" ></div>
</body>
</html>

出典

農研機構 (https://www.finds.jp/index.html.ja)