OpenLayers Editorの日本語表示
前回のOpenLayers Editor(ole)をちょこっと試してみた。part1のoleを日本語表示化してみました。
元のoleはOpenLayers Editorにdemoがあります。
まずは環境作り
ここから、まずは入手してください。
な感じで、フォルダー構成ができあがります。
次に、必要な環境をAptana Studio 3へコピーします。
な感じの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で、座標系を修正しておきます。
修正確認
な感じで表示されます。
mapのtopにeditor iconが並んでいます。
日本語が表示されるかは、編集iconにmouse overでtooltipsが出てきますので、確認できます。
な感じで表示されます。
とりあえずは日本語化は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()で編集を開始しています。
このactiveControlsとfeatureTypesに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では、
などが定義されています。
そして、自作したeitor object classもこのControl内に置いておきます。
な感じでtext入力画面が表示されます。
こちらに、editorのサンプルを置いておきますので、参考にしてみてください。
いろいろ使い方を勉強するには、非常に良いexampleになるようです。
みなさんで、Let's try!!
Comments are closed.