「Mobile Navigation（mobile-navigation.html）」を参考に、マルチタッチデバイス専用のナビゲーションを試してみます。
１本の指でダブルタップするとズームイン、２本の指で（シングル）タップするとズームアウトします。
同じように「mobile_navigation.js」を開きます。
f 「mobile_navigation.html」の内容をコピーして「ol019b-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
g 同じように、新規に「mobile-navigation_takata.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile-navigation.js」の内容をコピーして貼り付け、修正します。
「ol019b-nippon_bmi_takata_pgis.html」
<!DOCTYPE html> <html> <head> <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"> <title>Mobile Navigation Example(R.Takata)</title>
<!-- 追加 --> <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 type="text/javascript" src="mobile-navigation_takata.js"></script> <!-- 修正ここまで -->
<!-- 追加 地図に合わせてビューを変更-->
<style>
.smallmap {
width: 256px;
height: 256px;
border: 1px solid #ccc;
}
</style>
<!-- 追加ここまで -->
</head>
<body onload="init()"> <h1 id="title">Mobile Navigation(R.Takata)</h1> <div id="tags"> mobile, touch, drag, move, zoom, navigate </div> <div id="shortdesc">Demonstrate map navigation on mobile</div> <div id="map" class="smallmap"></div> <div id="docs">---
「mobile-navigation_takata.js」
var map; var bounds = new OpenLayers.Bounds(55000,-121000,78000,-97000); // 追加
function init() {
map = new OpenLayers.Map({
div: "map",
theme: null,
// projection: new OpenLayers.Projection("EPSG:900913"),
// numZoomLevels: 18,
// ここから追加
projection: new OpenLayers.Projection("EPSG:2452"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: bounds,
// ここまで
controls: [
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.Zoom()
],
layers: [
/*
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
transitionEffect: 'resize'
})
*/
// ここから追加（mobile_tanaka.js と同じ）
new OpenLayers.Layer.WMS( "R.Takata Height WMS",
"http://192.168.1.200:8080/geoserver/wms",
{
layers: 'npn:rikuzentakata5m-epsg2452'
},{
isBaselayer: true
}),
---
// 追加ここまで
]
});
// map.setCenter(new OpenLayers.LonLat(0, 0), 3); map.zoomToMaxExtent(); }
0 件のコメント:
コメントを投稿