「Mobile Layers（mobile-layers.html）」を参考に、WMS、WFS、KML レイヤを表示します。
同じように「mobile_layers.js」を開きます。
f 「mobile-layers.html」の内容をコピーして「ol019c-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
g 同じように、新規に「mobile-layers_takata.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile-layers.js」の内容をコピーして貼り付け、修正します。
「ol019c-nippon_bmi_takata_pgis.html」
<!DOCTYPE html> <html>
<head> <title>OpenLayers Mobile Layers(R.Takata)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes">
<!-- 追加 --> <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/defs/EPSG2452.js"></script> <!-- 追加ここまで -->
<!-- 修正 --> <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css"> <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css" /> <link rel="stylesheet" href="OpenLayers-2.13.1/examples/style.css" type="text/css"> <script type="text/javascript" src="OpenLayers-2.13.1/lib/OpenLayers.js?mobile"></script> <script src="mobile-layers_takata.js"></script> <!-- 修正ここまで -->---
「mobile-layers_takata.js」
// initialize map when page ready var map; var bounds = new OpenLayers.Bounds(55000,-121000,78000,-97000); // 追加
// Get rid of address bar on iphone/ipod
var fixSize = function() {
window.scrollTo(0,0);
document.body.style.height = '100%';
if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
if (document.body.parentNode) {
document.body.parentNode.style.height = '100%';
}
}
};
setTimeout(fixSize, 700); setTimeout(fixSize, 1500);
// allow testing of specific renderers via "?renderer=Canvas", etc var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; // 修正
function init() {
map = new OpenLayers.Map({
div: "map",
theme: null,
// ここから追加
projection: new OpenLayers.Projection("EPSG:2452"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: bounds,
restrictedExtent: bounds.clone(),
// ここまで
controls: [
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
},
}),
new OpenLayers.Control.Zoom()
]
});
// ここから修正
var wms = new OpenLayers.Layer.WMS( "R.Takata Height WMS",
"http://192.168.1.200:8080/geoserver/wms",
{
layers: 'npn:rikuzentakata5m-epsg2452'
},{
isBaselayer: true
});
var kml = new OpenLayers.Layer.Vector("KML", {
projection: map.displayProjection,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "kml/rikuzentakata.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true
})
}),
renderers: renderer
});
var wfs = new OpenLayers.Layer.Vector( "R.Takata Kukakusen WFS", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.WFS({
url: "http://192.168.1.200:8080/geoserver/wfs",
featureType: "rikuzentakata_kukakusen",
featureNS: "http://www.myhome.net/npn"
}),
renderers: renderer
});
// ここまで
map.addLayers([wms, wfs, kml]); // map.addLayers([wms, wfs]); // map.setCenter(new OpenLayers.LonLat(-104, 42), 3); map.setCenter(bounds.getCenterLonLat(), 0); // 追加 };
0 件のコメント:
コメントを投稿