図形編集処理イベント通信による図形編集

本論文では，クライアントからの図形編集処理イベント通信により，ブラウザのベクト ル描画機能を利用せずにサーバサイドレンダリングを用いることで図形編集を実現する．

図 3-6に図形編集フロー概要を示す．

クライアントでは編集対象図形を選択するため，(1)レイヤ，座標値などからなる図形検 索条件をサーバに送信する．サーバでは，(2)検索条件を元に編集対象図形検索を行い，(3) 当該図形情報をクライアントに返信する．クライアントでは，(4)編集対象図形情報取得後，

編集処理を開始する．編集が開始されると，(5)サーバにて編集対象図形の画像化が行われ クライアントに送信される．クライアントでは，(6)この画像化された図形，及び(4)で取得 した編集対象図形情報を元に編集を行う．図 3-7 に示すように，編集対象図形を選択し，

その頂点をマウスカーソルに追随させて移動できる．また頂点を指定すると，頂点座標編 集メニューから，頂点追加，削除などを行える．色や線種などの描画情報は，描画属性編 集メニューで操作する．クライアントでは，図形に対して編集を施す度にサーバに編集後 図形情報を送信し，サーバで生成された画像を再度表示することで編集結果を確認するこ とができる．この処理は，図形編集が確定するまで繰り返される．(7)編集確定後，サーバ に通知し，(8)当該図形情報を更新することで図形編集が終了する．なお新規に図形を作成 する場合は，検索処理が不要のため，(4)から開始する．

26

図 3-6 図形編集処理フロー

図 3-7 図形編集画面例

サーバサイドレンダリングにより図形編集を行うには，サーバ，クライアント間で共通 的に認識できるプロトコルが必要である．提案法では，表 3-1 に示すような図形の色・形 状・大きさなどに関する情報をクライアントからサーバに通知することで図形編集を実現 する．また，図 3-8にHTTP通信のGETメソッドを使った図形編集イベントプロトコル の例を示す．このイベント通信は，クライアントで座標移動，線色変更などの図形編集操 作を行う毎に，クライアントで図形編集処理イベントプロトコルに基づきイベント情報を 作成し，サーバに通知することで行われる．本プロトコルは，図形編集時に座標全てをサ ーバに送信するのではなく，編集対象図形の中の対象座標ID及びその座標値のみを扱うこ とで通信コストの低減を図っている．

座標編集メニュー 頂点

編集対象地物

編集対象外の地物

(半透明の中間レイヤで見えにくくする)

図形描画属性メニュー

27

表 3-1 図形編集プロトコル

Key 項目 概要

cid Client識別ID クライアントを識別

oid 編集地物ID 編集対象地物を識別

op

操作ID 編集操作を識別

(e.g. 点座標追加,その他の操作につい

ては図 3-7を参照)

t 編集地物の座標ID 地物を構成する座標を識別

v “t”の座標 編集地物の座標IDに対する座標値

i 編集地物情報 編集地物の属性情報 lc 線色 線色 (e.g. blue, black) fc 面色 面色 (e.g. gray, white) w 線幅 線幅 (e.g. 2point)

ls 線スタイル 線スタイル (e.g. dotted line) fs 面スタイル 面スタイル (e.g. fill)

s 縮尺 縮尺 (e.g. 1/10000)

ex その他情報 アプリケーション特有の情報など

図 3-8 図形編集プロトコル例

図 3-9 に図形編集のアーキテクチャを示す．最下層に地図表示層があり，その上部に中

間層が入る．この中間層は，図 3-7 に示すように編集対象図形の視認性を高めるために，

http://localhost? (Server URL)

cid=1946136682 (“1946136682” is client ID.)

&oid=0 (“0” is Object ID.)

&op=M (“M” is “Move．”A” is Add, “R” is Remove.)

&t=n4[-1132,1340.5] (Order of target and its coordinate)

&v=n4[-1151.5,1296.5] (Order of target and operated coordinate)

&i=-1235,1296.5,103,121 (“-1235,1296.5” is upper left coordinate of bounding rectangle, “103” is image width,

“121” is image height.)

&lc=255,143,0 (RGB of line color)

&fc=0,255,255 (RGB of face color)

&w=3 (“3” is line width.)

&ls=0 (“0” is solid line.)

&fs=2 (“2” is fill.)

&s=0.5 (0.5 indicate meter per pixel. ) [ Examples of editing protocol ]

before after

moving a vertex n0

n1

n2 n3

n4 n0

n1 n2

n3 n4’

send data exlpanations

n : order of vertex

28

編集対象以外の図形を半透過させ，下層の地図表示を暈かす役割を果たす．最上部には，

図形編集層が位置し，サーバサイドレンダリングで描画された編集対象図形のイメージが 配置される．

図 3-9 図形編集アーキテクチャ