I am using OpenLayers and recently started to learn it from the 'OpenLayers CookBook'.
I have been able to get Google Maps and WMS layers as base layers and even a vector layer overlayed correctly on top of the base layers at the exact location. Lastly, I wanted to display my Interpolation Raster image which I generated in QGIS to be displayed over the vector layer at the precise location.
But the 'Interpolation Raster' seems to load as an image and does not come up at the correct location, the way my vector layer does without any trouble. Can anyone point me in the right direction ?.
I have been searching two books on layers and on Google for the solution to this problem but it seems to be not talked about much. The code for my web page using OpenLayers is as below:
var map;
function init() {
// Initiating 'map' Variable and Adding Controls
map = new OpenLayers.Map('map_element', {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.ZoomBox(),
new OpenLayers.Control.ZoomToMaxExtent(),
new OpenLayers.Control.LayerSwitcher({}),
new OpenLayers.Control.MousePosition({
prefix: 'Long: ',
separator: ' | Lat: '
}),
new OpenLayers.Control.ScaleLine({}),
new OpenLayers.Control.OverviewMap()
]
});
// BaseMap Layers
var wms = new OpenLayers.Layer.WMS(
'OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {
layers: 'basic'
}, {
projection: 'EPSG:4269',
maxExtent: new OpenLayers.Bounds(-180, -90,
180, 90),
maxResolution: 1.40625,
units: 'm'
}
);
var google_hybrid = new OpenLayers.Layer.Google(
"Google Hybrid", {
type: google.maps.MapTypeId.HYBRID
}
);
var google_physical = new OpenLayers.Layer.Google(
"Google Physical", {
type: google.maps.MapTypeId.TERRAIN
}
);
var google_satellite = new OpenLayers.Layer.Google(
"Google Satellite", {
type: google.maps.MapTypeId.SATELLITE
}
);
var google_streets = new OpenLayers.Layer.Google(
'Google Streets', {
type: google.maps.MapTypeId.ROADMAP,
projection: new OpenLayers.Projection("EPSG:3857"),
units: "dd",
maxResolution: 1.40625,
displayProjection: new OpenLayers.Projection("EPSG:4326")
}, {
"sphericalMercator": true
}
);
// Vector Layers
var vector_layer = new OpenLayers.Layer.Vector('Basic Vector Layer')
// Load Vector Data
var vector_KML = new OpenLayers.Layer.Vector("KML", {
//projection: 'EPSG: 4269',
protocol: new OpenLayers.Protocol.HTTP({
url: 'New_Sector_Polygon_KML.kml',
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
}),
strategies: [new OpenLayers.Strategy.Fixed()]
});
var vector_KML_new = new OpenLayers.Layer.Vector(
"New KML", {
//projection: 'EPSG: 4269',
protocol: new OpenLayers.Protocol.HTTP({
url: 'New_Sector_Polygon_KML_new.kml',
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
}),
strategies: [new OpenLayers.Strategy.Fixed()]
}
)
// Loading Image Layer---Interpolation
var image_layer = new OpenLayers.Layer.Image(
"IDW_Interpolation_RASTER",
'Export_CLIP_RENDERED_Image.png',
new OpenLayers.Bounds(-5, -5, 5, 5), {
numZoomLevels: 7,
maxResolution: .625
}, {
isBaseLayer: false
}
);
// Adding map Controls
map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));
// Adding BaseMap and Vector Layers
map.addLayers([
wms,
vector_layer, vector_KML, vector_KML_new, image_layer
]);
var map_control_panel = new OpenLayers.Control.Panel({
div: document.getElementById('panel_div'),
defaultControl: new OpenLayers.Control.Navigation()
});
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
// Create some empty vector layers
var pointLayer = new
OpenLayers.Layer.Vector("Points");
var lineLayer = new OpenLayers.Layer.Vector("Lines");
var polygonLayer = new
OpenLayers.Layer.Vector("Polygon");
// Add layers to the map
map.addLayers([polygonLayer, lineLayer, pointLayer]);
// Fill layers
initializePointLayer();
initializeLineLayer();
initializePolygonLayer();
// Create some random points.
function initializePointLayer() {
var pointFeatures = [];
for (var i = 0; i < 50; i++) {
var px = Math.random() * 360 - 180;
var py = Math.random() * 180 - 90;
var pointGeometry = new
OpenLayers.Geometry.Point(px, py);
var pointFeature = new
OpenLayers.Feature.Vector(pointGeometry);
pointFeatures.push(pointFeature);
}
pointLayer.addFeatures(pointFeatures);
}
// Create some random lines
function initializeLineLayer() {
for (var j = 0; j < 1; j++) {
var pointGeometries = [];
for (var i = 0; i < 10; i++) {
var px = Math.random() * 240 - 120;
var py = Math.random() * 100 - 50;
var pointGeometry = new
OpenLayers.Geometry.Point(px, py);
pointGeometries.push(pointGeometry);
}
var lineGeometry = new OpenLayers.Geometry.
LineString(pointGeometries);
var lineFeature = new
OpenLayers.Feature.Vector(lineGeometry);
lineLayer.addFeatures(lineFeature);
}
}
// Create some random polygons
function initializePolygonLayer() {
for (var j = 0; j < 1; j++) {
var pointGeometries = [];
for (var i = 0; i < 5; i++) {
var px = Math.random() * 240 - 180;
var py = Math.random() * 100 - 90;
var pointGeometry = new
OpenLayers.Geometry.Point(px, py);
pointGeometries.push(pointGeometry);
}
var linearGeometry = new OpenLayers.Geometry.
LinearRing(pointGeometries);
var polygonGeometry = new OpenLayers.
Geometry.Polygon([linearGeometry]);
var polygonFeature = new OpenLayers.
Feature.Vector(polygonGeometry);
polygonLayer.addFeatures(polygonFeature);
}
}
//Trying to Create a circle >>>>>---------------------------------------->>>>>
// CIRCLE
var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(30, 53),
50,
30
);
var attributes_c = {
name: "my circle",
bar: "foo"
};
var feature_c = new OpenLayers.Feature.Vector(circle);
var layer_c = new OpenLayers.Layer.Vector("Circle");
layer_c.addFeatures(feature_c);
map.addLayer(layer_c);
// ----xxxxxxx------------------------------------------------------------------------xxxxxxxxxxxxx
if (!map.getCenter()) {
map.zoomToMaxExtent();
}
}
-5,-5,5,5?