スタティックイメージレイヤのパフォーマンスに関する問題 - レイヤーを開く3

Question

緯度/経度でデータポイントを受信して​​います。私はOpenLayers 3の静止画像にこれらのすべてをプロットする必要があります。私はOSMなど何も使用していません。私の画像はベクターレイヤー（ポイント）を上にしてベースレイヤーにする必要があります。静的な画像レイヤーを追加し、緯度/経度の四隅に範囲を設定して、その上に自分のフィーチャーをプロットすることによって、それを動作させました。しかし、これはブラウザでは非常にゆっくりと実行され、モバイルでは数秒後にブラウザがクラッシュします。これを行う適切な方法は何ですか？別のレイヤータイプを使用すべきですか？緯度/経度座標をピクセルに変換する必要がありますか？もしそうなら、私はそれをどのように達成するでしょうか？

私は私が必要とする投影に設定したときに、それはモバイル（私のターゲットプラットフォーム）上でクラッシュするように私は、ダウン静止画像層にクラッシュを狭め：

var ovProj = ol.proj.get('EPSG:4326'); 
var myStaticImageLayer = new ol.layer.Image({ 
    source: new ol.source.ImageStatic({ 
     url: '../_images/mallSitePlan.png', 
     imageExtent: [-121.90320739419553, 37.409945396290674, -121.89234011506653, 37.41962634032544], 
     projection: ovProj 
    }) 
}); 

var view = new ol.View({ 
    center: ol.proj.transform([-121.90320739419553, 37.409945396290674], 'EPSG:4326', 'EPSG:3857'), 
    zoom: 18, 
    enableRotation: false 
}); 

var map = new ol.Map({ 
    target: 'map', 
    layers: [myStaticImageLayer], 
    view: view 
}) 

私はこの射影でそれを実行した場合それはクラッシュすることはありませんが、EPSG：4326で受け取ったポイントを正しい場所にプロットすることができません。

var extent = [0, 0, 1024, 968]; 
var projection = new ol.proj.Projection({ 
    code: 'xkcd-image', 
    units: 'pixels', 
    extent: extent 
}); 

var imageLayer = new ol.layer.Image({ 
    source: new ol.source.ImageStatic({ 
     attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>', 
     url: '../_images/mallSitePlan.png', 
     projection: projection, 
     imageExtent: extent 
    }) 
}); 

var map = new ol.Map({ 
    layers: [imageLayer, myVectorLayer], 
    target: 'mymap', 
    view: new ol.View({ 
     projection: projection, 
     center: ol.extent.getCenter(extent) 
    }) 
}); 

Answer 1

だから私は何とかこのことを理解しました。なぜ私はそれを持っていた方法ではなく、このように動作するのか、私は完全にはわかりません。誰かがそれ以上の説明をすることができれば、大いに感謝します。最初に地図を作成するのがベストプラクティスですか？とにかく、ここではパフォーマンスの問題なしに静的な画像レイヤーを持つことができるコード/クロムにクラッシュし、私が必要とする投影にあります。

// Create map 
var map = new ol.Map({ 
    target: 'map', // The DOM element that will contains the map 
    view: new ol.View({ 
     center: ol.proj.transform([-121.897329, 37.415616], 'EPSG:4326', 'EPSG:3857'), 
     zoom: 16, 
     minZoom: 16, 
     enableRotation: false, 
     extent: ol.extent.applyTransform([-121.90320739419553, 37.409945396290674, -121.89234011506653, 37.41962634032544], ol.proj.getTransform("EPSG:4326", "EPSG:3857")) 
    }) 
}); 

// Create an image layer 
var imageLayer = new ol.layer.Image({ 
    source: new ol.source.ImageStatic({ 
     url: '../_images/mallSitePlan.png', 
     projection: map.getView().getProjection(), 
     imageExtent: ol.extent.applyTransform([-121.90320739419553, 37.409945396290674, -121.89234011506653, 37.41962634032544], ol.proj.getTransform("EPSG:4326", "EPSG:3857")) 
    }) 
}); 
//add image layer to map 
map.addLayer(imageLayer);