使用 OpenLayers.Layer.TMS 直接调用本地google map 下载下来的地图切片
?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
??<title>Google Local Tiles</title>
??<link rel="StyleSheet" href="OpenLayers-2.12/theme/default/style.css" type="text/css"/>
??<script src="OpenLayers-2.12/OpenLayers.js"></script>
??<script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
??<script type="text/javascript">
???var map, layer; //complex object of type OpenLayers.Map
??
???//Initialise the 'map' object
???function init() {
????map = new OpenLayers.Map("map", {
?????? maxExtent: new OpenLayers.Bounds(-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892),
??????? numZoomLevels:18,
??????? maxResolution:156543.0339,
??????? units:'m',
??????? projection: "EPSG:900913",
??????? displayProjection: new OpenLayers.Projection("EPSG:4326")
????});
????layer = new OpenLayers.Layer.TMS("china",
?????"http://localhost:9080/nankaiBW/", {
??????'type' : 'png',?
??????'getURL' : get_my_url
????});
??
????map.addLayer(layer);
????
????layer_street = new OpenLayers.Layer.Google(
??????? "Google Streets", // the default
??????? {
??????? ?numZoomLevels: 18 ,
??????? ?isBaseLayer:true,
??????? ?projection: "EPSG:900913",
??????? }
????);
????map.addLayer(layer_street);
????map.addControl(new OpenLayers.Control.Scale());
????map.addControl(new OpenLayers.Control.MousePosition());
????map.addControl(new OpenLayers.Control.LayerSwitcher());
????
????var lonLat = new OpenLayers.LonLat(119.62519, 30.32329);
????lonLat.transform(map.displayProjection, map.getProjectionObject());
????map.setCenter(lonLat, 5);
????
????//添加标注
????var laolat_v=new OpenLayers.LonLat(119.62519, 30.32329);
????if (map.displayProjection) {
?????laolat_v.transform(map.displayProjection,map.getProjectionObject());
????}
????var markers = new OpenLayers.Layer.Markers( "Markers" );
????markers.addMarker(GetMark(laolat_v));
????markers.events.register('click', markers, function(){
?????var popup = new OpenLayers.Popup("marking",
??????laolat_v,
??????new OpenLayers.Size(20,20),
??????"定位！！！",
?????true);
?????popup.autoSize=true;
?????map.addPopup(popup);
????});
????map.addLayers([markers]);
?????????? ? }
??
???function GetMark(laolat_v){
????var size = new OpenLayers.Size(21,25);
????var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
????var icon = new OpenLayers.Icon('OpenLayers-2.12/img/marker.png',size,offset);
????var mk=new OpenLayers.Marker(laolat_v,icon);
????//mk.visible=false;
????return mk;
???}
????
???function get_my_url(bounds) {
????var res = this.map.getResolution();
????var tileOriginY = this.map.getMaxExtent().top;
????var tileOriginX = this.map.getMaxExtent().left;
????
????var x = Math.round((bounds.left - tileOriginX) / (res * this.tileSize.w));
????var y = Math.round((tileOriginY - bounds.top) / (res * this.tileSize.h));
????var z = this.map.getZoom();
????var path = "" + z + "/" + x + "/"? + y + "." + this.type;
????var url = this.url;
????if (url instanceof Array) {
?????url = this.selectUrl(path, url);
????}
????return url + path;
???}
???
??</script>
?</head>
?<body onload="init();">
??<div style="width: 800px; height: 500px;border:1px;" id="map"></div>
?</body>
</html>
?
注意 给div 指定宽、高；