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

松澤さま

高木です。返信が遅くなりましたが、コメントありがとうございます。
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 Thursday, 19 August 2010 04:21:36 UTC