Daily Archives: 05/26/2013

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は(私の英語力がバレテしまう。。。)、

[javascript]
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": "完了"
});
[/javascript]

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

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

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

[html]
<!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>

[/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!!

1 / 11

Social Widgets powered by AB-WebLog.com.