OpenLayers 官方文档学习(一)

 

学习OpenLayers官方技术文档,英语不好 第一次看。
需要先创建一个地图层
引入js文件
 
1 <html>
2 <head>
3   <title>OpenLayers Example</title>
4     <script src="http://openlayers.org/api/OpenLayers.js"></script>
5     </head>
6     <body>
7       <div style="width:100%; height:100%" id="map"></div>
8     </body>
9 </html>

 

openlayers的构造器需要一个元素 需要放置在html里
需要一个html 元素 来放置  或者是ID
1 var map = new Openlayers.Map('map');
例如   如果使用wms   就是这样

1 var  wms = new Openlayers.WMS(
2 "OpenLayers WMS",
3 "http://vmap0.tiles.osgeo.org/wms/vmap0",
4 {‘layers’:‘basic’});
5 map.addLayer(wms);

 

3. OpenLayers 的构造器
首先 第一个参数是这个层的名字,第二个参数 是WMS服务器的请求地址,第三个参数是一个对象包含一些参数到wms服务的请求参数。
最终,要显示这个地图层,你必须设置它的中心点和缩放级别,这是为了能适合的显示在一个窗口里,你可以使用
zoomToMaxExtent方法,将放大完全的显示在窗口里。
Putting it All Together  把他们组合到一起
 1 <html>
 2 <head>
 3   <title>OpenLayers Example</title>
 4     <script src="http://openlayers.org/api/OpenLayers.js"></script>
 5     </head>
 6     <body>
 7       <div style="width:100%; height:100%" id="map"></div>
 8       <script defer="defer" type="text/javascript">
 9         var map = new OpenLayers.Map('map');
10         var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
11             "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
12         map.addLayer(wms);
13         map.zoomToMaxExtent();
14       </script>
15 
16 </body>
17 </html>

 

组合到一起就是这个样子
4.wms 简单完整浏览wms的html 和javascript 示例
加入一个覆盖到wms
WMS层有能力覆盖其他WMS层到同一投影(英语不好这句是查的  个人感觉就是显示到同一窗口下,只不过这个层可以覆盖到 同是wms的别的层之上),有几种方法可以标志着作一个覆盖层,而不是一个基础层。最好的方法是设置transparent参数为true 就是透明度设置。下面一个示例使用一个wms覆盖一个透明的wms。
 1 var dm_wms = new OpenLayers.Layer.WMS(
 2     "Canadian Data",
 3     "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
 4     {
 5         layers: "bathymetry,land_fn,park,drain_fn,drainage," +
 6                 "prov_bound,fedlimit,rail,road,popplace",
 7         transparent: "true",
 8         format: "image/png"
 9     },
10     {isBaseLayer: false}
11 );
12 map.addLayer(dm_wms);

 

5.怎么增加一个透明的wms层覆盖到你的地图层上
使用透明度transparent参数:true  自动设置俩个标记。
·format参数设置, 设置wms层未 img/png ,如果浏览器支持的话。(ie6除外,ie6不支持)ie6可以设置为img/gif。
·isBaseLayer参数设置,这个参数是  控制层是否可以同时显示其他层的意思。这个参数默认是false 但是设置透明度 transparent 为true的话  这个参数会自动变成true 。
这段示例和之前的组合到一起 是这样的
 1 <html>
 2 <head>
 3   <title>OpenLayers Example</title>
 4     <script src="http://openlayers.org/api/OpenLayers.js"></script>
 5     </head>
 6     <body>
 7       <div style="width:100%; height:100%" id="map"></div>
 8       <script defer="defer" type="text/javascript">
 9         var map = new OpenLayers.Map('map');
10         var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
11             "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
12         var dm_wms = new OpenLayers.Layer.WMS(
13             "Canadian Data",
14             "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
15             {
16                 layers: "bathymetry,land_fn,park,drain_fn,drainage," +
17                         "prov_bound,fedlimit,rail,road,popplace",
18                 transparent: "true",
19                 format: "image/png"
20             },
21             {isBaseLayer: false}
22         );
23         map.addLayers([wms, dm_wms]);
24         map.zoomToMaxExtent();
25       </script>
26 
27 </body>
28 </html>

 

6.如何添加一个透明wms层覆盖到你的地图(又一个?)
需要我们注意的是 我们可以使用addLayers 添加多个图层
添加矢量标记到地图上
增加一个标记在地图上的经度纬度上。你可以使用一个向量(矢量,不确定)层 覆盖;
1 var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
2 var feature = new OpenLayers.Feature.Vector(
3  new OpenLayers.Geometry.Point(-71, 42),
4  {some:'data'},
5  {externalGraphic: 'img/marker.png', graphicHeight: 21, graphicWidth: 16});
6 vectorLayer.addFeatures(feature);
7 map.addLayer(vectorLayer);

 

posted @ 2013-12-10 09:51  飞舞的砖头子  阅读(3170)  评论(1编辑  收藏  举报