[GIS] How to add image(.jpg) to OpenLayers

demimageopenlayers-2

This is my website for test: http://www.cv.nctu.edu.tw/shapefile-js-openlayers/ol_simple.html

My dem data is (.jpg).

var inProj = new OpenLayers.Projection('EPSG:3826');
var outProj = map.getProjectionObject();
var options = {   
    opacity: 1.0, 
    isBaseLayer: false,
    numZoomLevels: 20 
};

var extent = new OpenLayers.Bounds(16120,2409591,484824,2814500).transform(inProj,outProj);

var imageLayer = new OpenLayers.Layer.Image('Image Layer',  
    'http://www.cv.nctu.edu.tw/shapefile-js-openlayers/naturalearthdata/cultural/dem.jpg', 
    extent,
    new OpenLayers.Size(1,1),
    options);
map.addLayers([osm, GridshpLayer,BounderyshpLayer,RivershpLayer,SeashpLayer,imageLayer]);

error:
enter image description here

Best Answer

Your problem is completely unrelated to your question's title.

The JS interpreter doesn't even reach the line where you add the image layer because of an earlier "Uncaught TypeError: Cannot read property 'proj' of null" exception in the following line:

var extent = new OpenLayers.Bounds(16120,2409591,484824,2814500).transform(inProj,outProj)

This is because outProj is null - apparently map is not yet initialized fully so map.getProjectionObject(); returns null. You can test this by removing the reprojection:

var extent = new OpenLayers.Bounds(16120,2409591,484824,2814500);

Even though the page clearly still doesn't work correctly, you won't get fatal JS exceptions and you'll see the map rendered.

Related Question