学习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);