Re: SVG Tiling and Layering (SVG Map) デモサイト　立ち上げ

SVG IG Japanのみなさま　高木です。

ビットイメージのデータをSVG Mapとして利用したデモページを追加しました。

http://www.gissoken.org/svg/maps/tech_kddi/
の
Demo４〜６が相当します。

とりあえず、Open Street Mapを使ってみましたが、Container SVGデータさえ作れば
WMSのサーバや電子国土のデータを利用することもできると思います。


<201008191320.ECE14317.tLBBTJUBH@kddi.com> の、
   "Re: SVG Tiling and Layering (SVG Map)     デモサイト　立ち上げ" において、
   "Satoru Takagi <sa-takagi@kddi.com>"さんは書きました：

> 松澤さま
> 
> 高木です。返信が遅くなりましたが、コメントありがとうございます。
> 1. SVGSVGElement.suspendRedraw
> は簡単にですが試してみました。
> ajaxでデータを読み込んでいる最中には効いているような感じがしますが、これでは
> 地図をスクロールさせようとすると、Redrawが走ってしまうようです。
> 表現が難しいですが、スクロールはドラッグでドラッグ中にも画面イメージがリアルタイムに追従して
> 動いていくような振る舞いをさせたいと思っています。
> ＃伸縮も同じようにピンチなどの操作でイメージがリアルタイムに追従させたい
> 
> ドラッグ中にも画面イメージがリアルタイムに追従させる
> 方法としては、公開しているAJAXの方法(transformを変更)以外に
> SVG Mapコンテンツをxhtmlコンテンツ内の<p>要素などに内包させるようにして、
> その要素に <p style="position:absolute;top..;left...">
> のように設定し　style.top,leftを変更するような操作をしてみました。
> いずれでも値を変更した途端にRedrawされてしまうようです。(当たり前といえば当たり前ですが・・)
> 組み方がまずいのでしょうか・・
> 
> <4C58DA03.2030909@indigo.co.jp> の、
>    "Re: SVG Tiling and Layering (SVG Map)   デモサイト　立ち上げ" において、
>    "Yuzo Matsuzawa <yuzo@indigo.co.jp>"さんは書きました：
> 
> > 高木様
> > 
> > インディゴ松澤です。
> > いくつか思い当たる手段を挙げてみます。
> > 
> > 
> > 1. SVGSVGElement.suspendRedraw
> > 
> > DOM に対して変更を行う前に
> > > document.documentElement.suspendRedraw(n)
> > で描画を停止、更新処理が終わったのちに
> > > document.documentElement.unsuspendRedraw(handle)
> > で描画させるようにすると、一応の描画タイミング制御ができます。
> > これが SVG 仕様上は正攻法かと思います。
> > 
> > # Firefox では分かりやすく効果があります。
> >   ただ、Chrome では未実装、Opera は実装されているものの、
> >   かえって描画タイミングが不安定になるなどの挙動があるので
> >   自分で何か作るときにはオーバーライドやラッパーを書くことが多いです
> >  
> > 
> > 2.setTransform → transform.baseVal.getItem(0).setMatrix(m)
> > 
> > これは本質的ではないですが、 zoompan 関数中、
> > > maproot.setAttribute("transform" , "matrix(" + scale + ",0,0," + scale + "," + tx + "," + ty +")");
> > としている部分を
> > > maproot.transform.baseVal.getItem(0).setMatrix(m)
> > などとしたほうが、単純にパースと再初期化等のコストは削減できそうです。
> > この手の最適化ができる部分はいくつかあるように思います。
> > 
> > 
> > 
> > 3. getMapViewport() の選択的コール
> > 
> > 現在の実装ですと、 zoompan 関数をコールした場合に、
> > 強制的に getMapViewport 関数が実行されているようです。
> > これがマウスのドラッグ中の mousemove イベント発行のたびに実行されると、
> > 上述の再描画コスト以上に処理を圧迫するように思います。
> > 
> > mousemove イベント由来のビューポート変更の場合には、
> > getMapViewport の呼び出しを省略するようにする、
> > あるいはそもそも mouseup イベントの際に getMapViewport をコールする、
> > などの方法で相応の改善が見込まれるように思います。
> > 
> > # さらに言えば、zoompan 関数の内部で setTimeout 関数で
> >   getMapViewport を遅延実行するようにするなどして
> >   getMapViewport の評価回数を最小化するテクニックもあります
> > 
> > 
> > 現在公開されているデモコンテンツですと、
> > DOM の全体サイズが膨張するのでなかなか厳しいかと思いますが、
> > 過去の経験からしますと 1Mbytes 以下程度の SVG ファイルであれば、
> > 上記のような方法でドラッグやホイールへの追従は可能です。
> > 
> > 以上、ご参考までに。
> > 
> > 
> > 
> > (2010/08/04 11:05), Satoru Takagi wrote:
> > > 高木です。
> > > 
> > > このAJAXですが、課題としては、重いという感想を一番多くいただいています。
> > > 
> > > データが大きく、しかもDOMを酷使するので重いのかな？
> > > と最初は思っていたのですが、どうもそれだけとは言えないようです。
> > > 
> > > 重いと感じる一番大きい点として、
> > > 　スクロールや伸縮をドラッグ・ピンチなどの直感的な操作で行えない
> > > というものがあると思っています。
> > > 
> > > 実は、ドラッグを実装しようと試みはしたのですが、
> > > ドラッグ操作に追いつけるような高速なSVGの再描画はどのブラウザでも不可能で、
> > > 実現は難しいことがわかりました。
> > > 
> > > ＃今の実装でも、マウスをクリックしたまま移動させてリリースすると、
> > > ＃その移動量分表示エリアが移動はしますが・・・・
> > > 
> > > 次善策として、SVGの再描画はさせず、画面のビットイメージのままシフトさせる
> > > 処理が可能な方法が無いか調べてみたのですが、方法が見つかっていません。
> > > 
> > > XHTMLの<p>要素の下にSVGを埋め込み、その要素にstyle="position:absolute;top:nnnpx;left:nnnpx"
> > > 等と設定し、top,left値を操作するようなことを試みましたがやはりSVGの再描画はどのブラウザでも起きてしまうようです。
> > > 
> > > CANVASにgetImageData()やdrawImage()があるのでこれも試してみましたが描画済みのSVGのイメージを取り込むことができないようです。
> > > 
> > > 恐らくFirefoxに独自実装されていて、さらに利用制限があるdrawWindow()ぐらいしかできないのではないかと思われます。
> > > 
> > > 何か良い解決方法をご存知ないでしょうか？
> > > 
> > > ＃また、Operaで動かないという点に関してはもう少し根深い課題が・・・　これはまた後ほど
> > > 
> > > <201006211930.CJI10552.BLTJUBtBH@kddi.com>  の、
> > >     "SVG Tiling and Layering (SVG Map) デモサイト　立ち上げ" において、
> > >     "Satoru Takagi<sa-takagi@kddi.com>"さんは書きました：
> > > 
> > >> SVG IG Japanの皆様
> > >>
> > >> 高木です。
> > >>
> > >> これまで検討を続けてきました、SVGを使った地図プラットホームの規格
> > >> SVG Tiling and LayeringのエッセンスをAJAXでデモするためのソフトを作ってみました。
> > >>
> > >> 動作環境は、　Chrome, Firefox, Safari　です。
> > >> ＃残念ながら、Operaでは動きません・・・
> > >>
> > >> NPO GIS総研様に協力いただき、以下にサイトを用意しましたのでお試しください。
> > >>
> > >> http://www.gissoken.org/svg/maps/tech_kddi/
> > >>
> > >> 本来はブラウザにネイティブ実装されないと性能が出ませんし、
> > >> ドメインをまたがったマッシュアップもできないのですが、
> > >> 性能に関しては　最近のブラウザでは結構　動いてしまうようです。
> > >>
> > >> また、プリンタで印刷すると高解像度で印刷できますね（Firefoxで確認）
> > >>
> > >>
> > > 
> > > 
> > > 
> > > 
> > > 
> > > 
> > 
> > -- 
> > Yuzo Matsuzawa <yuzo@indigo.co.jp>
> > 
> > 
> > 
> > 
> > 
> 
>

Received on Tuesday, 31 August 2010 09:58:27 UTC