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

by · 2019-04-03

 

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 on 2008-02-17 15:45 kylin 阅读(584) 评论(5)  编辑 收藏 所属分类: GIS


评论:
#1楼  2008-03-06 21:57 | jackLee [未注册用户]
你好，按你的这个例子我测试了下。叠加上去的WMS图的效果没有你这个好呀，比如你第一张图中关键点显示得很清楚，而其它地方的透明度可以说是100%，而我做的就不行。请问这是什么原因呢？谢谢
  回复  引用    
#2楼  2008-03-06 22:03 | jackLee [未注册用户]
效果像第2张图，看上去像是蒙了层东西。远不如第一张好
  回复  引用    
#3楼  2008-04-01 23:50 | 马鹏举 [未注册用户]
一个同仁发现，这是因为ie版本的问题，ie6对png格式的透明支持不好。
  回复  引用    
#4楼  2008-04-08 12:59 | nn [未注册用户]
有错误哎 第五行不对
  回复  引用    
#5楼  2008-06-23 23:04 | craystall      
不知道你有没有试过，在以wms情况下，在画面绘制vector层，添加一个polygon，然后切换到google为背景的情况下，会发生polygon变形的情况，引起的原因是由于projection的不同，但是在用户通过layerswitch的情况下切换背景的时候，如果触发Projection.Tracsform()的转化呢？

转载自：https://blog.csdn.net/limina/article/details/2743696

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序

退出移动版