您的位置：首页 > 运维架构

openlayers调用google离线图实例

2012-06-15 11:28 148 查看

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航