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

高木様

インディゴ松澤です。
いくつか思い当たる手段を挙げてみます。


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 Wednesday, 4 August 2010 03:10:33 UTC