WMS形式の地図を重畳する

実行結果

次の例では、WMSを重畳した日本語通常地図を表示します。
ソースコードと解説

<!DOCTYPE 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="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&enc=UTF8&api=zdcmap.js,control.js,imglayer.js,wms.js" type="text/javascript">
</script>
<script>
var map, imageLayer;

function loadMap() {

  map = new ZDC.Map(
      document.getElementById('map'),
      {
        zoom: 10,
        latlon: new ZDC.LatLon(35.681298, 139.766247),
        mapType: ZDC.MAPTYPE_WMS,
        wmsTile: {
          path: 'wms/40'
        }
      }
  );

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

  // 地図に重畳するイメージレイヤーの生成
  imageLayer = createImageLayer();
  map.addWidget(imageLayer);
  changeAlphaRange({value: 50});
  changeAlphaValue({value: 50});

}

function createImageLayer() {

  // 使用するマップタイプのズームレンジを取得する
  var zoomRange = ZDC.getMapType(ZDC.MAPTYPE_WMS).zoomRange;

  var imageLayer = new ZDC.ImageLayer(
          {
            hosts: ['cyberjapandata.gsi.go.jp/xyz/ort'],
            path: '/'
          }
  );
  imageLayer.setUrlFunc(function (param) {

    var leftBottom = param.leftBottom;
    var rightTop = param.rightTop;

    var z = zoomRange[map.getZoom()];
    var x = long2tile(leftBottom.lon, z);
    var y = lat2tile(rightTop.lat, z);

    return z + '/' + x + '/' + y +'.jpg';
  });
  return imageLayer;
}

function long2tile(lon,zoom) {
  return (Math.round((lon+180)/360*Math.pow(2,zoom)));
}
function lat2tile(lat,zoom)  {
  lat = Math.floor(lat * 10000000) / 10000000.0;
  return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom)));
}
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>
<body onload="loadMap()">
<div id="map" style="border:1px solid #777777; 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>
</body>
</html>
WMS形式の地図を重畳する

実行結果

ソースコードと解説

出典：国土地理院
