OpenLayers3 with google map local tiles server

Question

I've got a problem with openlayers3 and my local tiles server. I have downloaded some offline google map tiles from zoomLevel 0 to zoomLevel 16. All of the tiles are 256 * 256. And they are distributed in some local folders, which name from "0" to "16". Then i copied these tiles into my local apache server path, and i can access these tiles with my web browser such as google Chrome,and the url is "http://localhost:8089/Maps/15/26933/12364.png". I created a html with openlayers3 , and tried to access the tiles on my apache server. The content in html is below:

    var TileLayer = function (options) {
        var layer = new ol.layer.Tile({
            extent: ol.proj.transformExtent(options.mapExtent, options.fromProject, 

options.toProject),
            source: new ol.source.XYZ({
                attributions: [options.attribution],
                url: options.url,
                tilePixelRatio: options.tilePixelRatio, // THIS IS IMPORTANT
                minZoom: options.mapMinZoom,
                maxZoom: options.mapMaxZoom
            })
        });
        return layer;
    }

    var defaults = {
        url: 'http://localhost:8089/Maps/{z}/{x}/{y}.png',
        mapExtent: [115.89752197265625,39.63319206567459,116.9000244140625,40.34445080136368],
        mapMinZoom: 1,
        mapMaxZoom: 16,
        attribution: new ol.Attribution({
            html: 'Tiles © GoogleMap'
        }),
        tilePixelRatio: 1,
    // all of the project can not work
        fromProject: "EPSG:102100",
        //fromProject: "EPSG:900913",
        toProject: "EPSG:3857"
    };
    var layer = new TileLayer(defaults);

    var map = new ol.Map({
     layers: [layer],
     target: 'map',
     view: new ol.View({
     center: [115.886536, 39.842286],
     zoom: 8
     })
     });

When i browse to this html the following error happens: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8089/Maps/10/509/512.png Failed to load resource: the server responded with a status of 404 (Not Found).

I have searched for a while, but i can't find some useful information about my problems. Any help?

Answer 1

Ok, so you said that you can directly access the .pngs from your browser with the following link http://localhost:8089/Maps/15/26933/12364.png. Now if you have that working you know for sure its not your servers fault. Which then points to the code you made. Error 404 usually means that the data you requested doesn't exist or you are trying to access something that isn't there. So first of all I would try to copy http://localhost:8089/Maps/10/509/512.png into chrome. If you get the same error you know for sure that the following request is incorrect -> the png is not where you are saying it is, which means the code you are using, is creating incorrect values causing your server to reply with 404.

Answer 2

Thanks for your quick reply. As you pointed out , the tiles such as "10/509/512.png " didn't exist. The question is that the tile url parse scheme which i used doesn't match my local tile server. Fortunately, i have found the solution. http://tileserver.maptiler.com/#nasa/ol3cesium.code I followed this method, and i can show my local tiles now. Openlayers3 + Google map offline tile server .