2015年8月26日水曜日

18 - 重ねた地図をもう少し 4 - レイヤをマップに追加

18-5 レイヤをマップに追加
「16-5 レイヤを操作する」で作成したマップ（16-5_ol3-1.html）にレイヤを追加します。

1 NetBeans を起動します。









2 「新規ファイル」ボタンをクリック。


3 「新規ファイル」ダイアログで「カテゴリ」を「HTML5」ファイルタイプ」を「HTMLファイル」を選択して「次>」ボタンをクリック。






4 「new HTML ファイル」ダイアログで「ファイル名」を「18-5_ol3-1」と入力して「終了」ボタンをクリック。






「index.html」
<html>
 <head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
  <div>TODO write content</div>
  <div><a href="./13-3_ol3-1.html">13-3_ol3-1.html</a></div>
  <div><a href="./14-7_ol3-1.html">14-7_ol3-1.html</a></div>
  <div><a href="./15-3_ol3-1.html">15-3_ol3-1.html</a></div>
  <div><a href="./16-3_ol3-1.html">16-3_ol3-1.html</a></div>
  <div><a href="./16-4_ol3-1.html">16-4_ol3-1.html</a></div>
  <div><a href="./16-5_ol3-1.html">16-5_ol3-1.html</a></div>
  <div><a href="./18-5_ol3-1.html">18-5_ol3-1.html</a></div>
 </body>
</html>


「18-5_ol3-1.html」
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>あきる野市地図3 Layer group example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>
<style>
#layertree li > span {
  cursor: pointer;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
 <div class="span6">
  <div id="map" class="map"></div>
 </div>
 <div id="layertree" class="span6">
  <h5>Click on layer nodes below to change their properties.</h5>
  <ul>
   <li><span>地理院地図 写真 layer</span>
    <fieldset id="layer0">
     <label class="checkbox" for="visible0">
      <input id="visible0" class="visible" type="checkbox"/>visibility
     </label>
     <label>opacity</label>
     <input class="opacity" type="range" min="0" max="1" step="0.01"/>
     <label>hue</label>
     <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
     <label>saturation</label>
     <input class="saturation" type="range" min="0" max="5" step="0.01"/>
     <label>contrast</label>
     <input class="contrast" type="range" min="0" max="2" step="0.01"/>
     <label>brightness</label>
     <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
    </fieldset>
   </li>
   <li>
    <span>Layer group</span>
    <fieldset id="layer1">
     <label class="checkbox" for="visible1">
      <input id="visible1" class="visible" type="checkbox"/>visibility
     </label>
     <label>opacity</label>
     <input class="opacity" type="range" min="0" max="1" step="0.01"/>
     <label>hue</label>
     <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
     <label>saturation</label>
     <input class="saturation" type="range" min="0" max="5" step="0.01"/>
     <label>contrast</label>
     <input class="contrast" type="range" min="0" max="2" step="0.01"/>
     <label>brightness</label>
     <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
    </fieldset>
    <ul>
     <li>
      <span>東京都 国土数値情報 layer</span>
      <fieldset id="layer10">
       <label class="checkbox" for="visible10">
        <input id="visible10" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>
     <li>
      <span>あきる野市 基盤地図情報 layer</span>
      <fieldset id="layer11">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>
    </ul>
   </li>
     <li>
      <span>町字界線 基盤地図情報 layer</span>
      <fieldset id="layer12">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>
     <li>
      <span>町字界点 基盤地図情報 layer</span>
      <fieldset id="layer13">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>
     <li>
      <span>建築物 基盤地図情報 layer</span>
      <fieldset id="layer14">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>
     <li>
      <span>自然公園 国土数値情報 layer</span>
      <fieldset id="layer15">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>
     <li>
      <span>特別地域 国土数値情報 layer</span>
      <fieldset id="layer16">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>
     <li>
      <span>特別保護地域 国土数値情報 layer</span>
      <fieldset id="layer17">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>
  </ul>
 </div>
</div>
</div>
<script>
var extent = [15488640, 4257688, 15510235, 4270370];
var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
   extent: extent,
   source: new ol.source.XYZ({
    url: 'http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg',
    attributions: [new ol.Attribution({
     html: '<a href="http://www.gsi.go.jp/kikakuchousei/' +
           'kikakuchousei40182.html" target="_blank">' +
             '国土地理院 地理院地図</a>'
    })],
   })
  }),
  new ol.layer.Group({
   layers: [
    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      attributions: [new ol.Attribution({
       html: '国土数値情報'
      })],
      params: {
       'LAYERS': 'tokyo_kuiki', 
       'SRS': 'EPSG:4326',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),
    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      attributions: [new ol.Attribution({
       html: '<a href="http://www.gsi.go.jp/kikakuchousei/' +
             'kikakuchousei40182.html" target="_blank">' +
               '国土地理院 基盤地図情報</a>'
      })],
      params: {
       'LAYERS': 'akiruno_kukaku-2', 
       'SRS': 'EPSG:2451',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),
    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'choazakaisen', 
       'SRS': 'EPSG:2451',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),
    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'choazakaiten', 
       'SRS': 'EPSG:2451',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),
    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'kenchikubutsu', 
       'SRS': 'EPSG:2451',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),
    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'shizenkoen', 
       'SRS': 'EPSG:4326',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),
    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'tokubetsu', 
       'SRS': 'EPSG:4326',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),
    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'tokubetsuhogo', 
       'SRS': 'EPSG:4326',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    })
   ]
  })
 ],
 controls: ol.control.defaults({
  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
   collapsible: false
  })
 }).extend([
  new ol.control.ScaleLine()
 ]),
 target: 'map',
 view: new ol.View({
  center: [15499432, 4264029],
  extent: extent,
  zoom: 12
 })
});
function bindInputs(layerid, layer) {
 var visibilityInput = $(layerid + ' input.visible');
 visibilityInput.on('change', function() {
  layer.setVisible(this.checked);
 });
 visibilityInput.prop('checked', layer.getVisible());
 $.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
  function(i, v) {
   var input = $(layerid + ' input.' + v);
   input.on('input change', function() {
    layer.set(v, parseFloat(this.value));
   });
   input.val(String(layer.get(v)));
  }
 );
}
map.getLayers().forEach(function(layer, i) {
 bindInputs('#layer' + i, layer);
 if (layer instanceof ol.layer.Group) {
  layer.getLayers().forEach(function(sublayer, j) {
   bindInputs('#layer' + i + j, sublayer);
  });
 }
});
$('#layertree li > span').click(function() {
 $(this).siblings('fieldset').toggle();
}).siblings('fieldset').hide();
</script>
</body>
</html>


投稿者 時刻:
ラベル: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)