I am trying to load some tiles I generated in mercator projections. With the Google API it works perfectly with this script:
var map, overlay; function initialize() { var mapOptions = { zoom: 3, minZoom: 2, maxZoom: 5, center: new google.maps.LatLng(0, 0), scaleControl: true, mapTypeId: google.maps.MapTypeId.SATELLITE }; map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions); overlay = new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { var x = coord.x % Math.pow(2,zoom); console.log('=======================================') console.log('Coord: (' + coord.x + ',' + coord.y + ')') if( x < 0 ){ x = x + Math.pow(2,zoom); } return "tiles/tile_" + zoom + "_" + x + "_" + coord.y + ".png"; }, tileSize: new google.maps.Size(1024, 1024) }); overlay.setOpacity(0.7); map.overlayMapTypes.insertAt(0, overlay); console.log('Zoom: ' + map.getZoom()) } But I would like to use OpenLayers. For this case, I wrote this code which does not work obviusly, but I should use XYZ layer as I have seen here, so that's I hope the code to be something similar to this...
var map; function initialize() { var base = new OpenLayers.Layer.OSM("Simple OSM Map"}); var overlay = new OpenLayers.Layer.XYZ("MyLayer", "tiles/tile_${z}_${y}_${x}.png", { format : "image/png", transparent : "true", isBaseLayer : false, opacity : 0.8 } ); var overlay = new OpenLayers.Layer.XYZ('Layer',{ getURL: function(bounds) { var xyz = this.getXYZ(bounds); console.log('=======================================') console.log('Bounds: (' + xyz.x + ',' + xyz.y + ',' + xyz.z + ')') return "tiles/tile_" + xyz.z + "_" + xyz.x + "_" + xyz.y + ".png"; } }); // Map map = new OpenLayers.Map('mapDiv', { controls:[ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Attribution()], layers: [base, overlay], units: 'm', center: new OpenLayers.LonLat(0, 0), zoom: 0, projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326") }); } I used getUrl function but the console does not show the required layers, so I am not sure how it can work.
أكثر...
var map, overlay; function initialize() { var mapOptions = { zoom: 3, minZoom: 2, maxZoom: 5, center: new google.maps.LatLng(0, 0), scaleControl: true, mapTypeId: google.maps.MapTypeId.SATELLITE }; map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions); overlay = new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { var x = coord.x % Math.pow(2,zoom); console.log('=======================================') console.log('Coord: (' + coord.x + ',' + coord.y + ')') if( x < 0 ){ x = x + Math.pow(2,zoom); } return "tiles/tile_" + zoom + "_" + x + "_" + coord.y + ".png"; }, tileSize: new google.maps.Size(1024, 1024) }); overlay.setOpacity(0.7); map.overlayMapTypes.insertAt(0, overlay); console.log('Zoom: ' + map.getZoom()) } But I would like to use OpenLayers. For this case, I wrote this code which does not work obviusly, but I should use XYZ layer as I have seen here, so that's I hope the code to be something similar to this...
var map; function initialize() { var base = new OpenLayers.Layer.OSM("Simple OSM Map"}); var overlay = new OpenLayers.Layer.XYZ("MyLayer", "tiles/tile_${z}_${y}_${x}.png", { format : "image/png", transparent : "true", isBaseLayer : false, opacity : 0.8 } ); var overlay = new OpenLayers.Layer.XYZ('Layer',{ getURL: function(bounds) { var xyz = this.getXYZ(bounds); console.log('=======================================') console.log('Bounds: (' + xyz.x + ',' + xyz.y + ',' + xyz.z + ')') return "tiles/tile_" + xyz.z + "_" + xyz.x + "_" + xyz.y + ".png"; } }); // Map map = new OpenLayers.Map('mapDiv', { controls:[ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Attribution()], layers: [base, overlay], units: 'm', center: new OpenLayers.LonLat(0, 0), zoom: 0, projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326") }); } I used getUrl function but the console does not show the required layers, so I am not sure how it can work.
أكثر...