用 OpenLayers 叠加 Google Maps 显示深圳行政区划和深圳酒店的例子。
1
<html>
2<head>
3<title>Test OpenLayers</title>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5<script src="http://maps.google.com/maps?file=api&v=2&key=ABQI..." type="text/javascript"></script>
6<script src="openlayers/OpenLayers.js"></script>
7<script defer="defer" type="text/javascript">
8var map;
9var cityZone;
10var hotell;
11var bounds;
12
function init(){
13
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
14 OpenLayers.Util.onImageLoadErrorColor = "transparent";
15
16
var options = {
17 numZoomLevels: 20
18
};
19
20 map = new OpenLayers.Map('map', options);
21
22 var googleMap = new OpenLayers.Layer.Google(
23 "Google 卫星图",
24 {
25 type: G_SATELLITE_MAP,
26 maxZoomLevel: 18
27 }
28 );
29
30 map.addLayers([googleMap]);
31
32 cityZone = new OpenLayers.Layer.WMS(
33 "深圳行政区划",
34 "http://localhost:8080/geoserver/wms",
35 {
36 layers: 'emap:sz_cityzone',
37 srs: 'EPSG:4326',
38 style: '',
39 format: 'image/png',
40 tiled: 'true',
41 transparent: true
42 },
43 {
44 reproject: true,
45 opacity: 0.8,
46 isBaseLayer: false
47 }
48 );
49
50 map.addLayer(cityZone);
51
52 hotell = new OpenLayers.Layer.WMS(
53 "深圳酒店宾馆",
54 "http://localhost:8080/geoserver/wms",
55 {
56 layers: 'emap:sz_hotell',
57 srs: 'EPSG:4326',
58 style: '',
59 format: 'image/png',
60 tiled: 'true',
61 transparent: true
62 },
63 {
64 reproject: true,
65 opacity: 0.8,
66 isBaseLayer: false
67 }
68 );
69
70 map.addLayer(hotell);
71
72 map.setCenter(new OpenLayers.LonLat(114.0551382618498, 22.53313376205144), 8);
73 map.addControl(new OpenLayers.Control.MousePosition());
74 map.addControl(new OpenLayers.Control.LayerSwitcher());
75
76 bounds = new OpenLayers.Bounds(113.71955833435085,22.42699394226079,114.66722908020016,22.87406196594241);
77
78 map.zoomToExtent(bounds);
79
}
80</script>
81<style type="text/css">
82#map {
83 100%;
84 height: 550px;
85 border: 2px solid black;
86 background-color: #FFFFFF;
87}
88</style>
89</head>
90<body onload="init()">
91 <h1>OpenLayers Test</h1>
92 <div id="map"></div>
93</body>
94</html>
95
<html>2
<head>3
<title>Test OpenLayers</title>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">5
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQI..." type="text/javascript"></script>6
<script src="openlayers/OpenLayers.js"></script>7
<script defer="defer" type="text/javascript">8
var map;9
var cityZone;10
var hotell;11
var bounds;12
function init(){
13
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;14
OpenLayers.Util.onImageLoadErrorColor = "transparent";15
16
var options = {
17
numZoomLevels: 2018
};19
20
map = new OpenLayers.Map('map', options);21
22
var googleMap = new OpenLayers.Layer.Google(23
"Google 卫星图",24
{25
type: G_SATELLITE_MAP, 26
maxZoomLevel: 1827
}28
);29
30
map.addLayers([googleMap]);31
32
cityZone = new OpenLayers.Layer.WMS( 33
"深圳行政区划", 34
"http://localhost:8080/geoserver/wms",35
{36
layers: 'emap:sz_cityzone',37
srs: 'EPSG:4326',38
style: '',39
format: 'image/png',40
tiled: 'true',41
transparent: true42
},43
{ 44
reproject: true,45
opacity: 0.8,46
isBaseLayer: false47
} 48
);49
50
map.addLayer(cityZone);51
52
hotell = new OpenLayers.Layer.WMS( 53
"深圳酒店宾馆", 54
"http://localhost:8080/geoserver/wms",55
{56
layers: 'emap:sz_hotell',57
srs: 'EPSG:4326',58
style: '',59
format: 'image/png',60
tiled: 'true',61
transparent: true62
},63
{ 64
reproject: true,65
opacity: 0.8,66
isBaseLayer: false67
} 68
);69
70
map.addLayer(hotell);71
72
map.setCenter(new OpenLayers.LonLat(114.0551382618498, 22.53313376205144), 8);73
map.addControl(new OpenLayers.Control.MousePosition());74
map.addControl(new OpenLayers.Control.LayerSwitcher());75
76
bounds = new OpenLayers.Bounds(113.71955833435085,22.42699394226079,114.66722908020016,22.87406196594241);77
78
map.zoomToExtent(bounds);79
}80
</script>81
<style type="text/css">82
#map {83
100%;84
height: 550px;85
border: 2px solid black;86
background-color: #FFFFFF;87
}88
</style>89
</head>90
<body onload="init()">91
<h1>OpenLayers Test</h1>92
<div id="map"></div>93
</body>94
</html>95
