OpenLayers Editor(ole)をちょこっと試してみた。part2

OpenLayers Editorの日本語表示

前回のOpenLayers Editor(ole)をちょこっと試してみた。part1のoleを日本語表示化してみました。

元のoleはOpenLayers Editorにdemoがあります。

まずは環境作り

ここから、まずは入手してください。

入手後、適当な場所で解凍します。
blog.godo-tys.jp_wp-content_gallery_ole_image01.jpg

な感じで、フォルダー構成ができあがります。

次に、必要な環境をAptana Studio 3へコピーします。
blog.godo-tys.jp_wp-content_gallery_ole_image04.jpg

な感じのfolder構成になっています。

example folderの中のeditor.htmlを実行しても、動きませんよ。
javascriptとcssの参照先を変更する必要があります。

今回使うfileは、editor.htmlです。
変更するところは、

<script src="http://localhost/openlayers/OpenLayers.js"></script>
<script type="text/javascript" src="lib/Editor/Lang/ja.js"></script>
<!-- <script type="text/javascript" src="../lib/Editor/Lang/en.js"></script> -->
<script type="text/javascript" src="lib/loader.js"></script>
<link rel="stylesheet" href="theme/geosilk/geosilk.css" type="text/css" />

です。元のcodeと見比べください。
また、ja.jsが日本語のjsを定義しているjavascriptになります。
今回はこれを作成しました。

ja.jsの作成

この、OpenLayer Editorはlanguage scriptを用意すれば、簡単に言語を変更することができます。
まずは、lib/Editor/Lang/ja.jsはen.jsのコピーから作成します。
保存時は、utf-8で必ず保存すように。 文字化けしますよ。

では、ja.jsは(私の英語力がバレテしまう。。。)、

OpenLayers.Lang.ja = OpenLayers.Util.extend(OpenLayers.Lang.ja, {
	"oleCleanFeature": "選択したジオメトリを消去する",
	"oleDeleteFeature": "選択したジオメトリを削除する",
	"oleDeleteAllFeatures": "すべてのジオメトリを削除する",
	"oleDownloadFeature": "ジオメトリのダウンロードする",
	"oleDownloadFeatureEmpty": "ダウンロードするジオメトリがありません。",
	"oleDownloadFeatureFileFormat": "ファイルフォーマットの選択",
	"oleUploadFeature": "ローカルファイルからジオメトリのアップロードする",
	"oleUploadFeatureNoFile": "ファイルがありません。再度ファイルを選択してください。",
	"oleUploadFeatureNone": "ファイルにジオメトリがないか?もしくは読み込めません。",
	"oleDragFeature": "ジオメトリを移動する",
	"oleDrawHole": "ポリゴンのホールを抜く",
	"oleDrawPolygon": "ポリゴンを描画する",
	"oleDrawPath": "ラインを描画する",
	"oleDrawPoint": "ポイントを描画する",
	"oleDrawText": "テキストを描画する",
	"oleDrawTextEdit": "ボックスにラベルを追加,<br>エンターキーを押すかポップアップを閉じる。",
	"oleDrawRegular": "規則的なポリゴンを描画する",
	"oleDrawRegularShape": "図形",
	"oleDrawRegularIrregular": "不規則形状",
	"oleDrawRegularSides3": "三角形",
	"oleDrawRegularSides4": "四角形",
	"oleDrawRegularSides5": "五角形",
	"oleDrawRegularSides6": "六角形",
	"oleDrawRegularCircle": "円",
	"oleImportFeature": "選択したポリゴンをインポートする",
	"oleImportFeatureSourceLayer": "ソース・レイヤが見つかりません。",
	"oleImportFeatureSourceFeature": "最初にジオメトリを選択してください。",
	"oleLayerSettingsImportHeader": "インポート",
	"oleLayerSettingsImportLabel": "ソース・レイヤを使う。",
	"oleLayerSettingsLegendHeader": "凡例",
	"oleLayerSettingsOpacityHeader": "透過率 (%)",
	"oleMergeFeature": "選択したジオメトリを統合する",
	"oleMergeFeatureSelectFeature": "少なくとも2つのジオメトリを選択してください。",
	"oleModifyFeature": "ジオメトリを修正する",
	"oleNavigation": "ナビゲーション",
    "olePixelUnit": "px",
	"oleSelectFeature": "ジオメトリを選択する",
	"oleSnappingSettings": "スナッピングを設定する",
	"oleSnappingSettingsLayer": "スナッピング レイヤ",
	"oleSnappingSettingsTolerance": "スナッピングの 許容誤差",
	"oleSplitFeature": "選択したジオメトリを分割する",
	"oleTransformFeature": "ジオメトリのスケール、回転、移動をする",
	"oleCADTools": "CADツール",
	"oleCADToolsDialogParallelDrawing": "平行線を描画する",
	"oleCADToolsDialogGuidedDrawing": "補助線を描画する",
	"oleCADToolsDialogShowLayer": "補助線を表示する",
	"oleCADToolsDialogTolerance": "px 許容誤差",
	"oleDialogCancelButton": "キャンセル",
	"oleDialogSaveButton": "保存",
	"oleDialogOkButton": "完了"
});

geometryは幾何形状や幾何属性なんて言葉になるのですが、要はpoint,line polyponなどの図形を指し示すものと考えてください。

「おかしいぞ、変だぞ」と思った方、自力で修正してね。

次に、editor.htmlを編集します。
OpenStreetMapで神奈川県を表示するように修正します。

<!DOCTYPE html>
<html lang='ja'>
	<head>
		<meta charset='utf-8' />
		<title>OpenLayers.Editor</title>

		<script src="http://localhost/openlayers/OpenLayers.js"></script>
		<script type="text/javascript" src="lib/Editor/Lang/ja.js"></script>
		<!-- <script type="text/javascript" src="../lib/Editor/Lang/en.js"></script> -->
		<script type="text/javascript" src="lib/loader.js"></script>
		<link rel="stylesheet" href="theme/geosilk/geosilk.css" type="text/css" />
		<style type="text/css">
			/* Make map consume all available space */
			html, body, #map {
				height: 100%;
				margin: 0;
			}
		</style>
		<script type="text/javascript">
			function init() {

				// 座標系の設定
				var epsg4326 = new OpenLayers.Projection("EPSG:4326");
				var epsg3857 = new OpenLayers.Projection("EPSG:3857");

				var map, editor;
				OpenLayers.Lang.setCode('ja');

				map = new OpenLayers.Map('map');
				map.addLayer(new OpenLayers.Layer.OSM());
				
				map.displayProjection = epsg4326;

				// controlの設定
				map.addControl(new OpenLayers.Control.ScaleLine());
				map.addControl(new OpenLayers.Control.LayerSwitcher());
				map.addControl(new OpenLayers.Control.MousePosition());
				map.addControl(new OpenLayers.Control.OverviewMap());

				// 表示の中心座標
				map.setCenter(new OpenLayers.LonLat(139.5, 35.5).transform(epsg4326, epsg3857), 10);

				editor = new OpenLayers.Editor(map, {
					activeControls : ['Navigation', 'SnappingSettings', 'CADTools', 'TransformFeature', 'Separator', 
					'DeleteFeature', 'DragFeature', 'SelectFeature', 'Separator', 
					'DrawHole', 'ModifyFeature'],
					featureTypes : ['regular', 'polygon', 'path', 'point']
				});
				editor.startEditMode();
			}
		</script>
	</head>
	<body onload="init()">
		<div id="map"></div>
	</body>
</html>

お決まりのepsg4326とepsg3857で、座標系を修正しておきます。

修正確認

まずは、実行すると
blog.godo-tys.jp_wp-content_gallery_ole_image05.jpg

な感じで表示されます。

mapのtopにeditor iconが並んでいます。
日本語が表示されるかは、編集iconにmouse overでtooltipsが出てきますので、確認できます。
blog.godo-tys.jp_wp-content_gallery_ole_image06.jpg

blog.godo-tys.jp_wp-content_gallery_ole_image07.jpg

な感じで表示されます。
とりあえずは日本語化はOKでしょう。

もうちょっと中身を覗いてみる。

OpenLayers Editor(ole)を呼び出す部分は、

editor = new OpenLayers.Editor(map, {
	activeControls : ['Navigation', 'SnappingSettings', 'CADTools', 'TransformFeature', 'Separator',
	'DeleteFeature', 'DragFeature', 'SelectFeature', 'Separator',
	'DrawHole', 'ModifyFeature', 'Separator', 'MergeFeature'],
	featureTypes : ['text', 'regular', 'polygon', 'path', 'point']
});
editor.startEditMode();

です。editor objectをインスタンスしてstartEditMode()で編集を開始しています。
このactiveControlsfeatureTypesにobjectを追加すれば、他の機能も使えます。
また、仕様に従えば自作することもできます。

どのようなeditor objectが使えるかは、Editor.js
Line[79]-Line[90]の

    /**
     * Property: editorControls
     * {Array} Contains names of all available editor controls. In particular
     *   this information is needed by this EditorPanel.
     */
    editorControls: ['CleanFeature', 'DeleteFeature', 'DeleteAllFeatures', 'Dialog', 'DrawHole', 'DrawRegular',
        'DrawPolygon', 'DrawPath', 'DrawPoint', 'DrawText', 'EditorPanel', 'ImportFeature',
        'MergeFeature', 'SnappingSettings', 'SplitFeature', 'CADTools',
        'TransformFeature'],
 
    /**
     * Geometry types available for editing
     * {Array}
     */
    featureTypes: ['text', 'point', 'path', 'polygon', 'regular'],

を参考にしてください。

また、editorの機能は、lib/Editor/Control/にclassが定義されています。このContol内のjavascriptのファイル名をeditorControlsに追加します。
defaultでは、
blog.godo-tys.jp_wp-content_gallery_ole_image09.jpg

などが定義されています。
そして、自作したeitor object classもこのControl内に置いておきます。

ちょっと、Draw textを加えた例ですが、
blog.godo-tys.jp_wp-content_gallery_ole_image08.jpg

な感じでtext入力画面が表示されます。

こちらに、editorのサンプルを置いておきますので、参考にしてみてください。

いろいろ使い方を勉強するには、非常に良いexampleになるようです。
みなさんで、Let's try!!

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

WP-SpamFree by Pole Position Marketing

Social Widgets powered by AB-WebLog.com.