靜態圖像層性能問題 - 打開第 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

所以，我以某種方式想通了這一點。 我不完全確定為什么它會以這種方式工作，而不是我的方式。 如果有人可以提供進一步的解釋，將不勝感激。 首先創建地圖是最佳做法嗎？ 無論如何，這是允許我擁有一個靜態圖像層而不會出現性能問題/在 chrome 上崩潰的代碼，它在我需要的投影中。

// 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);