Developing OGC Compliant Web Applications with GeoExt の 1.1. Creating a Map Window ページ（http://workshops.boundlessgeo.com/geoext/basics/map.html）を参考に HTML ファイルを準備します。
1. GeoExt Basics（http://workshops.boundlessgeo.com/geoext/basics/index.html#geoext-basics）を参考に GeoEXT で地図を表示します。
d 「App Exploler」ペインの「ol017-nippon_bmi_akiruno_pgis.html」をダブルクリックして開きます。
e 次のように内容の一部をコピーして「ol017-nippon_bmi_akiruno_pgis.html」に貼り付け、修正します。
（29-2 で追加したところは削除します。）
---
<!-- ここから追加 -->
<link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <link rel="stylesheet" type="text/css" href="GeoExt/resources/css/geoext-all-debug.css" /> <script type="text/javascript" src="GeoExt/lib/GeoExt.js"></script><!-- ここまで -->
<script type="text/javascript"> // var map, layer0, layer1, layer2, layer3, layer4; 削除/*
ここからコードはほとんど書き換えます。
Map 表示用のコードを利用して修正します。
*/
Ext.BLANK_IMAGE_URL = "ext-3.4.1/resources/images/default/s.gif"; var app, items = [], controls = [];
Ext.onReady(function() {
app = new Ext.Viewport({
layout: "border",
items: items
});
});
items.push({
xtype: "gx_mappanel",
ref: "mapPanel",
region: "center",
map: {
// numZoomLevels: 19,
controls: controls,
projection: new OpenLayers.Projection("EPSG:2451"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-63100,-34500,-45400,-24200)
},
/*
extent: OpenLayers.Bounds.fromArray([
-122.911, 42.291,
-122.787, 42.398
]),
*/
/*
layers: [new OpenLayers.Layer.WMS(
"Medford",
"/geoserver/wms",
{layers: "medford"},
{isBaseLayer: false}
)]
*/
// 表示順に並べ換える
layers: [
new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://192.168.1.200:8080/geoserver/wms",
{
layers: 'npn:tokyo10m-epsg2451'
},{
isBaselayer: false
}),
new OpenLayers.Layer.WMS( "Tokyo Kuiki WMS",
"http://192.168.1.200:8080/geoserver/wms",
{
layers: 'npn:tokyo_kuiki',
transparent: true,
format: 'image/png'
},{
isBaselayer: false
}),
new OpenLayers.Layer.WMS( "Akiruno Kukaku WMS",
"http://192.168.1.200:8080/geoserver/wms",
{
layers: 'npn:akiruno_kukaku',
transparent: true,
format: 'image/png'
},{
isBaselayer: false
}),
new OpenLayers.Layer.WMS( "Akiruno Kenchiku WMS",
"http://192.168.1.200:8080/geoserver/wms",
{
layers: 'npn:akiruno_kenchiku',
transparent: true,
format: 'image/png'
},{
isBaselayer: false
}),
new OpenLayers.Layer.WMS( "Tokyo Public Facilities WMS",
"http://192.168.1.200:8080/geoserver/wms",
{
layers: 'npn:tokyo_pf',
transparent: true,
format: 'image/png'
},{
isBaselayer: false
})
]
});
controls.push( new OpenLayers.Control.Navigation(), new OpenLayers.Control.Attribution(), new OpenLayers.Control.PanPanel(), new OpenLayers.Control.ZoomPanel(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.MousePosition(), new OpenLayers.Control.ScaleLine() );
</script> </head> <body> </body> </html>
0 件のコメント:
コメントを投稿