Debianでka-MapのメモプラスOpenLayers とGeoExt: OpenLayers 31a 距離や面積を計測

OpenLayers Measure Example(measure.html)を参考にラベルの表示をします。

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

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


<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>OpenLayers31 Measure Example</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">
   #controlToggle li {
    list-style: none;
   }
   p {
    width: 512px;
   }
   #options {
    position: relative;
    width: 512px;
   }
   #output {
    float: right;
   }
  </style>

<!-- OpenLayers ライブラリ -->
  <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, measureControls, layer1, layer2;
   OpenLayers.Util.onImageLoadErrorColor = "transparent";
   function init(){
//  map = new OpenLayers.Map('map');
//  東京都用 map の設定
    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'
     });
    map.addLayers([layer1, layer2]);
// ここまで
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.ScaleLine());     // 追加

// style the sketch fancy


    var sketchSymbolizers = {
     "Point": {
      pointRadius: 4,
      graphicName: "square",
      fillColor: "white",
      fillOpacity: 1,
      strokeWidth: 1,
      strokeOpacity: 1,
      strokeColor: "#333333"
     },
     "Line": {
      strokeWidth: 3,
      strokeOpacity: 1,
      strokeColor: "#666666",
      strokeDashstyle: "dash"
     },
     "Polygon": {
      strokeWidth: 2,
      strokeOpacity: 1,
      strokeColor: "#666666",
      fillColor: "white",
      fillOpacity: 0.3
     }
    };

// style に上記 sketchSymbolizers を追加し、styleMap にデフォルトとして定義しています。


    var style = new OpenLayers.Style();
    style.addRules([
     new OpenLayers.Rule({symbolizer: sketchSymbolizers})
    ]);
    var styleMap = new OpenLayers.StyleMap({"default": style});

    measureControls = {
     line: new OpenLayers.Control.Measure( // 測定のためフィーチャの描画を許可
      OpenLayers.Handler.Path, { //地図上にパスを描画するためのハンドラ
       persist: true, //測定が完了した後、一時的な測定スケッチ描画を保持
       handlerOptions: { //コントロールハンドラでデフォルトのプロパティ以外を設定するため使用
       layerOptions: {styleMap: styleMap}
       }
      }
     ),
     polygon: new OpenLayers.Control.Measure(
      OpenLayers.Handler.Polygon, { //地図上にポリゴンを描画するためのハンドラ
       persist: true,
       handlerOptions: {
        layerOptions: {styleMap: styleMap}
       }
      }
     )
    };

    var control;
    for(var key in measureControls) {
     control = measureControls[key];
     control.events.on({ // コントロールイベントが発生したとき
      "measure": handleMeasurements,　//測定スケッチが完了したときにトリガが発生
      "measurepartial": handleMeasurements //新しいポイントが測定スケッチに追加されたときにトリガが発生
//リスナーは、測定、単位、順番、ジオメトリのプロパティのイベントを受信
     });
     map.addControl(control);
    }

//  map.setCenter(new OpenLayers.LonLat(0, 0), 3);
    if (!map.getCenter()) {
     map.zoomToMaxExtent()
    };

    document.getElementById('noneToggle').checked = true;
   } End of function init()


   function handleMeasurements(event) {
    var geometry = event.geometry;
    var units = event.units;
    var order = event.order;
    var measure = event.measure;
    var element = document.getElementById('output');
    var out = "";
    if(order == 1) {
     out += "measure: " + measure.toFixed(3) + " " + units; // 距離の表示
    } else {
    out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>"; // 面積の表示
    }
   element.innerHTML = out;
   }

// measure distance, measure area が選択された場合


   function toggleControl(element) {
    for(key in measureControls) {
     var control = measureControls[key];
     if(element.value == key && element.checked) {
      control.activate();
     } else {
      control.deactivate();
     }
    }
   }
// use geodesic measures がチェックされた場合
   function toggleGeodesic(element) {
    for(key in measureControls) {
     var control = measureControls[key];
     control.geodesic = element.checked;
    }
   }
  </script>
 </head>


 <body onload="init()">
  <h1 id="title">OpenLayers Measure Example</h1>
  <p id="shortdesc">
   Demonstrates the measure control to measure distances and areas.
  </p>
  <div id="map" class="smallmap"></div>
  <div id="options">
   <div id="output"></div>
   <ul id="controlToggle">
    <li>
     <input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked" />
     <label for="noneToggle">navigate</label>
    </li>
    <li>
     <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
     <label for="lineToggle">measure distance</label>
    </li>
    <li>
     <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
     <label for="polygonToggle">measure area</label>
    </li>
    <li>
     <input type="checkbox" name="geodesic" id="geodesicToggle" onclick="toggleGeodesic(this);" />
     <label for="geodesicToggle">use geodesic measures</label>
    </li>
   </ul>
   <p>Note that the geometries drawn are planar geometries and the
    metrics returned by the measure control are planar measures by
    default.  If your map is in a geographic projection or you have the
    appropriate projection definitions to transform your geometries into
    geographic coordinates, you can set the "geodesic" property of the control
    to true to calculate geodesic measures instead of planar measures.</p>
  </div>
 </body>
</html>

説明を訳してみました。

描画されたジオメトリは平面のジオメトリであり、メジャー（測定）コントロールによって返されたメトリックは、デフォルトによって平面測定であることに注意します。もし、あなたのマップが地理的投影であるか、ジオメトリを地理座標に変換するために、適切な投影の定義がある場合、平面の測定の代わりにgeodesic測定を計算するにはコントロールの"geodesic"プロパティをtrueに設定することでできます。

距離の測定

面積の測定

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

ブログアーカイブ

自己紹介

2009年11月23日月曜日

OpenLayers 31a 距離や面積を計測 - Measure Example

0 件のコメント:

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

ブログ アーカイブ