openlayers调用google离线图实例

来源：互联网发布：免费永久个人域名注册编辑：程序博客网时间：2024/04/30 04:49

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试使用xyz</title>
<link rel="stylesheet" href="js/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/map/OpenLayers.js" type="text/javascript"></script>
<script src="js/map/zh-CN.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var map, layer;

var proj = new OpenLayers.Projection("EPSG:4326");
var mapproj = new OpenLayers.Projection("EPSG:900913");
function init() {
//世界区域范围
var extentbak = new OpenLayers.Bounds(
-128 * 156543.0339, -128 * 156543.0339,
128 * 156543.0339, 128 * 156543.0339
);
//中国区域范围
var extent = new OpenLayers.Bounds(
                    66.978, 16.319,
                    154.852, 55.092
                );
extent.transform(proj,mapproj); //投影转换
var ol_wms = new OpenLayers.Layer.WMS(
            "中国区域矢量图",
            "http://localhost:9009/geoserver/cite/wms",
            {layers: "cite:bou2_4p", format: "image/png",isBaseLayer: false,visibility: false,transparent:true}
        );

map = new OpenLayers.Map({
div: "map",
maxExtent: new OpenLayers.Bounds(
-128 * 156543.0339, -128 * 156543.0339,
128 * 156543.0339, 128 * 156543.0339
),
restrictedExtent: extent,
maxResolution: 611.496226171875*2*2*2*2*2*2*2, // corresponds to level 8 in the cache
controls: [],
//numZoomLevels: 3,
projection: new OpenLayers.Projection("EPSG:900913"),
//   displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
layers: [
new OpenLayers.Layer.XYZ(
"二维地图层",
"/google2/" ,
{zoomOffset: 1,'getURL':get_my_url} // since our map maxResolution differs from cache max resolution
),
new OpenLayers.Layer.XYZ(
"卫星地图层",
"/google2/" ,
{zoomOffset: 1,'getURL':get_my_url1})

]
});

map.addLayers([ol_wms]);
var markers = new OpenLayers.Layer.Markers("煤矿");
     map.addLayer(markers);

   //marker
     var imgUrl = "http://localhost:9000/OpenLayersTest/images/iconSubStation.png";
     var icon = new OpenLayers.Icon(imgUrl);
     var marker = new OpenLayers.Marker(new OpenLayers.LonLat(9746760.76763,5443784.24274), icon);

     markers.addMarker(marker);

var markers1 = new OpenLayers.Layer.Markers("煤矿二");
     map.addLayer(markers1);

   //marker
     var imgUrl1 = "http://localhost:9000/OpenLayersTest/images/iconSubStation.png";
     var icon1 = new OpenLayers.Icon(imgUrl);
     var marker1 = new OpenLayers.Marker(new OpenLayers.LonLat(6746760.76763,5443784.24274), icon);

     markers1.addMarker(marker1);
//map.addLayers([ol_wms]);
map.zoomToExtent(extent);

map.addControl(new OpenLayers.Control.PanZoomBar({
                    position: new OpenLayers.Pixel(6, 18)
                }));
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.Scale($('scale'))); //比例尺
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')})); //鼠标划过点的坐标
// map.addControl(new OpenLayers.Control.Permalink());
}
function get_my_url (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()+this.zoomOffset;

var path = z +"/lx/Map_x=" + x + "y=" + y + "zoom=" + z + ".png";
var url = this.url;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
//alert(url+path);
return url + path;
}

function get_my_url1 (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()+this.zoomOffset;

var path = z +"/ter/Ter_x=" + x + "y=" + y + "zoom=" + z + ".png";
var url = this.url;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
//alert(url+path);
return url + path;
}

</script>
<body onload="init()">
<div id="map" ></div>
</body>
</html>