GIS OpenLayers2 最大化

2020-10-232020
80.9% (296.2/366)
October
71.7% (22.2/31)
Week 43
60.5% (4.2/7)
Day 23 Fri
23.7% (5.6/24)

訪問者

total: 4404
today: 1
yesterday: 2
now: 5

更新

MenuBar

OpenLayers?をブラウザの大きさ一杯一杯で表示したい。画面の大きさが変わったら追随して OpenLayers? の大きさも変わってほしい
- big
- small

openlayers3.html

<!DOCTYPE html>
<html lang="ja">
  <meta charset="UTF-8"/>
  <title>Openlayers Example</title>
  <style type="text/css">
    body {
      padding : 0;
      margin : 0;
    }
    #map {
    }
  </style>
  <body>
    <div id="map"></div>
  </body>
  <script src="OpenLayers.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript">
  var map = null;

  $(window).ready(function(){
    resize();

    var lon = 140.0;
    var lat = 35.0;
    var zoom = 5;
    map = new OpenLayers.Map('map',{
      displayProjection: new OpenLayers.Projection("EPSG:4326")
    });
    var localWMS = new OpenLayers.Layer.WMS(
      "Local WMS layers",
      "http://app.example.com/mapcache/?",
      {layers: 'test'},
      {isBaseLayer: true,
       units:"dd", 
       maxExtent: new OpenLayers.Bounds(-180,-90,180,90),
       projection: new OpenLayers.Projection("EPSG:4326")
      }
    );
    map.addLayer(localWMS);
    map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
    map.addControl(new OpenLayers.Control.LayerSwitcher());

    $(window).resize(function(){
      resize();
    });
  });

  var resizeTimerId = null;
  function resize() {
    if (resizeTimerId) {
      clearTimeout(resizeTimerId);
    }
    resizeTimerId = setTimeout(function(){
 
      var $window = $(window);
      $('#map').css({
        width : $window.width(),
        height : $window.height()
      });
      // 上記の操作で、ブラウザのスライドバーが消えた場合に、スライドバーの分divを拡大する
      $('#map').css({
        width : $window.width(),
        height : $window.height()
      });
    
      if (map) {
        map.updateSize();
      }
    },200);
  }
  </script>
</html>

body の CSS に、padding : 0, margin : 0 を指定する
<div id="map"></div> の width と height は、$(window).height(), $(window).width() にする
Window Size に追随するためには
- window の resize イベントで、<div id="map"></div> の width と height を変更する
- その後、OpenLayers?.Map#updateSize() を呼ぶ
人間が、ちまちまブラウザのサイズを変更している時、いちいち resize イベントが発生するので、200ms 動きがなかった時に、OpenLayers? のサイズ変更を行うようにする
- 200ms 後に OpenLayers? のサイズ変更を行うように予約する（１）
- その 200ms の間に Window のサイズ変更が起きたら、（１）を解除して、新たに 200ms 後に OpenLayers? のサイズ変更を行うように予約する
- 結果的に、200ms 動きがなかった時に、OpenLayers? のサイズ変更が行われる

GIS

GIS OpenLayers2 最大化

目次

訪問者

更新

最新の10件

人気の10件

MenuBar