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
