37 - 陸前高田市の地図の表示 9 - 陸前高田市の地図の表示

37-9 陸前高田市の地図の表示
「36 - GeoEXT を使用した WFS-T」で使用した HTML コードを参考に陸前高田市の地図を表示します。
「ol017bonus-nippon_bmi_akiruno_pgis.html」をコピーして使います。

a 「App Exploler」ペインの「ol017bonus-nippon_bmi_akiruno_pgis.html」を右クリックし「コピー」をクリックします。

b 「App Exploler」ペイン上で右クリックし「貼り付け」をクリックします。

c 「名前の競合」ウィンドウで「ol018-nippon_bmi_takata_pgis.html」と入力し「OK」ボタンをクリックします。



Proj4JS の EPSG2452.js の定義ファイルを追加します。

---
<!-- Title を "Rikuzen Takata" に修正 -->
<title>WMS Example Rikuzen Takata PGIS2</title>
<script src="OpenLayers-2.13.1/lib/OpenLayers.js"></script>

<script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script>
<script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script>
<!--
<script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-compressed.js"></script>
<script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2451.js"></script>
 -->
<script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2452.js"></script>
---

マップの projection と maxExtent を修正します。
GeoServer の rikuzentakata_kukakusen レイヤのデータ

Min X: 55999.999987
Min Y: -117,971.375
Max X: 77,583.9140625
Max Y: -98138.759978

から、

---

 items.push({
 xtype: "gx_mappanel",
 ref: "mapPanel",
 region: "center",
 map: {
  controls: controls,
  projection: new OpenLayers.Projection("EPSG:2452"), // 修正
  displayProjection: new OpenLayers.Projection("EPSG:4326"),
  maxResolution: 'auto',
  units: 'meters',
  maxExtent: new OpenLayers.Bounds(55900,-118000,77500,-98100) // 修正
 },

---
// ここから修正

 layers: [
  new OpenLayers.Layer.WMS( "R.Takata Height WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:rikuzentakata5m-epsg2452'
   },{
    isBaselayer: true
  }),
  new OpenLayers.Layer.WMS( "Iwate Kuiki WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:iwate_kuiki',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  }),
  new OpenLayers.Layer.WMS( "R.Takata Kukakusen WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:rikuzentakata_kukakusen',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  }),
  new OpenLayers.Layer.WMS( "R.Takata Choaza WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:rikuzentakata_choaza',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  }),
  new OpenLayers.Layer.WMS( "R.Takata Kaigan WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:rikuzentakata_kaigan',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  }),
  new OpenLayers.Layer.WMS( "R.Takata Suigai WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:rikuzentakata_suigai',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  }),
  new OpenLayers.Layer.WMS( "R.Takata Suiiki WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:rikuzentakata_suiiki',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  }),
  new OpenLayers.Layer.WMS( "R.Takata Suikozo WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:rikuzentakata_suikozo',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  }),
  new OpenLayers.Layer.WMS( "R.Takata Doro WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:rikuzentakata_doro',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  }),
  new OpenLayers.Layer.WMS( "R.Takata Dorokozo WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:rikuzentakata_dorokozo',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  }),
  new OpenLayers.Layer.WMS( "R.Takata Kido WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:rikuzentakata_kido',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  }),
  new OpenLayers.Layer.WMS( "R.Takata Kenchiku WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:rikuzentakata_kenchiku',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  }),
  new OpenLayers.Layer.WMS( "Iwate Public Facilities WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
    layers: 'npn:iwate_pf',
    transparent: true,
    format: 'image/png'
   },{
    isBaselayer: false
  })
 ]
});

// ここまで
---

items.push({
 xtype: "editorgrid",
 ref: "featureGrid",
 title: "Feature Table",
 region: "south",
 height: 150,
 sm: new GeoExt.grid.FeatureSelectionModel(),
 store: new GeoExt.data.FeatureStore({
  fields: [
   {name: "fid", type: "int"},
   {name: "id", type: "string"},
   {name: "term", type: "string"},
   {name: "address", type: "string"},
   {name: "category1", type: "string"},
   {name: "category2", type: "string"},
   {name: "category3", type: "string"},
   {name: "createdate", type: "string"},
   {name: "lastupdate", type: "string"}
  ],

  proxy: new GeoExt.data.ProtocolProxy({
   protocol: new OpenLayers.Protocol.WFS({
    url: "/geoserver/ows",
    version: "1.1.0",
    featureType: "riuzentakata_polygon", // 修正
    featureNS: "http://www.myhome.net/npn",
    srsName: "EPSG:2452", // 修正
    geometryName: "the_geom",
    schema: "http://192.168.1.200/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=npn:riuzentakata_polygon" // 修正
   })
  }),
  autoLoad: true
 }),

---

参考 HTML ファイル
ol018-nippon_bmi_takata_pgis.html