Debianでka-MapのメモプラスOpenLayers とGeoExt: OpenLayers 39 Vector Formats - ベクトル図の各種フォーマットでのデータの入出力

Vector Formats Example（vector-formats.html）を参考にベクトル図の各種フォーマットでのデータの入出力をしてみます。

HTML ファイルを新規作成します。
「openlayersTokyoproj」を右クリックして新規 -> HTML ファイルをクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：openlayers_vector- formats.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「vector-formats.html」の内容をコピーして新規作成したファイルに貼り付けます。

コードの修正とちょっと解説します。


<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>OpenLayers39 Vector Formats</title>
  <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="./examples/style.css" type="text/css" />


  <style type="text/css">
   input, select, textarea {
    font: 0.9em Verdana, Arial, sans-serif;
   }
   #leftcol {
    position: absolute;
    top: 0;
    left: 1em;
    padding: 0;
    width: 517px;
   }
   #map {
    width: 512px;
    height: 225px;
    border: 1px solid #ccc;
   }
   #input {
    width: 512px;
   }
   #text {
    font-size: 0.85em;
    margin: 1em 0 1em 0;
    width: 100%;
    height: 10em;
   }
   #info {
    position: relative;
    padding: 2em 0;
    margin-left: 540px;
   }
   #output {
    font-size: 0.8em;
    width: 100%;
    height: 512px;
    border: 0;
   }
   p {
    margin: 0;
    padding: 0.75em 0 0.75em 0;
   }
  </style>


  <script src="./lib/Firebug/firebug.js"></script>
  <script src="./lib/OpenLayers.js"></script>

<!-- Proj4js ライブラリ -->
  <script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>


  <script type="text/javascript">
   var map, vectors, formats;
// 各フォーマットのデータのプロジェクションや範囲指定など
   function updateFormats() {
    var in_options = {
     'internalProjection': map.baseLayer.projection,
     'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("inproj").value)
    };   
    var out_options = {
     'internalProjection': map.baseLayer.projection,
     'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("outproj").value)
    };
    var gmlOptions = {
     featureType: "feature",
     featureNS: "http://example.com/feature"
    };
    var gmlOptionsIn = OpenLayers.Util.extend(
     OpenLayers.Util.extend({}, gmlOptions),
     in_options
    );
    var gmlOptionsOut = OpenLayers.Util.extend(
     OpenLayers.Util.extend({}, gmlOptions),
     out_options
    );
    formats = {
     'in': {
      wkt: new OpenLayers.Format.WKT(in_options),
      geojson: new OpenLayers.Format.GeoJSON(in_options),
      georss: new OpenLayers.Format.GeoRSS(in_options),
      gml2: new OpenLayers.Format.GML.v2(gmlOptionsIn),
      gml3: new OpenLayers.Format.GML.v3(gmlOptionsIn),
      kml: new OpenLayers.Format.KML(in_options)
     }, 
     'out': {
      wkt: new OpenLayers.Format.WKT(out_options),
      geojson: new OpenLayers.Format.GeoJSON(out_options),
      georss: new OpenLayers.Format.GeoRSS(out_options),
      gml2: new OpenLayers.Format.GML.v2(gmlOptionsOut),
      gml3: new OpenLayers.Format.GML.v3(gmlOptionsOut),
      kml: new OpenLayers.Format.KML(out_options)
     } 
    };
   }

// 東京都用 map の設定


   function init(){
    map = new OpenLayers.Map("map", {
     projection: new OpenLayers.Projection("EPSG:2456"),
     displayProjection: new OpenLayers.Projection("EPSG:4326"),
     maxResolution: 'auto',
     units: 'meters',
     maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
    });
// ここまで
// 東京都区画レイヤ
    layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_bmi_pgis_img.map',
      layers: 'height',
      format: 'image/png'
     });
    layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
     map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map', 
     layers: 'kukaku',
     transparent: true,
     format: 'image/png'
    });

    vectors = new OpenLayers.Layer.Vector("Vector Layer");
    map.addLayers([layer1, layer2, vectors]);
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
    map.addControl(new OpenLayers.Control.LayerSwitcher()); // 追加
    map.addControl(new OpenLayers.Control.ScaleLine());     // 追加

// 描画されたフィーチャが選択されたときの動作


    var options = {
     hover: true,
     onSelect: serialize
    };
    var select = new OpenLayers.Control.SelectFeature(vectors, options);
    map.addControl(select);
    select.activate();

    updateFormats();

    map.zoomToMaxExtent();
   } End of function init()

// データを出力するときの動作


   function serialize(feature) {
    var type = document.getElementById("formatType").value;
//  second argument for pretty printing (geojson only)
    var pretty = document.getElementById("prettyPrint").checked;
    var str = formats['out'][type].write(feature, pretty);
//  not a good idea in general, just for this demo
    str = str.replace(/,/g, ', ');
    document.getElementById('output').value = str;
   }

// データを入力したときの動作


   function deserialize() {
    var element = document.getElementById('text');
    var type = document.getElementById("formatType").value;
    var features = formats['in'][type].read(element.value);
    var bounds;
    if(features) {
     if(features.constructor != Array) {
      features = [features];
     }
     for(var i=0; i<features.length; ++i) {
      if (!bounds) {
       bounds = features[i].geometry.getBounds();
      } else {
      bounds.extend(features[i].geometry.getBounds());
      }
     }
     vectors.addFeatures(features);
     map.zoomToExtent(bounds);
     var plural = (features.length > 1) ? 's' : '';
     element.value = features.length + ' feature' + plural + ' added'
    } else {
     element.value = 'Bad input ' + type;
    }
   }

// preload images


   (function() {
    var roots = ["draw_point", "draw_line", "draw_polygon", "pan"];
    var onImages = [];
    var offImages = [];
    for(var i=0; i<roots.length; ++i) {
     onImages[i] = new Image();
     onImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
     offImages[i] = new Image();
     offImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
    }
   })();

  </script>
 </head>


 <body onload="init()">
  <div id="leftcol">
   <h1 id="title">Vector Formats Example</h1>
   <div id="tags"></div>
   <p id="shortdesc">
    Shows the wide variety of vector formats that open layers supports.
   </p>
   <div id="map" class="smallmap"></div>
   <div id="input">
    <p>Use the drop-down below to select the input/output format
    for vector features.  New features can be added by using the drawing
    tools above or by pasting their text representation below.</p>
    <label for="formatType">Format</label>
    <select name="formatType" id="formatType">
     <option value="geojson" selected="selected">GeoJSON</option>
     <option value="kml">KML</option>
     <option value="georss">GeoRSS</option>
     <option value="gml2">GML (v2)</option>
     <option value="gml3">GML (v3)</option>
     <option value="wkt">Well-Known Text (WKT)</option>
    </select>
     
    <label for="prettyPrint">Pretty print</label>
    <input id="prettyPrint" type="checkbox" name="prettyPrint" value="1" /><br />
    Input Projection: <select id="inproj" onchange='updateFormats()'>
     <option value="EPSG:4326" selected="selected">EPSG:4326</option>
     <!-- "EPSG:2456" に修正 -->
     <option value="EPSG:2456">EPSG:2456</option>
    </select><br />
    Output Projection: <select id="outproj" onchange='updateFormats()'>
     <option value="EPSG:4326" selected="selected">EPSG:4326</option>
     <!-- "EPSG:2456" に修正 -->
     <option value="EPSG:2456">EPSG:2456</option>
    </select><br />
    <textarea id="text">paste text here...</textarea><br />
    <input type="button" value="add feature" onclick="deserialize();" />
   </div>
   <div id="docs"></div>
  </div>
  <div id="info">
   <p>Use the tools to the left to draw new polygons, lines, and points.
   After drawing some new features, hover over a feature to see the
   serialized version below.</p>
   <textarea id="output"></textarea>
  </div>
 </body>
</html>

EPSG:2456 GeoJSON で出力

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ

自己紹介

2009年12月6日日曜日

OpenLayers 39 Vector Formats - ベクトル図の各種フォーマットでのデータの入出力

0 件のコメント:

Debianでka-Mapのメモ プラスOpenLayers とGeoExt

ブログ アーカイブ