- From: Satoru Takagi <sa-takagi@kddi.com>
- Date: Tue, 31 Aug 2010 18:57:47 +0900
- To: public-svg-ig-jp@w3.org
SVG IG Japanのみなさま 高木です。 ビットイメージのデータをSVG Mapとして利用したデモページを追加しました。 http://www.gissoken.org/svg/maps/tech_kddi/ の Demo4〜6が相当します。 とりあえず、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