静态图像层性能问题 - 打开第 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);