Enable Javascript


Last Arduino/ESP8266 project (click to open)

User Rating: 0 / 5

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

Google Maps en OpenStreetMap Tiles Grabbers voor offline kaarten

Nieuw: Google Tiles Grabber nu met een optie voor een nieuwe Google Key.

For my English-speaking friends:
Use the translator of your browser. Look at the pictures for explanation.
Microsoft ".NET Framework 3.5+" (download from Microsoft) is required.
Copy "Openlayer" in the Program Map.

Allereerst dit:
Het programma is vrij te gebruiken en bevat geen kaartmateriaal.
Het gebruik er van is voor eigen risico in wat voor een vorm dan ook.

Installatie:
Installatie niet nodig. Als het programma niet wil opstarten dan moet je bij Microsoft ".NET Framework 3.5+" downloaden en installeren.
Kopieer "OpenLayers" in de Programmafolder.

Aan de slag:
Om één kaartdeel (Tile) van 256 x 256 pixels te tonen wordt er een hele reeks Tiles bij de MapServer opgehaald. Dit om het hele kaartvenster te vullen en een aantal aansluitende delen voor als je de kaart gaat schuiven of uit Zoomen.
Ik maak hier domweg gebruik van zodat je meer Tiles krijgt als in het venster vertoond, dat scheelt in laden.

Overigens kun je ook zelf uitrekenen welke Tiles je wilt hebben en dan direct downloaden van
    http://tile.openstreetmap.org/Zoomlevel/TileX/TileY.jpg
            sinLatitude = sin(latitude * pi/180)
            TileX = Fix(((longitude + 180) 360) * 2Zoomlevel)
            TileY = Fix((0.5 – log((1 + sinLatitude) (1 – sinLatitude)) (4 * pi)) * 2Zoomlevel)

Je hoeft er maar één uit te rekenen, want:
Één Tile naar boven is TileX-1, naar onder is TileX+1,.
....
Één Tile naar Links is TileY-1, naar rechts is TileY+1,.
....

De berekening kun je natuurlijk door een programma laten doen maar het opzoeken en ingeven van Latitude en Longitude is omslachtig en werkt fouten in de hand. Bij deze twee programma's, OpenStreetMapTilesGrabber en GoogleMapsTileGrabber, hoef je niets in te geven en/of uit te rekenen, met een beetje schuiven en klikken plaats je de hele wereld zo op je harddisk.

Interessante en zeer duidelijke informatie kun je bij Microsoft vinden (OpenStreetMap, Google, Microsoft,.
.. gebruiken het zelfde systeem)
http://msdn.microsoft.com/en-us/library/aa940990.aspx (Scale and Resolution)
http://msdn.microsoft.com/en-us/library/bb259689.aspx (Earth Tile System)

Download alleen wat je nodig hebt, later aanvullen is een makkie en onnodig overschrijven kun je uitsluiten.
Neen niet te veel Zoomlevels 9, 11 en 14 zijn mooie waarden voor overzicht en details. De andere Zoomlevels zijn dan eventueel softwarematig (afhankelijk van de gebruikte OpenLayers Code).

Afbeeldingen gemixt met Google Maps Tiles Grabbers en OpenStreetMaps Tiles Grabbers
(klik miniatuur)

Een simpel HTML-bestand, met script, om de opgeslagen Tiles offline te gebruiken.

Het script heeft het,bij dit programma gevoegde, OpenLayers nodig.

Offline OpenStreetMap HTML-code met OpenLayers

Rood/Red = Te bewerken items/ Items to EDIT

<html>
<head>
<title>Offline OpenStreetMap</title>
<link rel="stylesheet" href="OpenLayers/style.css" type="text/css">
<script src="OpenLayers/OpenLayers.js"></script>
<script src="OpenLayers/OpenStreetMap.js"></script>
<script defer="defer" type="text/javascript">
    var lat = 52.52332372377514;/ Center LatLon
    var lon = 5.7176971435546875;
    var zoom= 11;
    var TilePath = "C:\\Users\\<user>\\Documents\\OpenstreetPNG\\";
    var oeps = "404.jpg";
    var map, mapnik;
    function init() {
        map = new OpenLayers.Map ("map", {
            controls:[
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.MousePosition({position: new OpenLayers.Pixel(4,286)}),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.Attribution()
            ],
            maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
            maxResolution: 156543.0399,
            units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
        });
        mapnik = new OpenLayers.Layer.TMS(
            "OpenStreetMap (Mapnik)",
            "http://tile.openstreetmap.org/", {
                type: 'png', getURL: osm_getTileURL,
                displayOutsideMaxExtent: true
        });
        map.addLayer(mapnik);
        tekenvector = new OpenLayers.Layer.Vector("Tekenen");
        map.addLayer(tekenvector);
        map.addControl(new OpenLayers.Control.EditingToolbar(tekenvector));
        map.setCenter(new OpenLayers.LonLat(lon, lat).transform(map.displayProjection, map.projection), zoom);
    }
    function osm_getTileURL(bounds) {
        var res = this.map.getResolution();
        var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
        var y = Math.round((this.maxExtent.top - bounds.top) (res * this.tileSize.h));
        var z = this.map.getZoom();
        var limit = Math.pow(2, z);
        if (y < 0 || y >= limit) {
            return TilePath + oeps;
        } else {
            x = ((x % limit) + limit) % limit;
            return TilePath + z + "\\" + x + "\\" + y + ".jpg";
        }
    }
</script>
</head>
<body onload="init();" topmargin="0" leftmargin="0">
<div style="width:768px; height:512px" id="map"></div>
</body>
</html>


Blijf op je route dan verdwaal je niet!