CODEWITHSUNDEEP
javascriptopenlayersopenlayers-3
Truextacy
Truextacy

Reputation: 562

Static Image Layer Performance Issues - Open Layers 3

I am receiving data points in lat/lon. I need to plot all of these on a static image in OpenLayers 3. I am not using OSM or anything else, my image should be the base layer, with a vector layer (the points) on top. I got it working by adding the static image layer, setting the extent to be the four corners in lat/lon and then plotting my features on top of it. However this runs in the browser very slowly, and on mobile it will crash the browser after a couple seconds. What is the proper way to do this? Should I be using a different layer type? Do I need to convert my lat/lon coordinates to pixels? If so, how would I accomplish that?

I narrowed the crash down to the static image layer, as when I set it to the projection I need, it crashes on mobile (my target platform):

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
})

If I run it in this projection, it does not crash, but I am unable to plot my points in the correct locations as I am receiving them in 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)
    })
});

Upvotes: 1

Views: 1028

Answers (1)

Truextacy
Truextacy

Reputation: 562

So, I somehow figured this out. I am not entirely sure why it works this way and not the way I had it. If anyone could provide further explanation it would be greatly appreciated. Is it best practice to create your map first? Anyway, here is the code that allows me to have a static image layer without performance issues/crashing on chrome and it is in the projection I need. 

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

Upvotes: 1

Related Questions