SDJ Mapserver Solutions
第4回 Nez 初心者講座
この説明はWindows版を使用しています。今回の講座では地図上で距離、面積の計測する為の実装方法を解説致します。
-
距離／面積計測を行うには
- 計測機能を使用する為に必要となるJacascriptファイルをインクルードします。
- 計測機能オブジェクトを定義します。
- 距離計測、面積計測を使用する為のボタンを作成します。 「NezMap」オブジェクトの「setTool」関数にてマウス左ボタンの機能に計測機能を割り当てます。
- 距離、面積の計測結果を取得するには、計測終了イベントを実装します。
<script language="JavaScript" src="../../javascript/Geometry.js"></script>
<script language="JavaScript" src="../../javascript/GeometryRegister.js"></script>
<script language="JavaScript" src="../../javascript/GeometryKeisoku.js"></script>
「GeometryKeisoku」オブジェクトを作成します。
第1パラメータ：NezMapオブジェクトを指定します。
第2パラメータ：
距離計測を行う場合、定数「GeometryKeisoku.prototype.DIST_CALC」を指定
面積計測を行う場合、定数「GeometryKeisoku.prototype.DIST_AREA」を指定
第3パラメータ：
計測結果を地図上に表示する場合、「true」を指定
計測結果を地図上に表示しない場合、「false」を指定
//距離計測オブジェクトを格納する変数の定義
var gDistKeisoku;
//面積計測オブジェクトを格納する変数の定義
var gAreaKeisoku;
//メイン地図の初期処理を行った後実行する処理を記述します。
gNezMap.onInitialize = function(){
//距離計測を行う為のオブジェクトを作成します。
gDistKeisoku = new GeometryKeisoku(gNezMap,GeometryKeisoku.prototype.DIST_CALC,true);
//面積計測を行う為のオブジェクトを作成します。
gAreaKeisoku = new GeometryKeisoku(gNezMap,GeometryKeisoku.prototype.DIST_AREA,true);
}
<!--距離計測を行います-->
<BUTTON alt="距離計測" onclick="gNezMap.setTool(gDistKeisoku);">距離計測</BUTTON>
<!--面積計測を行います-->
<BUTTON alt="面積計測" onclick="gNezMap.setTool(gAreaKeisoku);">面積計測</BUTTON>
//距離計測確定直後発生するイベントです。
gDistKeisoku.onComplete = function(){
//距離を表示します。
alert(gDistKeisoku.measuredValue);
}
//面積計測確定直後発生するイベントです。
gAreaKeisoku.onComplete = function(){
//面積を表示します。
alert(gAreaKeisoku.measuredValue);
}
★今回の講座の全ての機能を含んだサンプルを以下に示します。
下記サンプルはこちらからダウンロード出来ます。圧縮ファイル内のファイルをC:¥ms4w¥apps¥nez¥htdocs¥html¥sdjdemoに保存して実行して下さい。
<html>
<head>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
<title>拡大 縮小 スクロール サンプル</title>
<!--↓↓↓この範囲の宣言は地図表示に必要です-->
<!--[if IE]>
<script type="text/javascript" src="../../javascript/excanvas.js"></script>
<![endif]-->
<script language="JavaScript" src="../../kamap/xhr.js"></script>
<script language="JavaScript" src="../../kamap/kaMap.js"></script>
<script language="JavaScript" src="../../kamap/kaTool.js"></script>
<script language="JavaScript" src="../../javascript/Inheritance.js"></script>
<script language="JavaScript" src="../../javascript/Utility.js"></script>
<script language="JavaScript" src="../../javascript/NezMap.js"></script>
<script language="JavaScript" src="../../javascript/NezKaMap.js"></script>
<!--↑↑↑この範囲の宣言は地図表示に必要です-->
<script language="JavaScript" src="../../javascript/NezNavi.js"></script>
<script language="JavaScript" src="../../javascript/Geometry.js"></script>
<script language="JavaScript" src="../../javascript/GeometryRegister.js"></script>
<script language="JavaScript" src="../../javascript/GeometryKeisoku.js"></script>
<script language="JavaScript">
//メイン地図オブジェクトの宣言です
var gNezMap;
//距離計測オブジェクトを格納する変数の定義
var gDistKeisoku;
//面積計測オブジェクトを格納する変数の定義
var gAreaKeisoku;
//onload後に行う処理を記述します
function onInitialize() {
//メイン地図表示用のDivオブジェクトを取得しています
var mapDiv = document.getElementById('nez_map');
//URLの最終サブディレクトリ名を取得しています
//placeは任意の値を使用することも可能ですがC:\ms4w\apps\nez\include\sdjdemo\config.phpファイル
//(下線の部分)の参照先として利用されます
var url = location.href;
var url2 = url.substring(0, url.lastIndexOf('/'));
var place = url2.substring(url2.lastIndexOf('/') + 1, url2.length);
//メイン地図オブジェクトを生成します
//第1パラメータはメイン地図表示用のDivオブジェクトを指定します
//第2パラメータはconfig.phpファイルの参照先(http)を指定します
//第3パラメータはブラウザのアドレス入力欄に座標位置と縮尺を表示するか指定します(未指定時はfalse)
gNezMap = new NezKaMap(mapDiv, place, true);
//メイン地図の初期処理を行った後実行する処理を記述します。
gNezMap.onInitialize = function(){
//距離計測を行う為のオブジェクトを作成します。
gDistKeisoku = new GeometryKeisoku(gNezMap,GeometryKeisoku.prototype.DIST_CALC,true);
//面積計測を行う為のオブジェクトを作成します。
gAreaKeisoku = new GeometryKeisoku(gNezMap,GeometryKeisoku.prototype.DIST_AREA,true);
//距離計測確定直後発生するイベントです。
gDistKeisoku.onComplete = function(){
//距離を表示します。
alert(gDistKeisoku.measuredValue);
}
//面積計測確定直後発生するイベントです。
gAreaKeisoku.onComplete = function(){
//面積を表示します。
alert(gAreaKeisoku.measuredValue);
}
}
//メイン地図初期処理を行います
//上記のメイン地図オブジェクトを生成してから実行します
//この処理を行わないと地図が表示されません
gNezMap.initialize();
}
</script>
</head>
<!--style定義のwidth、height、margin、padding、overflowは変更出来ません-->
<!--パンスクロール時にアイコン等が選択状態になってしまうのを防止するためです-->
<!--style定義のbackground-colorは変更可能です-->
<body style="width:100%;height:100%;margin:0px;padding:0px;
overflow:hidden;background-color:#dddddd;" onload="onInitialize();">
<!--メイン地図表示用のＤＩＶタグです-->
<!--style定義のpositionは変更出来ません-->
<!--style定義のleft、top、width、heightを変更すると地図の表示位置、表示サイズが変更出来ます-->
<div id="nez_map" style="position:absolute;left:5px;top:35px;width:400px;height:400px;"></div>
<!--機能ツールバー表示用のＤＩＶタグです-->
<div id="toolbar" style="position:absolute;left:5px;top:5px;height:35px;">
<!--地図の広域表示(縮小)を行います、gNezMap.zoomOut()を実行すると即処理されます-->
<img src="../../kamap/images/icon_set_nomad/tool_zoomout_1.png" alt="縮小"
onclick="gNezMap.zoomOut();"></img>
<!--地図の詳細表示(拡大)を行います、gNezMap.zoomIn()を実行すると即処理されます-->
<img src="../../kamap/images/icon_set_nomad/tool_zoomin_1.png" alt="拡大"
onclick="gNezMap.zoomIn();"></img>
<!--地図の全域表示を行います、gNezMap.zoomToDefault()を実行すると即処理されます-->
<img src="../../kamap/images/icon_set_nomad/tool_zoomfull_1.png" alt="全域表示"
onclick="gNezMap.zoomToDefault();"></img>
<!--距離計測を行います-->
<BUTTON alt="距離計測" onclick="gNezMap.setTool(gDistKeisoku);">距離計測</BUTTON>
<!--面積計測を行います-->
<BUTTON alt="面積計測" onclick="gNezMap.setTool(gAreaKeisoku);">面積計測</BUTTON>
</div>
</body>
</html>
実行するとこのような画面が表示されるはずです。
次回は距離、面積の計測機能を解説します。
[上へ]