openstreetmap use example 2

zscomehuyue

浏览: 420819 次
性别:
来自: 上海

最近访客更多访客>>

xx5333

maleking

hs_

ZT71363387

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript UP Cache

Deploy an OpenStreetMap slippymap on my own website

This simple example may help if you are Deploying your own Slippy Map. This DHTML snippit will bring in the OpenLayers javascript library and use it to show an OSM map!

Contents [hide]
1 Note: OpenStreetMap is serving the tile images
2 Instructions
2.1 Extensions
2.1.1 Bespoke
3 Develop this example?
4 Related

Note: OpenStreetMap is serving the tile images
Please note that tile images are coming from the OpenStreetMap servers. Although OSM are supporting this kind of usage at the moment, we offer no guarantees. There may be downtime (planned or unplanned), and tile URLs may change.

If you are expecting heavy user load, then you should discuss with everyone first (Contact). You should consider following the other instructions on the "Deploying your own Slippy Map" page, to render and host your own tile images, or set up your own squid cache for tiles. This will reduce the dependency for you, and will ease bandwidth usage for the OSM servers.

Of course the images themselves (our maps) change over time too, not necessarily for the better.

Instructions
Example result

Copy the following into a new HTML file, and view it in a browser.

<html>
<head>
    <title>OpenStreetMap</title>

    
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>

    
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

    <script type="text/javascript">
        // Start position for the map (hardcoded here for simplicity)
        var lat=51.508;
        var lon=-0.118;
        var zoom=13;

        var map; //complex object of type OpenLayers.Map

        //Initialise the 'map' object
        function init() {

            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );

            // Define the map layer
            // Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
            layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
            map.addLayer(layerTilesAtHome);

            if( ! map.getCenter() ){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter (lonLat, zoom);
            }
        }

    </script>
</head>


<body onload="init();">

    
    <div style="width:100%; height:100%" id="map"></div>

</body>

</html>Extensions
Bespoke
If you are deploying your own tile images (for example, with Mapnik), just use the layer definition below:

var newLayer = new OpenLayers.Layer.OSM("New Layer", "URL_TO_TILES/${z}/${x}/${y}.png", {numZoomLevels: 19});
map.addLayer(newLayer);Important! Please note the addition of /${z}/${x}/${y}.png to the URL, this has been required since the 27th June 2009.
Change the url and numZoomLevels as appropriate.

分享到：