用 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">
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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
var options = {
17
numZoomLevels: 20
18
};
19![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
map = new OpenLayers.Map('map', options);
21![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
var googleMap = new OpenLayers.Layer.Google(
23
"Google 卫星图",
24
{
25
type: G_SATELLITE_MAP,
26
maxZoomLevel: 18
27
}
28
);
29![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
map.addLayers([googleMap]);
31![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
50
map.addLayer(cityZone);
51![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
70
map.addLayer(hotell);
71![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
76
bounds = new OpenLayers.Bounds(113.71955833435085,22.42699394226079,114.66722908020016,22.87406196594241);
77![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
66
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
67
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
71
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
72
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
73
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
74
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
75
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
76
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
77
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
78
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
79
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
80
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
81
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
82
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
83
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
84
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
85
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
86
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
87
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
88
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
89
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
90
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
91
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
92
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
93
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
94
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
95
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)