Openlayers发布谷歌离线地图


<html>
  <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
    <meta name=”apple-mobile-web-app-capable” content=”yes”>
    <title>OpenLayers Tiled Map Service Example</title>
    <link rel=”stylesheet” href=”../theme/default/style.css” type=”text/css”>
    <link rel=”stylesheet” href=”style.css” type=”text/css”>
    <style type=”text/css”>
html, body { overflow: hidden;
             padding: 0;
             height: 100%;
             width: 100%;
             font-family: ‘Lucida Grande’,Geneva,Arial,Verdana,sans-serif;
           }
body { margin: 1px;
       background: #fff;
     }  
#map { height: 99%;
       border: 1px solid #888;
     }
</style>
    <script src=”../lib/OpenLayers.js”></script>
    <script type=”text/javascript”>
        var map;
        var mapBounds = new OpenLayers.Bounds( 1.3172798200611E7,3400604.87623691,1.34309719074187E7,3576746.35051871);
        var mapMinZoom =8;
        var mapMaxZoom =13;
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
        OpenLayers.Util.onImageLoadErrorColor = “transparent”;

        function init(){

            var options = { controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.ScaleLine(),
                new OpenLayers.Control.OverviewMap()
                ],
                    projection: new OpenLayers.Projection(“EPSG:900913”),
                    displayProjection: new OpenLayers.Projection(“EPSG:4326”),
                    units: “m”,
                    numZoomLevels:13,
                    maxResolution: 156543.0339,
                    maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508.3427892, 20037508.3427892)
                    };
            map = new OpenLayers.Map(‘map’, options);

            var tmsoverlay = new OpenLayers.Layer.TMS( “OpenGSC”, “”,{ type: ‘png’,
                                                                       getURL: overlay_getTileURL,
                                                                       alpha: true,
                                                                       isBaseLayer: true,
                                                                       minResolution : 4.777314267158508,
                                                                       maxResolution : 611.4962261962891 });
            if (OpenLayers.Util.alphaHack() == false) {
                    tmsoverlay.setOpacity(1);
            }
            map.addLayers([tmsoverlay]);

            //var switcherControl = new OpenLayers.Control.LayerSwitcher();
            //map.addControl(switcherControl);
            //switcherControl.maximizeControl();
            map.zoomToExtent( mapBounds );
            

            //map.addControl(new OpenLayers.Control.Scale());
    
            //map.addControl(new OpenLayers.Control.PanZoomBar());
            map.addControl(new OpenLayers.Control.MousePosition());
            //map.addControl(new OpenLayers.Control.MouseDefaults());
            //map.addControl(new OpenLayers.Control.KeyboardDefaults());
            
            //map.setCenter(new OpenLayers.LonLat(120.18295,30.31787), 3);
            
            var lonLat = new OpenLayers.LonLat(120.18295,30.31787);
            //google地图需要转换坐标
            lonLat.transform(map.displayProjection, map.getProjectionObject());
            map.setCenter(lonLat, 4);

            

            // 注册map缩放事件
            map.events.register(“zoomend”, map, onMapZoom);

        }

    function overlay_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();
        z=z+8;
        if (mapBounds.intersectsBounds( bounds ) && z >= mapMinZoom && z <= mapMaxZoom ) {
            return this.url + z + “/” + y + “/” + x+ “.” + this.type;
        } else {
            return “”;
        }
    }

    function onMapZoom(e){
            //alert(‘zoom level:’+map.getZoom());
            //alert(‘sclse:’+map.getScale());
    }

    </script>
  </head>
  <body onload=”init()”>
    <div id=”map” class=””></div>
  </body>
</html>

转载自:https://blog.csdn.net/leesmn/article/details/48342641

You may also like...