I want to build a map web application with OpenLayers 3. I downloaded some map data and cut it into tiles with ArcGIS server in WGS 84 coordinate system. Here is my conf.xml file for my map tiles. It contains origins, scales, and resolutions.
GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0],UNIT["degree",0.0174532925199433],AUTHORITY["EPSG","4326"]]-180 90 11258999068426.24 -100000 10000 -100000 10000 8.983152841195215e-009 0.001 0.001 true -180 4326 -180 90 256 256 96 1 115419847.3282445 0.703125 2 57709923.66412225 0.3515625 3 28854961.83206113 0.17578125 4 14427480.91603056 0.087890625 5 7213740.458015281 0.0439453125 6 3606870.229007641 0.02197265625 7 1803435.11450382 0.010986328125 8 901717.5572519102 0.0054931640625 9 450858.7786259551 0.00274658203125 10 225429.3893129775 0.001373291015625 11 112714.6946564888 0.0006866455078125 12 56357.34732824438 3.4332275390625e-4 13 28178.67366412219 1.71661376953125e-4 14 14089.3368320611 8.58306884765625e-5 15 7044.668416030548 4.291534423828125e-5 16 3522.334208015274 2.145767211914063e-5 17 1761.167104007637 1.072883605957031e-5 Then the map tiles contained in the file folder with row number for the folder name and column number for the map tiles file name, they are all hexadecimal and they are all 256*256 jpg. Here is my test code:
var resStr = "0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125,0.00002145767211914063,0.00001072883605957031"; var resolutions = resStr.split(","); var tileSize = 256; var projection = new ol.proj.get("EPSG:4326"); var projectionExtent = projection.getExtent();// [-tileSize*resolusions[1],-tileSize*resolusions[1],tileSize*resolusions[1],tileSize*resolusions[1]];//projection.getExtent(); var tilegrid = new ol.tilegrid.TileGrid({ //origin: [-10,28000], origin: [-180,90], resolutions: resolutions }); console.log(projection); console.log(projectionExtent); var tilesource = new ol.source.TileImage({ projection: projection, tileGrid: tilegrid, tileUrlFunction: function (xyz, obj1, obj2) { if (!xyz) { return ""; } var z = xyz[0]; var x = xyz[1]; var y = xyz[2]; if (x < 0) { x = "M" + (-x); } if (y < 0) { y = "M" + (-y); } return "1.jpg"; } }); var mousePositionControl = new ol.control.MousePosition({ coordinateFormat: ol.coordinate.createStringXY(4), // projection: 'EPSG:4326', className: 'custom-mouse-position', target: document.getElementById('location'), undefinedHTML: ' ' }); var scaleLineControl = new ol.control.ScaleLine({ target: document.getElementById('scale') }); var map = new ol.Map({ view: new ol.View({ center: [0,0], zoom: 12 }), controls: [scaleLineControl,mousePositionControl,new ol.control.FullScreen({tipLabel:'
أكثر...
GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0],UNIT["degree",0.0174532925199433],AUTHORITY["EPSG","4326"]]-180 90 11258999068426.24 -100000 10000 -100000 10000 8.983152841195215e-009 0.001 0.001 true -180 4326 -180 90 256 256 96 1 115419847.3282445 0.703125 2 57709923.66412225 0.3515625 3 28854961.83206113 0.17578125 4 14427480.91603056 0.087890625 5 7213740.458015281 0.0439453125 6 3606870.229007641 0.02197265625 7 1803435.11450382 0.010986328125 8 901717.5572519102 0.0054931640625 9 450858.7786259551 0.00274658203125 10 225429.3893129775 0.001373291015625 11 112714.6946564888 0.0006866455078125 12 56357.34732824438 3.4332275390625e-4 13 28178.67366412219 1.71661376953125e-4 14 14089.3368320611 8.58306884765625e-5 15 7044.668416030548 4.291534423828125e-5 16 3522.334208015274 2.145767211914063e-5 17 1761.167104007637 1.072883605957031e-5 Then the map tiles contained in the file folder with row number for the folder name and column number for the map tiles file name, they are all hexadecimal and they are all 256*256 jpg. Here is my test code:
var resStr = "0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125,0.00002145767211914063,0.00001072883605957031"; var resolutions = resStr.split(","); var tileSize = 256; var projection = new ol.proj.get("EPSG:4326"); var projectionExtent = projection.getExtent();// [-tileSize*resolusions[1],-tileSize*resolusions[1],tileSize*resolusions[1],tileSize*resolusions[1]];//projection.getExtent(); var tilegrid = new ol.tilegrid.TileGrid({ //origin: [-10,28000], origin: [-180,90], resolutions: resolutions }); console.log(projection); console.log(projectionExtent); var tilesource = new ol.source.TileImage({ projection: projection, tileGrid: tilegrid, tileUrlFunction: function (xyz, obj1, obj2) { if (!xyz) { return ""; } var z = xyz[0]; var x = xyz[1]; var y = xyz[2]; if (x < 0) { x = "M" + (-x); } if (y < 0) { y = "M" + (-y); } return "1.jpg"; } }); var mousePositionControl = new ol.control.MousePosition({ coordinateFormat: ol.coordinate.createStringXY(4), // projection: 'EPSG:4326', className: 'custom-mouse-position', target: document.getElementById('location'), undefinedHTML: ' ' }); var scaleLineControl = new ol.control.ScaleLine({ target: document.getElementById('scale') }); var map = new ol.Map({ view: new ol.View({ center: [0,0], zoom: 12 }), controls: [scaleLineControl,mousePositionControl,new ol.control.FullScreen({tipLabel:'
أكثر...