OpenLayers 学习笔记 (3) 使用 Google Maps 作底图


用 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&amp;v=2&amp;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;
12function 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    width: 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






posted @ 2008-02-17 15:45  kylindai  阅读(10688)  评论(12)    收藏  举报