読者です 読者をやめる 読者になる 読者になる

もなかアイスの試食品

「とりあえずやってみたい」そんな気持ちが先走りすぎて挫折が多い私のメモ書きみたいなものです.

OpenLayers(2.13.1)のOpenStreetMapがIE11で遅い件

Javascript OpenLayers

OpenLayersの便利さ・IFのわかりやすさに感動しているもなかアイスです。

OpenLayers(2.13.1)でアプリをGoogleChromeで作っていて、たまたまIE11で動作確認してみると

すごく遅い・・・

どれぐらい遅いかは計測してなかったけど、同時に使っていたAngularJSの処理が止まるぐらい

JavaScriptはシングルスレッドだからだろうか・・・AngularJSの処理が止まった時は焦った

GoogleChromeFireFoxでは動作に差は感じない。

IE11の動作をよくよく見ていると、地図タイルのダウンロードにやけに時間が掛かっている。

Fiddlerを起動してF5で更新をかけるとIE11はタイルの再ダウンロードをしている。

(・_・;)あれ?キャッシュ使わないの?使わなくて大丈夫なの?

GoogleChromeの場合、初回は地図タイルのダウンロードをやっているが、 F5で更新させると再ダウンロードせずにキャッシュを使っていた。

IE11のリクエストヘッダが悪いんじゃね?と思ったら案の定「Pragma: no-cache」があったでござる。(Chromeにはない)

ちなみに、OpenStreetMapWikiには「リクエストヘッダに『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.XYZ

ちなみに、OpenLayers.Layer.OSMの親クラス

OpenLayers.Layer.OSM

タイルのURLはOpenStreetMapWikiや、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 が 悪 い っていうやつなんでしょうか?