2013年11月25日月曜日

23 - OpenLayers で地図を重ねる 1 - あきる野市と東京都の地図を重ねる

23-1 座標系の違う地図の表示
ol002-nippon_bmi_akiruno_pgis.html に ol001-nippon_nlni_tokyo_pgis.map のレイヤをオーバーレイしてみます。
これにより、nippon_nlni_tokyo_pgis.map の tokyo_kuiki レイヤ(layer3)tokyo_pf レイヤ(layer4)が再投影されます。
作成したファイルを ol003-nippon_bmi_akiruno_pgis.html にしました。

地図を拡大するため、コントロールパネルの "+" を4回クリックすると、公共施設の位置が表示されました。

1 layer3 と layer4 を追加。
2 この地図の投影(projection:プロジェクション)。
3 マウスの位置(MousePosition)を度数表示にするための設定。(できませんでした。)

---
<script type="text/javascript">
 var map, layer1, layer2, layer3, layer4;
 function init(){
  map = new OpenLayers.Map('map', {
   projection: new OpenLayers.Projection("EPSG:2451"), <-2
   displayProjection: new OpenLayers.Projection("EPSG:4326"), <-3
   maxResolution: 'auto',
   units: 'meters',
   maxExtent: new OpenLayers.Bounds(-63100,-34500,-45400,-24200)
  });

  layer1 = new OpenLayers.Layer.WMS( "Akiruno Kukaku WMS",
   "http://192.168.1.200/cgi-bin/mapserv?",
  {
   map: '/home/user/mapfile/nippon_bmi_akiruno_pgis.map',
   layers: 'akiruno_kukaku',
   transparent: true,
   format: 'image/png'
  });

  layer2 = new OpenLayers.Layer.WMS( "Akiruno Kenchiku WMS",
   "http://192.168.1.200/cgi-bin/mapserv?",
  {
   map: '/home/user/mapfile/nippon_bmi_akiruno_pgis.map',
   layers: 'akiruno_kenchiku',
   transparent: true,
   format: 'image/png'
  });

  layer3 = new OpenLayers.Layer.WMS( "Tokyo Kuiki WMS",
   "http://192.168.1.200/cgi-bin/mapserv?",
  {
   map: '/home/user/mapfile/nippon_nlni_tokyo_pgis.map',
   layers: 'tokyo_kuiki',
//   transparent: true, <- 記述がないと基本レイヤ(baselayer)に設定される
   format: 'image/png'
  });

  layer4 = new OpenLayers.Layer.WMS( "Tokyo Public Facilities WMS",
   "http://192.168.1.200/cgi-bin/mapserv?",
   {
    map: '/home/user/mapfile/nippon_nlni_tokyo_pgis.map',
    layers: 'tokyo_pf',
    transparent: true,
    format: 'image/png'
  });
  map.addLayers([layer3, layer1, layer2, layer4]);
  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.zoomToMaxExtent();
 }
</script>
---

0 件のコメント: