OpenLayers(2.13.1)のOpenStreetMapがIE11で遅い件
OpenLayersの便利さ・IFのわかりやすさに感動しているもなかアイスです。
OpenLayers(2.13.1)でアプリをGoogleChromeで作っていて、たまたまIE11で動作確認してみると
すごく遅い・・・
どれぐらい遅いかは計測してなかったけど、同時に使っていたAngularJSの処理が止まるぐらい
JavaScriptはシングルスレッドだからだろうか・・・AngularJSの処理が止まった時は焦った
GoogleChromeやFireFoxでは動作に差は感じない。
IE11の動作をよくよく見ていると、地図タイルのダウンロードにやけに時間が掛かっている。
Fiddlerを起動してF5で更新をかけるとIE11はタイルの再ダウンロードをしている。
(・_・;)あれ?キャッシュ使わないの?使わなくて大丈夫なの?
GoogleChromeの場合、初回は地図タイルのダウンロードをやっているが、 F5で更新させると再ダウンロードせずにキャッシュを使っていた。
IE11のリクエストヘッダが悪いんじゃね?と思ったら案の定「Pragma: no-cache」があったでござる。(Chromeにはない)
ちなみに、OpenStreetMapのWikiには「リクエストヘッダに『Pragma: no-cache』つけんなよ!絶対よ!」みたいなことが書いてあった。
下記サイトの「Technical Usage Requirements」の項
Tile.openstreetmap.org/Usage policy
OpenLayersさんェ・・・
原因がなんとなくわかったところで、あまりOpenLayersの中身を追いたくない・・・
OpenStreetMapを表示するのに「OpenLayers.Layer.OSM」というクラスを利用していているのだが、この人が悪いのかしら?
代替になるクラスないかなーと思いつつ、IE11+Fiddlerでリクエストヘッダ見ながらOpenLayersをいじっていたら、 とある地図タイルのために使用していたOpenLayers.Layer.XYZクラスが、リクエストヘッダに「Pragma: no-cache」をつけずにサーバと通信していた。
ちなみに、OpenLayers.Layer.OSMの親クラス
タイルのURLはOpenStreetMapのWikiや、OpenLayers.Layer.OSMのドキュメントに載っているので、そのURLでOpenLayers.Layer.XYZを 使ってみた。
ちなみに書き直し前コード
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="openlayers/OpenLayers.debug.js"></script> <script type="text/javascript"> var map; function init() { map = new OpenLayers.Map({ div: "map", projection: new OpenLayers.Projection("EPSG:900913") }); var osm = new OpenLayers.Layer.OSM(); map.addLayers([osm]); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.setCenter( new OpenLayers.LonLat(10.2, 48.9).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 5 ); } </script> <style> #map { width : 1280px; height : 960px; } </style> </head> <body onload="init()"> <div id="map"></div> </body> </html>
↓書き直し↓
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="openlayers/OpenLayers.debug.js"></script> <script type="text/javascript"> var map; function init() { map = new OpenLayers.Map({ div: "map", projection: new OpenLayers.Projection("EPSG:900913") }); var osm = new OpenLayers.Layer.XYZ('OpenStreetMap',[ 'http://a.tile.openstreetmap.org/${z}/${x}/${y}.png', 'http://b.tile.openstreetmap.org/${z}/${x}/${y}.png', 'http://c.tile.openstreetmap.org/${z}/${x}/${y}.png', ]); map.addLayers([osm]); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.setCenter( new OpenLayers.LonLat(10.2, 48.9).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 5 ); } </script> <style> #map { width : 1280px; height : 960px; } </style> </head> <body onload="init()"> <div id="map"></div> </body> </html>
リクエストヘッダに「Pragma: no-cache」が無くなっり、おかげでちょっとだけ描画が早くなった
OpenLayers.Layer.OSM + IEだけ何でこんな現象が出るのだろうか?
い つ も の I E が 悪 い っていうやつなんでしょうか?