2014年3月31日月曜日

39 - OpenLayers Mobile 4 - Mobile Drawing

39-4 Mobile Drawing
「Mobile Drawing（mobile-drawing.html）」を参考に、モバイル機器で使用する編集ツールバーを追加します。

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「mobile-drawing.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「mobile_drawing.js」を開きます。






c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「ol019d-nippon_bmi_takata_pgis.html」と入力し、「次へ」ボタンをクリックします。







e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「mobile-drawing.html」の内容をコピーして「ol019d-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
g 同じように、新規に「mobile-drawing_takata.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile-drawing.js」の内容をコピーして貼り付け、修正します。



「ol019d-nippon_bmi_takata_pgis.html 
<!DOCTYPE html>
<html>
 <head>
  <title>OpenLayers Mobile Drawing(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" />
  <script type="text/javascript" src="OpenLayers-2.13.1/lib/OpenLayers.js?mobile"></script>
  <script src="mobile-drawing_takata.js"></script>
<!-- 修正ここまで -->
  <style>
---

「mobile-drawing_takata.js」 
var bounds = new OpenLayers.Bounds(55000,-121000,78000,-97000); // 追加

function init() {
--- 
/*
 var osm = new OpenLayers.Layer.OSM();
 osm.wrapDateLine = false;
*/
 map = new OpenLayers.Map({
  div: 'map',
//  projection: 'EPSG:900913',
//  numZoomLevels: 18,
// ここから追加
  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.TouchNavigation({
    dragPanOptions: {
     enableKinetic: true
    }
   }),
   new OpenLayers.Control.Zoom(),
   toolbar
  ],
//  layers: [osm, vector],
// ここから追加
  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
   }),
   vector
  ],
// 追加ここまで
//  center: new OpenLayers.LonLat(0, 0),
//  zoom: 1,
  center: bounds.getCenterLonLat(), // 修正
  zoom: 0,
  theme: null
 });
 // activate the first control to render the "navigation icon"
 // as active
 toolbar.controls[0].activate();
}


投稿者 時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)