openlayers 调用google map 本地切片
使用 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 指定宽、高；
转载自：https://blog.csdn.net/wangpingjing/article/details/84389425
